Don’t know about tailwind but I used styled-components and not going back to vanilla css. CSS seems to be designed to be used with HTML, which did make sense back when it was created. Modern web is 99% JS and components composition which does not work well with Vanilla CSS in terms of class name uniqueness, specificity. Also it easy to dumb shit with CSS, like, I worked in the project where we had a lot of legacy global CSS. We had like dozen CSS styles which were adding margin to <label/>, <p> and so on. I mean no classes, just globally. I’ve been forced to add ‘all: unset’ to basically all my new components just to avoid changing global styles and breaking something else. Do not recommend.
I was very much against frameworks initially: tailwind, bootstrap etc. However, when I started really building sites & apps using components, I found tailwind made my life a lot easier, so I could easily see and change styling while writing code/html, and it would only affect that component.
Beforehand, I was trying to come up with names for CSS classes all the time, and then I’d change one thing, and fuck up styling on a diff page.
Honestly love tailwind. Once you get used to all the names/abbreviations and how they work with sizes and states etc. it’s much easier to see what’s happening when eyeballing code.
Makes reviewing and bug fixing easier too.
I get that early on it feels annoying. I recall disliking it the first time I learnt it, but then when I went back to regular css and classes I really missed it.
It helps to avoid the specificity problem. You don’t have to manage a complicated class system, you just set styles directly on the elements. Yes this is pretty much what everyone agreed in the past was the worst thing to do but that was before things like CSS variables existed (which Tailwind uses excessively) that lets you control details like color and fonts from a single point. So you don’t have to go through every component to change the brand color.
At work we don’t use Tailwind often but in our React apps we mostly use Theme-UI which lets us write regular CSS on each element in a nice JSON format instead of the class name hell that is Tailwind. This is my preferred way.
I think it’s especially great for smaller apps/sites or prototyping. Setup is quick if you’re already comfortable with CLI tools and configs. Or if you just want to get started immediately with no setup, just add a script into your site and when it needs to go into production later you can still do the setup process for a robust build.
People fear what seems foreign. Devs want css to be like a programming language and it’s not so they’re uncomfortable. Or at least this is my unvarnished opinion
![[ComiCSS] Benefits of Tailwind](https://files.catbox.moe/36lx9g.webp){kind=link}
Genuine question : what’s wrong with modern vanilla CSS3 ?
Maybe it’s because I’ve used css2 I don’t see the point of css frameworks.
Don’t know about tailwind but I used styled-components and not going back to vanilla css. CSS seems to be designed to be used with HTML, which did make sense back when it was created. Modern web is 99% JS and components composition which does not work well with Vanilla CSS in terms of class name uniqueness, specificity. Also it easy to dumb shit with CSS, like, I worked in the project where we had a lot of legacy global CSS. We had like dozen CSS styles which were adding margin to <label/>, <p> and so on. I mean no classes, just globally. I’ve been forced to add ‘all: unset’ to basically all my new components just to avoid changing global styles and breaking something else. Do not recommend.
I was very much against frameworks initially: tailwind, bootstrap etc. However, when I started really building sites & apps using components, I found tailwind made my life a lot easier, so I could easily see and change styling while writing code/html, and it would only affect that component.
Beforehand, I was trying to come up with names for CSS classes all the time, and then I’d change one thing, and fuck up styling on a diff page.
Yep, a component is a good abstraction level, no point in making life difficult by creating and coming up with names for smaller parts.
Honestly love tailwind. Once you get used to all the names/abbreviations and how they work with sizes and states etc. it’s much easier to see what’s happening when eyeballing code.
Makes reviewing and bug fixing easier too.
I get that early on it feels annoying. I recall disliking it the first time I learnt it, but then when I went back to regular css and classes I really missed it.
Now it is remembering tags for property instead.
Any passable editor nowadays does the heavy lifting for you, you can usually even write the CSS tag you want and it’ll show you the options.
Except that you learn the class names once and re-use them across all your projects, whereas CSS classes are different for every single project.
It helps to avoid the specificity problem. You don’t have to manage a complicated class system, you just set styles directly on the elements. Yes this is pretty much what everyone agreed in the past was the worst thing to do but that was before things like CSS variables existed (which Tailwind uses excessively) that lets you control details like color and fonts from a single point. So you don’t have to go through every component to change the brand color.
At work we don’t use Tailwind often but in our React apps we mostly use Theme-UI which lets us write regular CSS on each element in a nice JSON format instead of the class name hell that is Tailwind. This is my preferred way.
This is very informative. I avoided Tailwind for the reason you mentioned, but look closer now that I know the difference.
I think it’s especially great for smaller apps/sites or prototyping. Setup is quick if you’re already comfortable with CLI tools and configs. Or if you just want to get started immediately with no setup, just add a script into your site and when it needs to go into production later you can still do the setup process for a robust build.
Why Tailwind if you have CSS variables?
Tailwind uses css variables, it’s really nothing more than a bunch of helper classes on top of css, it’s not a replacement or anything.
People fear what seems foreign. Devs want css to be like a programming language and it’s not so they’re uncomfortable. Or at least this is my unvarnished opinion
Tailwind sounds cooler than CSS, which, I presume, would be important when you’re applying at a startup.