[rvense]

With Tailwind, if you write out something like that more than once or twice, you're really supposed to bundle it together. Either as a plain CSS class, or a component in your framework of choice.

I suppose a library of common elements is a good thing to have, but the reason I like Tailwind is that I can use the utilities at first and then easily gather them together as plain CSS classes as and when that makes sense to me.

[mikevm]

But if you're going to hide away CSS inside a component, why not just use inline CSS? What does Tailwind add to this?

[rvense]

1) A set of a classes with consistent names for scales, colours, etc. You're not working with hex codes or pixel values. It's a more writable and much more readable syntax than inline styles.

2) It has variants for hover, etc (e.g.: class="bg-black hover:bg-white"). AFAIK you can't do that with inline styles.

3) I find it plays nicely with a workflow where I start out not knowing exactly what I'm doing, which is almost all of the time. I can smash ahead and do things in the class="" of each tag, then as I notice that I'm repeating myself, I grab small chunks of the class list and put them in '@apply's in a CSS file. Bottom-up, liek.

The class lists are just a lot more manageable than inline styles. They're copy-pastable and really easy to read when you get used to it, as long as the lists aren't too long.

[oefrha]

Whenever I read a comment like this I feel like talking to someone who’s never used Tailwind nor written inline CSS. How do you write inline CSS for pseudo-classes like :hover, :focus, :disabled? Media queries for breakpoints and dark mode? Not to mention more advanced features like divide-, space-, group-hover:, etc.

[andrewingram]

There's a pretty good article by Sarah Dayan about this, which was written in response to one of the more recent Tailwind dramas on Twitter:

https://frontstuff.io/no-utility-classes-arent-the-same-as-i...

[dgb23]

Well for one you cannot use all CSS features inline, some of them are pretty important. Then there are also bad performance implications of using pure inline styles.

But in terms of structuring your code, there are related concepts in other areas of programming:

The most general concept applied here is stratification or layering. You want to decompose your code into more general pieces so you can use those pieces to compose the actual solutions.

Example: Say you wanted to write a compiler. It typically much easier to simplify, AKA decompose the compiler into a scanner, parser, analyzer, optimizer, emitter etc. The users of your compiler probably don't care that you decomposed and layered your code. But you do care, since you can reason about your code in terms of small/local problems. Maybe you don't stop there. Your scanner can be stratified further, so you can easily build evolve and reason about it.

This is the primary thing these types of libraries do. They give you generalized building blocks that have compositional semantics that make sense. You can use their sane defaults or generate them from scratch using a design system.

Secondly the atoms are discretely defined. You're not dealing with all possible values for each property but with sets that you can join/compose. The generated classes have this little mini-syntax that you first need to get used to a bit, but after a while you'll easily remember the prefix schema of your classes (Tailwind's documentation site is also very well made). Tailwind cross joins the atoms for you, but then also deletes all the classes you didn't use in your project.

[listenallyall]

a very underrated feature of Tailwind is it's excellent documentation with immediate search. Want italic text? In straight CSS, how long will it take to look up is it font-style: italic; or text-style: italic or text-italic: true ? Tailwind's docs make it virtually instant. Even more impressive with flex and grid layouts (is it justify-items or align-items, etc). I find that Tailwind reduces the time from "idea in brain" to "implemented on page" by about 90%, now multiply that by dozens or hundreds of individual page elements. (to be fair, I don't do a ton of front end so I forget the CSS syntax quite often)

[BigJono]

This is the worst "feature" ever.

What's the point in spending 20 hours learning some custom interface that's only used in like 5% of projects and will probably be gone in 5 years, when you could spend 30 hours learning the standard that's been around for decades and understand every library for years to come?

Just learn CSS, it's not that hard.

[aniforprez]

You... don't? Spend 20 hours learning, that is

I never sat down for hours to learn it. I just started using it. Most of the classes were very intuitive with a working knowledge of the box model. For anything else I just searched the docs or even better, got the VSCode plugin to suggest the correct one

It's not a custom interface. It's just classes. It's got a type of syntax, sure, especially for media queries but it's not much different than "learning" the classes from bootstrap

It's literally just CSS but abstracted as convenient classes as the name "utility classes" implies already. I don't understand why people keep telling others to learn CSS instead. I also hate dealing and writing CSS cause it's cumbersome and unwieldy and this is a much better way of styling my HTML and getting immediate feedback

[Cthulhu_]

As others commented, inline CSS has downsides. But there are libraries out there that allow you to write a block of CSS alongside your component that are neatly packaged into a CSS file, like Styled Components (https://styled-components.com/).

[bennyp101]

Because you don't have to use it in a component system. It's not a case of hiding it away, it just has a system for building your own css library kind of thing if you want to

[antihero]

Tailwind gives you rules and constraints.

[hashedout]

Yes, the way I use it is with Svelte. I've created a list of components in Svelte (buttons, links, dropdowns, tables, etc.) I think with how tailwind makes you html look (very full of classes), it is perfectly matched with a component based framework.

That way you get the full tailwind experience without the tedious rewriting of components.