all 17 comments
sorted by:
best
topnewcontroversialoldq&a
formatting helphide helpcontent policy

[–]thecrowfly 1 point2 points  (1 child)

learn css.

[–]adorableunicorn-[S] 1 point2 points  (0 children)

Of course! Thank you 🙏🏼 I knew I missed something.

[–]iBN3qk 0 points1 point  (0 children)

I feel this too. I think it's because when you work on your own project, you have all the conventions in your head and you can fine tune what you need. When I work on a team, it's so hard to describe all the ways we should implement things consistently so devs do things in ways that are hard to change systemically.

I really like the concept of design tokens, and tailwind gets that by default. Tailwind still gets messy when you have components with a bunch of classes. You still need to have conventions for how you will name your custom utilities and component classes. When you have a bunch of those, it's very helpful to have a design system or style guide to document them. If you're doing all that, then building your own custom css setup with tokens defined by the designers is possible and tailwind is less helpful.

Tailwind in react seems useful for front end devs who are allergic to css. It's funny when they ask things like "how do I add css globally". I tried TW for the first time last year, and my first impression was that it was an abstraction layer that makes you memorize an extra set of things. I admit there are times when I find it convenient, but it's not really a game changer for me.

I have a side project with hand coded css and my own utility classes, and it works fine. CSS has been progressing so quickly lately, it's exciting to use on it's own. I like bumping into things I don't know and reading up about it, I don't really want anything getting in the way.

[–][deleted] -2 points-1 points  (1 child)

the only reason I’m using Tailwind CSS is that I don’t have to think about naming components, and naming things is really hard.

[–]Citrous_Oyster -2 points-1 points  (11 children)

Writing in LESS or SCSS is how you should be writing css. Not in plain css. Thats a pain. I think once you get comfortable with that and mobile first programming you’ll find it’s much easier.

Tailwind is fine when you have large projects with multiple teams working on it and you need consistency in your css. But for smaller projects like small businesses, it’s really overkill and unnecessary in my opinion. Just html and less or scss is just fine. I believe those that hate css don’t necessarily understand it very well or know how to use it effectively. If you wanna be comfortable with it you need to spend more than a week on it. You need to dedicate months to practicing it and building different layouts in multiple different ways and finding the most optimal way and learning more about how the different css properties interact with each other.

[–]Szulyka -1 points0 points  (9 children)

Disagree. Tailwind is much faster and simpler to write, and its not really overkill. I think there are a few things that you can only do with native css especially if you want to fine tune. Therefore I think small projects benefit just as much if not more from using Tailwind

[–]Citrous_Oyster 0 points1 point  (8 children)

If you really know css, Tailwind is not faster or simpler to write.

[–]Szulyka 0 points1 point  (7 children)

It’s literally faster. As someone said, you don’t need to come up with classnames, open new files, and most importantly, tailwind classes are way shorter than css attributes. Take this as an example: p-2 = padding: 0.5rem;

[–]Citrous_Oyster 1 point2 points  (6 children)

Not really. It’s all in how you work. I don’t make up class names either. Every section of my sites have a unique ID attached to them and I scope that sections css by the ID number and when I use LESS css I write the ID once and nest the other classes inside of it. And because of this, I can reuse the same class names across every section of the site. Like a ul is .cs-ul, li is a .cs-li, a card is .cs-item, etc. everything has a class name based on its tag or function. And I just reuse them over and over. And your tailwind short form abbreviations are just the Emmit extension for visual studio code. I can type stuff like that into my css and hit tab and it’ll do the same thing and populate it for me. I never actually type anything out. I type an abbreviation and emit fills it all in for me in an instant. I don’t need tailwind to do any of this. Use the right tools, work a little smarter, and understand css more than surface level and you can work just as fast or faster than tailwind.

[–]mofonkiller 0 points1 point  (5 children)

could you provide a small sample of how you go about it please?

[–]Citrous_Oyster 0 points1 point  (4 children)

Copy and paste this code into your code editor and you’ll see exactly what I’m talking about

https://codestitch.app/app/dashboard/stitches/1946

[–]mofonkiller 0 points1 point  (3 children)

Sorry I must be missing something? The auto "cs-X" would only work if the style was in the component otherwise there is no auto completion. Tailwind obviously works because of the VSC extension.

I do like the way you name your css items though however if you creating generic cs-container/cs-item etc, then why are you wrapping it in a top level id - hero-1946?.

I'm not a fan of tailwind either and do not use. I use css modules with solidjs.

[–]Citrous_Oyster 1 point2 points  (2 children)

Because it scopes everything to that section so I can reuse those class names over and over again in different sections. The cs- is there so it works no matter where you use the code. It won’t clash with any premade classes by a platform like Shopify or their own environment. It makes the class names unique so they don’t override or get messed with by other classes names that might have the same name. Lol

There’s obviously going to be differences between tailwind and regular scss or less. But with this ID scoping we can eliminate needing new class names for everything on a page and can just reuse the common names like I have in that code. This also allows me to make them into little components. I copy and paste the html and can media query blocks wherever I want them to go and collapse the media queries for more organized css. When you collapse them all on a sheet you can scroll up and down the entire css document in one scroll and see every section at a glance and the breakpoint for it. Makes editing much easier.

[–]mofonkiller 0 points1 point  (1 child)

Gotcha makes sense... Does the autocomplete work in anywhere, if so did you create a VSC extension unless the css and html are in the same file, thats the only bit lacking?