I don’t use it but what I think is cool about it is: if you use it with inline JavaScript you never have to think about separation of concerns ever again.
The classes are in the HTML-document regardless of Tailwind. I should think it would be possible to create a tool that removes them from the HTML and generates whatever they did in a separate CSS-file, if you wanted to move on from Tailwind. Not pretty, but wouldn't be that bad, honestly.
I've been working in CSS for over 20 years. I know it very well. Tailwind is also my absolute most favorite technology to come along in a long time. I would even argue to use it effectively you also need to understand CSS well. The smart steering analogy doesn't jive with me at all.
Same--Tailwind is granular enough that nearly anything that can be done in CSS, can be done with Tailwind (with the caveat that Tailwind encourages you to use standard dimensional increments, which is usually a good idea anyway).
IMO, Tailwind is a coping strategy for people who have accepted that CSS is bad technology. The Cascade seemed like a good idea at the time, and made for some cool demos back in the "CSS Zen Garden" days, but in practice it is miserable to work with; it's even less suitable now that most websites are assembled from self-contained components. But it's what we have, and at least Tailwind makes it fast to build and modify things.
It seems like their analogy is based on one experience with Tailwind where the author was put under ridiculous constraints with Tailwind (constraints that even the author suggests is not typical Tailwind usage).
Most teams do not have a dedicated designer. Most developers are quite bad at CSS. These teams, which are most teams, want to ship something that is not butt-ugly and do it fast.
That's what Bootstrap did and what Tailwind does. All the endless discussions about the technical merit of inlining utility classes versus hand-crafting CSS are pointless and cannot be resolved because they miss the point entirely.
The point is: ship something good-looking very fast by people that suck at UI or don't have proper time for it.
I don't think this is right at all. Tailwind comes with no opinions about your styles other than their default units of length (p-1, p-2, p-3) having a set REM scaling. Perhaps you're thinking of e.g. DaisyUI [0]? Or some other CSS framework built on Tailwind?
Isn't all that p-1, p-2, p-3, ... stuff just like a grid system, that we already had in bootstrap? With modern CSS, I don't think such a rigid system doing size by convention is needed. Make elements resize based on their content and available space. Maybe have a min-width or min-height in some places, but why would one ever go like: "OK this is 3 parts wide, so the rest still has 9 parts left." or similar?
Tailwind is basically just a DSL for CSS. You write these Tailwind classes like "pl-4" or "items-center" and the compiler converts these into real CSS like "padding-left: 16px" or "align-items: center". You can even write arbitrary CSS using square brackets, although the syntax starts getting a bit messier: "pl-[33%]" will convert to "padding-left: 33%", so you really can use whatever arbitrary units and styles you want. So no, it's not particularly like Bootstrap, because Bootstrap is a set of predetermined base styles and components, whereas Tailwind is just a DSL for doing whatever you want to do in CSS but in a different syntax.
There is a similarity in that Tailwind provides a number of default lengths, colours, etc for you to use - the "2" in "p-2". These can be used as-is, although in most serious projects, you'll end up adjusting these based on the standard widths coming from your designer. So for example, you might have a 5px scale, in which p-1 represents a scale of 5px, p-2 is 10px, etc. In this sense, Tailwind is reminiscent of CSS frameworks like Bootstrap, but it's more similar to using CSS variables, or having a set of SCSS theme variables - you can use these values in a variety of ways, and there's always the opportunity to just use the raw CSS value syntax with the square brackets.
Specifically with the grid example, Tailwind doesn't come with any grid baked in, but you can easily access flexbox (e.g. "flex flex-column items-end" for a vertical flex with items aligned at the end), or CSS grid as you need them, so you're using all the tricks of modern CSS that you'd expect, including very flexible, resizeable layouts.
It really helps to think of Tailwind as just a DSL for CSS-in-HTML. Anything you can write with CSS, you can write with Tailwind, just differently. As to whether you need that DSL, it mainly comes down to how separate you want your CSS from your templates. In my experience, the further away my CSS is from my templates, the more like spaghetti they become, so keeping them close together helps a lot. And for deduplication, I can just use whatever tools I was using to deduplicate my HTML - partials, components, loops, etc.
(That said, I tend to find that I prefer writing CSS modules, although I do tend to create lots of utility classes there so that I can have consistent padding widths/colours, etc, so my CSS tends to have a bit of a Tailwind vibe to it.)
What don't you like about it? Anyways if you don't like it they now have the option to very easily break out of the scaling system by writing like so: p-[4px]. Can use whatever CSS units you want within the square brackets.
Tailwind is just a slightly easier way to write CSS. It doesn't have any in-built styles or components, so is nothing like Bootstrap. You are probably using Tailwind UI or some other component framework on top of it (which is the equivalent to Bootstrap that you are talking about).
I'm not really sure this is the case, and I think most people who say this haven't tried Tailwind out in anger.
Tailwind is really just a DSL over CSS. Which means you need to know and understand CSS to write it. The syntax is perhaps marginally simpler, although it has its own complexities. The biggest thing you no longer need to worry about is selector specificity, but even that's something I rarely worried about in the first place in CSS.
Everything else - the cascade, the attributes, the units, pseudo-classes, and so on - are all present in Tailwind, and you still need to understand what's going on to use it. And because Tailwind is mostly just a relatively transparent layer over CSS, all your CSS knowledge still applies. So you're not using "someone else's code", because in writing Tailwind styles, you're just writing CSS in a different syntax.
(Whether or not you need that different syntax is another story, and that mainly comes down to how much you use components and partials in your HTML authoring. If you work quite hard on deduplicating your HTML, then Tailwind is useful because your styles end up deduplicated for free alongside the HTML. If you tend to use HTML directly as your content authoring tool, then Tailwind leads to a lot of duplication, and you probably want to use CSS directly.
Bootstrap is still here. Tailwind CSS just gives more freedom, and no elements out of the box - you have to do it yourself. Both are great tools to build a landing page or a website fast.
If you use CSS and HTML together, rationally, you don't have to name any more things than you already have in Tailwind. Naming everything in CSS is a self-inflicted problem that you can easily annihilate with modern though widely supported CSS features.
Every project of any decent size needs utility classes. No reason not to use tailwind for those. But every time I head that naming things is hard, I can't take that person seriously. You're not naming a baby. and if you change your mind on .pricing__card__header, just use your editors refactoring tools to rename it.
I don't get tailwind at all. I never pressed the play button in terms of the article, but it's like promoting the use of MS Word without formatting styles... You end up with masses of shitty documents formatted with a wild mix of overlapping formatting options and extra spaces.
That seems to be even more horrible than I expected, multi-cursor editing, seriously?
@apply and the frowned upon solution is what I would expect to be the only clean solution.
I am a proponent of WET, but pulling the naming things card when it comes to places that you may want to localize, test or aria-label anyway, just seems lazy to me.
In my experience there is practically no need to use multi-cursor editing if you're extracting components or partials where appropriate, as is usually the case nowadays.
There's also a difference between naming things of actual significance, which as you say may need to be localized, labeled, etc. and having to name arbitrary CSS junk like .button--state--success, which is painfully annoying. Type it up in the CSS file, switch over to the markup file (another annoyance that Tailwind helps you avoid), paste it in, repeat.
I'm glad the writer has actually tried Tailwind and I respect it's not really their thing, but I've got to hard disagree with the Builder vs Crafter/specialist look on it. Tailwind will only just barely save you from not knowing CSS, it's still fundamental to understand it. Also I would consider myself very well versed in CSS, but while my handcrafted css works, it cannot compare in maintainability to its tailwind equivalent. CSS inevitably becomes a spaghetti soup of states after a while. I switched an entire component library to tailwind + tailwind-merge and everything was much cleaner and easier to understand. So much so I could not believe it.
> CSS inevitably becomes a spaghetti soup of states after a while
I think it happens eventually with most of code, whatever language. If you don't have a clear structure or methodology at the time of writing it, it will become a mess at some point. I don't think it's a particular problem of CSS.
So that unveils me as a "crafter" - well, am a graphic designer doing CSS since 2006 or so; in fact I've thought that way about doing 'raw' CSS, that is the most "artisanal" thing one can do in the world of web dev - and whereas it is true Tailwind can save time in styling a web page or whatever, it takes away from the expresiveness of doing it "by hand". Many people even here wonder from time to time why contemporary websites pretty much look the same: many people are using frameworks to style them.
It's kind of something like doing your own furniture in a pretty artisanal way vs. getting something from Ikea. Or more like growing your own potatoes vs. buying processed potatoes at a mall. You'll end with potatoes in your stomach, but they will taste differently.
I think the argument about Tailwind is overblown because half the people using it should just be using a component library.
Component libraries suck when you need to massage a design system into them. But at least half the arguments over Tailwind vs CSS are devs mostly doing their own thing and touting how easy it is to change X Y and Z. Similarly those same devs hate component libraries because you can't just change X without changing X everywhere.
_
A little secret they don't realize is, X changed everywhere so that your site wouldn't look like a pile of slop.
That's why even the darling of the "anti-component-library pro-ctrl+c-ctrl+v establishment" shadcn/ui had to go back and add theming and a component.json.
If not using a component library is easier for you, that's a red flag: the alternative should be your team rolled out their own design system, and that's just a different kind of difficult with a different set of trade offs.
If you're using a design system, I don't think CSS vs Tailwind is as much of a mortal conflict because the design system provides a map. Usually that map gets translated into something like variables, or even Tailwind Variants, and suddenly the biggest issue with Tailwind (scattering consistent properties across the codebase) is not as terrible as it seemed.
> that map gets translated into something like variables, or even Tailwind Variants
Sure. You can punch tailwind until it behaves like the formatting templates people used on PHP before CSS generalized them. This will indeed fix the problem.
The only thing I got to say is "blegh". You are adding code to get the "90's-dynamic" behavior into a framework that added code to remove the cascading behavior from the framework that came with code to emulate the "90's-dynamic" behavior with a few extra bonuses.
But yeah, it works. I have no idea why one would choose to go that way, but if one is constrained into it, that's a sound direction.
So the takeaway for me here is to avoid dogma, and if your “senior” coworkers are forcing it on you, leave asap. Oh and if you want to be productive, use Tailwind first and hand craft the small percent of CSS where that’s required later, if such a thing actually occurs. Everything else is just religion (in the emacs vs vim sense).
Inline styles have no support for media queries, container queries pseudo classes (hover, focus), pseudo elements (before) and attribute selectors. With tailwind I can even just stack them like this "lg:hover:px-[10px]".
Note that similarly to writing inline classes, if you need to refactor the css, you’d need to re-read and rewrite the class soup everywhere in your project.
I don’t know, I haven’t done frontend in years. But I suspect this is an insanely common request, since the preamble on this [1] page addresses it head on:
> Often the biggest challenge when working with a framework is figuring out what you’re supposed to do when there’s something you need that the framework doesn’t handle for you.
I work with designers who don’t know how to write CSS and who sometimes use Bootstrap for mock-ups (on a system not built on Bootstrap). They spend their whole day in Figma. The designers try to come up with design systems, but never finish them.
This speaks my heart. Lately I was asked by my team to ditch my own little CSS framework in favor of Tailwind CSS. Beside having an ego problem with it, I'd like to disable 'Smart Steeting' to take shortcuts now.
tl;dr: noobs often like tailwind; veterans often dislike it. Both are right and both are wrong. Context is everything. Tailwind serves a function, but it will never fully replace native CSS APIs. "Can't we all just get along."
Today's "Tailwind-in-HTML" is tomorrow's tech debt on a scale we haven't seen since the AngularJS days from a decade ago.
It won't be pretty.
(But perhaps a future job opportunity for folks who can rebuild design systems using real CSS and web standards.)