A shortcut, not a fix

A utility is CSS you would write anyway, under a shorter name.

Adam Wathan@adamwathan
Tailwind isn’t an attempt to “fix” CSS, it’s just a shortcut for generating the exact same CSS you would otherwise be writing by hand (like I used to) if you believe in the architecture. CSS the language is great, Tailwind is just a way to use it.
May 12, 2021View on X ↗
Adam Wathan@adamwathan
@oliverturner Tailwind is not in any way at all an alternative to CSS, it's an alternative CSS architecture. More than anything Tailwind is just a recommendation for what a CSS class should include and how it should be named. It could be a blog post instead of a framework.
Dec 11, 2021View on X ↗
Adam Wathan@adamwathan
Trust me I wish it was simpler too 😄 Important thing is it's the same number of styles whether you do it with Tailwind or directly in CSS, it's not more just because it's Tailwind. Some super minor details necessitate a lot of complexity. I'll try and do a blog post in the new year that breaks down what all the pieces do and the issues that necessitate doing things in certain ways 👍
Dec 30, 2023View on X ↗

Each class below maps to the declarations its rule contains, listed in the demo's data.

Classes and their CSS

Hover, focus or tap a class to toggle it and see its CSS.

Class names onlyBad
CSS visible0
Class beside its CSSGood
    <span class="inline-flex items-center gap-2 rounded-md
  bg-sky-600 px-4 py-2 text-sm font-medium text-white">

.btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  border-radius: 0.375rem; background-color: rgb(2 132 199);
  padding: 0.5rem 1rem; font-size: 0.875rem;
  font-weight: 500; color: rgb(255 255 255);
}

    Why it matters, pros and cons

    Why it matters

    Nothing is hidden. Each class is a name for declarations you already know from CSS.

    Pros

    • You can read any class as plain CSS, so nothing needs trusting.
    • Knowing CSS is enough to predict what a class does.
    • The styles are the same count either way, just named differently.

    Cons

    • Long class lists are noisy to read at a glance.
    • You still have to learn the names for the properties.
    • Some details do need several declarations behind one class.