Proč stále používám SCSS moduly

Každý nový projekt začne stejnou otázkou: Tailwind, nebo SCSS moduly?

Záleží na kontextu. Po čtyřech letech na produkčních projektech jsem dospěl k jednoduché heuristice.

Kdy Tailwind vyhraje

Tailwind vyhraje ve chvíli, kdy rychlost iterace je důležitější než udržovatelnost na delším horizontu. Marketingové weby, landing pages, prototypy — v těchto případech je výhoda Tailwindu v rychlosti nastavení a konzistenci bez přemýšlení nad tokeny.

Tailwind v4 s nativní kaskádou CSS proměnných je navíc výrazně lepší než v3. Funguje jako odlehčený design systém hned po instalaci.

Kdy SCSS moduly

Sdílené design systémy a komponentové knihovny jsou přesně tam, kde SCSS moduly svítí. Komponenty jsou izolované, třídy jsou hashované, žádné globální kolize.

Navíc: SCSS moduly jsou prostě CSS — žádné mentální přepínání mezi utility třídami a jejich výstupem. Píšu přesně to, co vidím v DevTools.

.button {
  padding-block: var(--gap-2);
  padding-inline: var(--gap-3);
  background: var(--accent);

  &:hover {
    filter: brightness(1.1);
  }
}

Vnoření, proměnné, mixiny — to vše zůstane součástí komponenty, ne globálního prostoru.

Kombinace obojího

Tento web používá obojí. Tailwind v4 pro reset a globální utility, SCSS moduly pro každou komponentu zvlášť. To mi dává flexibilitu bez obětování čitelnosti.

Klíčové je, že design tokeny žijí jako CSS custom properties — přistupuje k nim Tailwind i SCSS zároveň bez duplicity.

---

Neexistuje universální odpověď. Ale pokud stavíte systém, který bude žít déle než rok — SCSS moduly za zamyšlení stojí.