[tvphan]

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).

[machinelabo]

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?

[tvphan]

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).