There’s a new wave of thought in design called “design tokens” where you have a set of predefined values that are considered valid as part of the design, e.g. a website can only have spacing of 4px, 8px, 16px, etc.

One component having mr-4 and another having mr-3 is chill if that was the designer’s intention. If not, then it should be picked up during design review and easily fixed (since you end up really only having to pick from like a few values).

Agreed on the tokenization but you can do this via variables in Sass.

And put constraints as well! Comment them! Write for loops to create a full spectrum of tokens!

Then use those tokens to create a card class. Extend it for customer-support-card class!!!

What’s missing here?

Mate, you gotta chill. You seem very triggered by Tailwind! You don't have to use it if you don't want...

Some comments:

- It's very easy to integrate Sass with Tailwind. You can import the Tailwind classes just like you would Bootstrap: https://tailwindcss.com/docs/using-with-preprocessors#using-...

- You are also allowed to write semantic classes as well: https://tailwindcss.com/docs/extracting-components

I would argue the main point would be you can rapidly build interfaces... like really fast. I worked on a proposal for a client using Tailwind a month ago and we smashed out a whole website in a week. We ended up "extracting components" like buttons and cards and stuff that we found was being reused a lot (kinda like Sass).

As opposed to Styled-Components, the Tailwind classes are very valuable for designers who want to prototype live in the browser.

Also, you were complaining before about design consistency but I would argue that Tailwind allows for very high design consistency. I work with armies of outsourced developers of varying skillsets and I honestly don't trust a lot of them to write clean CSS at all. With Tailwind and Tailwind design tokens, the army of outsource developers are encouraged to work with the design tokens (as opposed to yolo'ing 3px !important everywhere).

I am arguing that the speed is a delusion and the reason why people love it so much. It seems very attractive to design things super fast since you have instant control in the same context as HTML, but I question the maintainability, readability and most importantly - design unity that breaks apart in this way of developing things. Especially, if there already exists a great solution - Sass.

I am not sold.

I think you might be misinterpreting Tailwind's "pillars":

> - Developers don’t want to write css so they add insane amounts of nuisance in templates. Impossible to read the design language.

It's not so much that developers don't want to write CSS, but that it's largely impossible to delete lines of CSS.

> - The original author of Tailwind complains about naming classes in the css but Tailwind ironically names things that are “tx—-bb-4-2” or whatever the hell that means. No thanks, I’ll write “customer-support-card” or something useful. Maybe even more generic - “card”.

So those are different complaints about naming. Your complain is that names are hard to understand. Tailwind's complaint is that trying to define "generic" (i.e. reusable) classes is practically impossible. Is "card" the right abstraction? Is "customer-support-card"?

> - Tailwind’s front page is everything that’s wrong with this. Moving around components with “mr-4” tags and shifting it up. Left. Right. Making it larger. That means that there is no standardized design language and you’ll create design that will have no cohesive unity. One component will have “mr-4” margin and another “mr-3”.

The idea is that all those margins are part of a set of "constraints" that all compose well together to form a cohesive unity. More about this is written here: https://styled-system.com/guides/why-powers-of-two

> We have the technology. Sass can create compositional components with reusability and logical hierarchy.

This might be the main point: Tailwind means you're not defining reusable styles. All the styles are specific to the component, and the component is the thing you reuse - which we were defining already. So it actually gets rid of yet another tool to create compositional components with reusability and logical hierarchy.

(It's less fast for me to get to something working than e.g. using Bulma is, but I'm expecting that it will rid me of a number of the pains I run to when I'm hitting the limits of its built-in component styles.)

I get the compositional aspects of it. I've used similar utility css classes. They're pretty nifty because its instant gratification. No need to switch context and go to Sass.

However, for production, I always come back and refactor everything into a beautiful Sass file that explains with comments what all the stuff is doing.

Now, the designer can come in and change something in the sass without having to worry about the rest of the app. They can easily debug too 'customer-support-class' straight from chrome browser.

I feel like Tailwind is a prototyping tool that's then shoehorned into production environment and in large applications where the design language (despite of tokens and standards) breaks down.

I definitely see how that workflow works better in your setup, but... That doesn't apply to everyone? Not everyone works somewhere where they have an independent designer that can and will change the actual SASS, whereas others might even have designers that a perfectly comfortable rummaging around in e.g. JSX or Vue components. The indirection of a separate SASS file might not be worth it in those cases.

All of which is to say: just because it's not the best solution in your use case, that doesn't mean it doesn't solve actual problems for others in production.

My brother. Oh god I thought I was alone. I just kinda got CSS and all these easier, softer methods just get in my way.

I love me some sass scoped to the component. You don't need classes and the structure matches the markup, making it trivial to see what styles apply.

> the structure matches the markup

So you’re just writing your HTML twice, essentially. You can’t change your HTML without changing your CSS, so at that point, what’s the point in writing the CSS? May as well just add the styles right on the HTML.

They’re both fundamentally just part of how it looks, and I don’t see a lot of benefit in trying to keep that separate.

Everyone hates Tailwind before they use it. None of your criticisms are new. Actually using Tailwind makes you realize that creating CSS classes for your components is basically a waste, since you only ever use them in the component itself.

- Unless the same class can be used in multiple HTML templates, there’s no point in giving the class a name.

- Only very general CSS can be used in multiple templates because anything specific will have the brittle base class problem.

PS mr-3 is .75rem and mr-4 is 1rem, so you can see with your eyeballs if you’re using the wrong one.

Tailwind is just like shorthand, it might not be useful to you but it is useful for some fast prototyping and iteration.

My experience teaches me that everything born for "fast prototyping" is going to temporary stay for years to come. So tailwind, like bootstrap, just moves the problem from css to html class attribute.

Agreed and that’s it’s only selling point.

Fast is not always better. It makes spaghetti code with shit design that lacks an architect behind it.

There are many threads on HN about Tailwind and it’s always very controversial.

I wouldn’t call this thing mature when there is so much controversy.

>- Developers don’t want to write css so they add insane amounts of nuisance in templates. Impossible to read the design language.

I don't think this premise is very shaky, unfortunately, if it was shaky I doubt we would be seeing all these solutions coming around trying to help developers avoid writing css, solutions which seem to have uptake in the market.

Please have a look at https://adamwathan.me/css-utility-classes-and-separation-of-...

With tailwind you can create a very small configuration files where you pick a small set of available options for spacing and colors. This is actually a big help to implement a consistent design system. Many people see tailwindcss as a "design system builder".

Please show me the doc for "tx—-bb-4-2". Does it exist or are you just inventing it for some reason? Is "mr-2" unclear?

Sass has nothing to do with tailwind. It would be like comparing typescript and react.

Tailwind can be controversial and mature at the same time. Both things are not exclusive. PHP is controversial and mature.

I don't know about other people but in your particular case I would say that you are showing sign of a knee-jerk reactions and bad faith justifications.