No random spacing values. No colour-of-the-week. No 4000-line stylesheet nobody dares open. Tailwind is a set of removed choices — and constraints are what let three engineers ship a coherent product.
Everything in the product references semantic tokens, not raw values. That's the difference between a codebase you can rebrand in an afternoon and one you can't touch without regression testing 200 pages.
/* styles.css — one place, everything downstream inherits */
@theme {
--color-ink: oklch(15% 0.01 90);
--color-canvas: oklch(98% 0.005 90);
--color-primary: oklch(88% 0.20 130); /* rebrand here */
--color-surface: var(--color-canvas);
--color-surface-hover: color-mix(in oklch, var(--color-surface) 92%, var(--color-ink));
--radius-card: 1rem;
--spacing: 0.25rem; /* 4-based scale */
--font-display: "Manrope", sans-serif;
}
/* usage anywhere */
<button class="bg-primary text-ink rounded-[--radius-card] px-6 py-3">`text-[#3b82f6]` is a bug. If a colour isn't in the tokens, it doesn't belong on the page.
`mt-[13px]` means the design system doesn't cover this case — either add a token or ask if 12/16 works.
`bg-surface` not `bg-white`. Dark mode is one property flip, not 400 file edits.
If a button's class string appears twice, it's a component. Full stop.
One utility function (tailwind-merge + clsx) resolves conflicts predictably.
Preflight is a starting point, not gospel — override for prose blocks and rich-text CMS output.
class order is a religion. Automate it once and never discuss it again.
Inline styles have no constraints — anyone can write `padding: 13px`. Tailwind's utilities compose from a token config (spacing, colour, radius, type). It's the difference between paint and paint-by-numbers: same medium, wildly different outcomes at scale.
Tell us your goals — we'll recommend the right technology honestly, even if it isn't this one.