Tailwind as explained in their official website is a utility-first CSS framework packed with classes like flex, pt-4, text-center and rotate-90 tha...
For further actions, you may consider blocking this person and/or reporting abuse
Do we have a name for these types of libraries that use a bunch of classes to write less css? :)
My primary concern with these types of libraries are like you mention, the longer class definitions, and that they move the payload from the CSS onto the HTML.
Meaning even tho the library is smaller, the overall payload for a page may not be.
Personally i really like using the BEM + Atomic Design approach but with mixins for everything but atoms, that way each component is self contained, and when packaged i only get the used styles.
The douple definitions this generates, are then handled by strong gzip/brotli compression, meaning the overhead of the duplicate styles become insiginificant.
The increased productively is something i can agree to tho and is a big seller, not having to write styles seperately means a faster output. :)
My conclusion so far has been that BEM & Atomic design like patterns are good for established design systems, because consistency is easier, and you can do global design updates without running into issues where .pad-15 is defined as padding of 30px because we did not have time to update all the templates. :D
Outside of design systems, where consistensy is less important then making more parts fast, then i definitely see a good usecase for libraries like tailwind. :)
Same bruv, I also use raw css but follow the CUBE methodology. Really love exceptions in that. Amen to what you said!
Nice, never heard of CUBE before, reading about it now, and i am really liking the different perspective, thanks!
The magic everyone misses in these languages is @apply. You start with the classes, then you can build the classes that are just a merging of those classes. Start with classes, deploy with @apply.
Looked it up briefly, it looks a lot like @mixins/include in sass but without the output duplication.
I hope something like this makes it into the CSS spec soon'ish. :)
Yes size gets moved to HTML, however, it is a fair tradeoff. Every HTML page that needs those styles, has them. The CSS then gets treated as a common import - with a finite size. The problem with other approaches is that there are often bad / changing categorisations of things when building. This results in duplication of CSS which is not easy to untangle.
The main advantage of Tailwind over other frameworks like Bootstrap is its versatility. Have you tried switching from v3 to v5 Bootstrap? Elements have changed, naming has changed - with a large project it's a huge amount of work to check and rewrite. TW allows you to mix classes - you can put them directly into HTML code (great for all sort of components) but it also works beautifully with BEM using @apply and postcss. This gives You opportunity to create own elements and then easily switch even to pure CSS. I'm also using JIT compiler so build is fast and small in size.
Have you tried switching from v3 to v5 Bootstrap? Elements have changed, naming has changed --> because each version of bootstrap is a different framework and this is explicitly said in their doc. And this is actually a good point because if you want to change the version you have to change your thinking and adapt your site to the new standard. With tailwind you may never touch the code for a long period and one day when you want to change it you will get lost in the amount of class you wrote
Bootstrap also comes with a lot of utility CSS. Are you aware of this?
I agree that writing
class="flex flex-row justify-center align-center h-10 w-10"may not be clear. But you must not forget that you can create a class composed of another class using "@apply".Like
class="myClass".myClass {@apply flex flex-row justify-center align-center h-10 w-10
}
With a meaningful name for your class.
Loved the piece. Tailwind does comes with its pros and cons. BTW do give this piece a read if you are a Tailwind user like me: dev.to/msaaddev/tailwind-css-user-...
Also, this might also help you to eliminate the grunt work of Tailwind CSS setup: github.com/msaaddev/new-tailwind-app
Nice writeup, love how you talk about the pros and cons instead of blindly following the trend.
One aspect of Tailwind that's rarely discussed is its handling of complexity. Sure, it pretty much avoids specificity and therefore deals with one of the challenging aspects of CSS... but that also makes media queries quite hard to work with. You just keep adding classes and classes for each viewport size, which is a sub optiman solution.
In my opinion, this is going to be its downfall. CSS is getting increasingly complex in that direction. Media queries nowadays go far beyond screen sizes, into multiple accessibility issues such as dark mode, reduced motion, high contrast, etc. And it's about to become even more complex with container queries, layers, scopes... things that I can't really see Tailwind (or the utility-first / utility-only architecture) handling satisfactorily.
But that's me. In the very near future (~ 2 years) we may go into a valorization of the "normal" CSS specialist to handle the incredibly complex contexts of modern CSS. Or not. But if we do, Tailwind is going to be rapidly obsolete.
Increased productivity is a subjective matter.
Tailwind is good for smaller apps, but as soon as the app becomes big; all of these classes become a nightmare to manage as compared to the BEM or atomic approach used while writing css/scss.
I had to quit Tailwind halfway in a project just because it was not manageable on an industrial level software.
Everyone's preference is going to be different, just as we are all different. Personally I use Chakra-UI. After getting comfortable with it I can't hardly stand to see normal HTML, such as div's, in my code. ;)
But if you use Tailwind, chances are you'll be standardizing raw CSS avoidance in your guidelines (otherwise your codebase would turn into a mess with the very first freshly hired frontend developer), so your cost to hire rises drastically, because you now have to teach every single frontend dev you hire how to use Tailwind? It's not nearly a no-brainer must-have like ES6, you can't only hire those who know Tailwind — there'll soon be no candidates to offer a job to.
I had to make that kind of decisions while working as a lead frontend dev / evangelist and interviewing 10 devs a week. Gulp broke on us and turned into legacy, same with SCSS and obviously Backbone.
Can't go wrong with raw tools though, considering the fast pace of innovation of web standards.
To me, Tailwind is only perfect when you’re writing code alone 😉
I tried many times but always end up writing raw css. So I'm a exception and this was not convincing. Just because I've heard same points many a times.
I have tried to use Tailwind twice now but I keep returing back to standard CSS. I do have some Bootstrap components as foundation always but then the rest is just SCSS with BEM approach.
Problem with Tailwind is number of css classes I need to write. Often css class starts to look like style tag and I end up wondering how is this better and faster?
Perhaps I should give a third go to TW but then again, BEM with Atomic Design isn't really broken to me. So why try to replace it?
Thanks for the great work!
Love to see it.
Does tailwind have demos for some of the stuff that needs JavaScript? Like accordions, modals, tooltips, etc, etc,
Tailwind is a pure CSS framework so it only includes styling. You can use any JS library you like / write Your own JS code to create components.
tailwindcss.com/docs/extracting-co...
what you might be looking for is their other product, Tailwind UI: tailwindui.com/
Nice article, if you use React I have coded a UI Kit powered by Tailwind CSS
windy-docs.vercel.app/
I've gone from CSS -> Tailwind -> Inline CSS, xD with a custom class here or there.
To me Tailwind is just like inline css, what if you made a change in a component and have to do the same change in other files?
You can still abstract tailwind utility classes into named classes if the situation calls for it. Then you'd just update the class instead of multiple components.