Tailwind CSS is an utility based CSS framework that has taken the frontend world by storm. It gives developers without a deep understanding of design the ability to build visually gorgeous, modern user interfaces.

The key to Tailwind's popularity is the painstakingly constructed system of design tokens at the core of the framework. The system's carefully selected constraints give developers just the right guardrails. They make it obvious whether a choice is good or bad by offering only discrete steps.

This does require some design taste, but most frontend engineers I know have developed that over the years of building user interfaces. Tailwind's system lets them turn that taste into implementation without requiring a lot of design skill — it helps them cross "the gap".

Tailwind's system is a masterpiece of design. I, and many other developers all around the world, feel empowered by and love it.

Writing some thoughts on tailwind after using it for a few months, or rather after playing it for few months. It was a bit difficult to adjust to at first, but then I really started enjoying it. Here are some thoughts:

• Enforced consistency: spacing, colors, sizes. Nice to have that be in one place.

• I can copy-paste markup. this is huge. People don’t appreciate how powerful it is to be able to just move a bunch of markup/code to another file with NO changes, NO extra imports, NO class renames, etc. this wins over CSS modules or Stylesheet.create

• Low-level: I already have components, don’t need “more involved” framework stuff

• The visual info is colocated with markup. Don’t need to open another file (plain CSS) “jump to definition”, or constantly glance up/down. The style info is right there in the tree itself.

• It feels like inline styles (which I generally enjoy using a lot because I don’t have to come up with names for every little thing), but without spreading my tree too thin vertically, and without the perf cost of inline styles.

• One thing that annoyed me was that whenever I used a new style that hasn’t been used before, I had to restart the dev server for it to work. this was so confusing. I think maybe my setup is messed up and there has to be some way to not have this issue, so far I don't know how.

• Tailwind's main selling point (besides rapid prototyping via utility classes) is its attractive design system. The painstakingly constructed system of design tokens at the core of its framework. The system's carefully selected constraints give developers just the right guardrails. They make it obvious whether a choice is good or bad by offering only discrete steps.

• Another thing that I prefer Tailwind over styled-components or SASS (aside from vertical space) is that the hierarchy feels right. Styles are details of my components, not the other way around. I don’t want to name something and make it a unit just because it has some style.

• Another benefit: being able to quickly find your components with a simple search in your editor. Very useful when debugging a bug, I locate the nearest string that looks like composed style and find the related code in a few seconds. WOW!! Surprisingly quick.

Final verdict: Weird at first, but would use again. May be in all of my future projects, solelety because of it's speed and small bundle size.