Tailwind CSS to framework CSS typu utility-first: zamiast gotowych komponentów udostępnia małe klasy, jak p-4 czy text-center, które łączy się bezpośrednio w kodzie HTML.
Jak działa Tailwind?
Każda klasa odpowiada jednej właściwości CSS. Podczas budowania narzędzie skanuje kod i generuje tylko użyte style, więc końcowy plik CSS jest niewielki.
Tailwind a Bootstrap
Bootstrap oferuje gotowe komponenty o jednolitym wyglądzie, a Tailwind daje większą swobodę projektową kosztem dłuższego kodu HTML. Tailwind wymaga etapu budowania.
Zalety i wady
Zaletą jest szybkie prototypowanie i spójny system odstępów oraz kolorów. Wadą jest rozbudowany zapis klas w HTML i konieczność nauki słownictwa frameworka.
Jak utrzymać porządek w klasach?
Powtarzające się zestawy klas wydzielaj do komponentów (w React, Vue lub szablonach), a nie do własnych klas z dyrektywą @apply. Konfiguracja motywu pozwala zdefiniować kolory, odstępy i punkty graniczne projektu w jednym miejscu. Wtyczki do edytora podpowiadają klasy i sortują je w ustalonej kolejności, co ułatwia przeglądy kodu.
Zobacz w praktyce
Refaktoryzacja CSS – jak usunąć 80% nieużywanego kodu i przyspieszyć renderowanie (FCP) 
Działanie strony internetowej w przeglądarce 
Overengineering w stronach internetowych