Tailwind CSS: limity designových systémů pro vývojáře

Proč Tailwind CSS omezuje škálovatelné designové systémy: analýza přístupů

Tailwind CSS urychluje prototypování, ale jeho utilitární přístup vede k problémům při škálování. V designových systémech komponenty jako tlačítka vyžadují kombinace variant, velikostí a stavů. Přidání nové variace, například btn-focus, musí zachovat kompatibilitu s btn-sm, btn-lg, btn-outline. Stavy jako hover (o 15% tmavší) nebo active (o 10% světlejší) musí být aplikovány systematicky. V klasických frameworkech se to řeší mixiny, například:

.button-variant-other(@color; @background; @border);

Tailwind nenabízí vestavěné mechanismy pro takovou integraci bez kompromisů.

CVA: rychle, ale omezeně

Shadcn používá CVA pro tlačítka s pevnými variantami a velikostmi:

variant "default" | "outline" | "ghost" | "destructive" | "secondary" | "link"
size "default" | "xs" | "sm" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg"

Výhody:

• Rychlý vývoj bez přepínání mezi soubory.
• Čisté API pro základní případy.

Nevýhody se projevují v dlouhodobých projektech:

• Není možné vytvořit primary outlined small bez rozšíření.
• Pevná sada kombinací hromadí technický dluh za 6+ měsíců.

Pro jednoduché projekty je to přijatelné, ale v enterprise vývoji vede ke zvýšení nákladů.

CSS proměnné: univerzální řešení

Přístup s CSS proměnnými odděluje logiku stavů od variant:

.btn {
  @apply inline-flex items-center justify-center rounded px-4 py-2 font-body;
  background-color: var(--btn-color);
  color: var(--btn-text, white);
}

.btn:hover {
  background-color: color-mix(in srgb, var(--btn-color), black 15%);
}

.btn:active {
  filter: brightness(1.1);
}

.btn-primary {
  --btn-color: theme('colors.blue.600');
}
.btn-whatever {
  --btn-color: …;
}

Klíčové výhody:

• Automatické stavy pro všechny barvy.
• Snadno přidávat varianty prostřednictvím proměnných.
• Kompatibilní s jakoukoli UI knihovnou.

Nevýhoda pro Tailwind: ztráta rychlosti, protože styly se vyjímají do samostatných souborů.

Direktiva @utility: provizorní řešení pro utility

Direktiv generuje třídy dynamicky:

@utility btn-* {
  font-size: --value(--text-ui-*, [length]);
  background-color: --value(--color-ui-*, [color]);
  color: --value(--color-ui-*-text, [color]);
}

To umožňuje kombinovat s modifikátory Tailwind pro hover nebo responzivní design. Avšak:

• btn-focus není určen pro sm nebo lg — funkční třídy se neškálují.
• Vytvoření primary small outline vyžaduje křehké variace v komponentech.
• Systém se rozbíjí při složitých kombinacích.

Srovnání přístupů

| Přístup | Rychlost | Škálovatelnost | Integrace stavů | Závislost na Tailwind |

|--------|----------|----------------|----------------|------------------------|

| CVA | Vysoká | Nízká | Omezená | Plná |

| CSS vars | Střední | Vysoká | Plná | Nízká |

| @utility | Střední | Střední | Částečná | Vysoká |

CVA je vhodné pro MVP, CSS proměnné pro production, @utility je přechodná varianta.

Co je důležité

• Tailwind nevnucuje strukturu: utilitárnost vyžaduje vlastní sestavený systém.
• Komponenty jako třídy: omezuje složité designové systémy pevnými možnostmi.
• Technický dluh: jednoduchost na začátku vede k refaktorování za půl roku.
• Alternativy fungují: CSS proměnné dávají flexibilitu bez ztráty Tailwind.

Tailwind je ideální pro rychlý start, ale pro zralé designové systémy vyžaduje hybridní řešení nebo opuštění striktní utilitárnosti.

— Editorial Team