Tailwind CSS

Tailwind CSS to framework CSS typu utility-first, który stylizuje stronę małymi, jednozadaniowymi klasami wpisywanymi bezpośrednio w HTML. Klasy takie jak p-4, text-center czy bg-blue-500 ustawiają po jednym stylu. Łącząc je, programiści budują dowolny projekt bez pisania dużej ilości własnego CSS.

Utility-first w CSS oznacza budowanie wyglądu z wielu małych klas, z których każda robi jedną rzecz, zamiast pisania osobnej klasy dla każdego komponentu. Przycisk dostaje wygląd z klas odpowiedzialnych za odstępy, kolor, zaokrąglenie i grubość czcionki. Takie podejście trzyma style blisko kodu HTML i zapobiega rozrastaniu się ogromnych arkuszy stylów.

Programiści wybierają Tailwind CSS, bo przyspiesza stylowanie i utrzymuje końcowy plik CSS w małym rozmiarze. Nie trzeba wymyślać nazw klas ani przełączać się między plikami HTML i CSS przy każdej zmianie. Tailwind CSS daje też spójną skalę odstępów, kolorów i rozmiarów czcionek, dzięki czemu projekt pozostaje uporządkowany.

Tailwind CSS daje niskopoziomowe klasy narzędziowe do budowy własnego projektu, a Bootstrap gotowe komponenty, takie jak paski nawigacji, karty i okna modalne. Bootstrap jest szybszy, gdy wystarczy standardowy wygląd przy niewielkiej pracy projektowej. Tailwind CSS lepiej sprawdza się, gdy projekt potrzebuje unikalnego wyglądu bez walki z domyślnym motywem.

Tailwind CSS instaluje się przez npm i podłącza do narzędzia budującego projektu, na przykład Vite, PostCSS lub Tailwind CLI. W wersji 4 dodajesz pakiet, a potem importujesz go na początku głównego pliku CSS poleceniem @import "tailwindcss". Oficjalny poradnik instalacji zawiera krótkie instrukcje dla popularnych frameworków, w tym Laravel, Next.js i Vite.

Tailwind CSS jest dobry dla początkujących, którzy rozumieją już podstawowe właściwości CSS, takie jak margin, padding, flexbox i grid. Każda klasa Tailwind odpowiada prawdziwej właściwości CSS, więc znajomość CSS ułatwia czytanie klas. Początkujący, którzy pomijają podstawy CSS, często mają problem z naprawianiem układów w Tailwind CSS.

Większość programistów znających CSS zaczyna sprawnie pracować z Tailwind CSS po kilku dniach. Nazwy klas mają czytelne wzorce, więc poznanie jednej grupy pozwala odgadnąć pozostałe. Opanowanie wariantów responsywnych, własnych motywów i wzorców komponentów zajmuje kilka tygodni praktyki.

Responsywność w Tailwind CSS polega na dodawaniu przed dowolną klasą prefiksów punktów przerwania, takich jak sm:, md: i lg:. Tailwind CSS działa w podejściu mobile-first, więc klasa bez prefiksu dotyczy wszystkich ekranów, a klasa z prefiksem obowiązuje od danego punktu przerwania w górę. Na przykład text-sm md:text-lg daje mały tekst na telefonach i większy na szerszych ekranach.

Domyślne punkty przerwania w Tailwind CSS to sm przy 640 pikselach, md przy 768, lg przy 1024, xl przy 1280 i 2xl przy 1536 pikselach. Każdy z nich oznacza minimalną szerokość, zgodnie z podejściem mobile-first. Projekt może zmienić te wartości lub dodać nowe w ustawieniach motywu.

Tryb ciemny w Tailwind CSS dodajesz, umieszczając prefiks dark: przed dowolną klasą, na przykład dark:bg-gray-900. Domyślnie Tailwind CSS stosuje ustawienie systemu operacyjnego odwiedzającego. Aby użytkownik mógł przełączać tryb przyciskiem, konfigurujesz wariant dark tak, by zależał od klasy lub atrybutu data na stronie.

W Tailwind CSS w wersji 4 kolory i czcionki zmieniasz za pomocą zmiennych CSS w bloku @theme w głównym pliku CSS. Zmienna taka jak --color-brand automatycznie tworzy klasy bg-brand i text-brand. Starsze wersje używały do tego pliku tailwind.config.js, a takie podejście nadal działa w wersji 4 dzięki opcji zgodności.

Tailwind CSS może sprawiać, że HTML wygląda na przeładowany, bo jeden element bywa obłożony wieloma klasami. Większość zespołów rozwiązuje to, zamieniając powtarzające się wzorce w komponenty frameworka, na przykład w Blade, React czy Vue. W zamian style są widoczne obok kodu, co czyni zmiany szybkimi i bezpiecznymi.

Tailwind CSS utrzymuje mały plik CSS, skanując pliki projektu i generując tylko klasy, które są faktycznie używane. Nieużywane klasy nigdy nie trafiają do końcowego arkusza stylów. Typowy produkcyjny plik CSS zbudowany z Tailwind CSS jest mały nawet w dużych serwisach.

Dyrektywa @apply w Tailwind CSS pozwala używać klas narzędziowych Tailwind wewnątrz własnych reguł CSS. Przydaje się przy stylowaniu treści, nad którą nie masz kontroli, na przykład HTML z edytora tekstu. Twórcy Tailwind zalecają używać jej oszczędnie, bo komponenty są zwykle czystszym sposobem ponownego użycia stylów.

Tak, Tailwind CSS dobrze współpracuje z Laravel, a nowe projekty Laravel są od razu przygotowane do korzystania z niego razem z Vite. Klasy Tailwind piszesz w szablonach Blade, a Vite buduje końcowy CSS. Zestawy startowe Laravel również używają Tailwind CSS na ekranach logowania i panelu.

Tak, Tailwind CSS działa z React, Vue, Svelte i większością innych frameworków JavaScript. Klasy umieszcza się w kodzie komponentu przez className w React lub class w Vue. Ponieważ każdy komponent zawiera własne klasy, Tailwind CSS dobrze pasuje do frameworków opartych na komponentach.

Tailwind CSS nie wpływa bezpośrednio na pozycję w wyszukiwarce, ale może pośrednio pomóc SEO, utrzymując mały plik CSS i szybkie strony. Szybkość strony jest częścią sygnałów page experience Google. Treść, struktura strony i semantyka HTML nadal liczą się znacznie bardziej niż narzędzie do stylów.

Wartości arbitralne w Tailwind CSS pozwalają użyć dokładnej wartości spoza motywu, wpisując ją w nawiasach kwadratowych. Na przykład w-[37%] lub top-[117px] od razu tworzy klasę dla tej konkretnej wartości. Przydają się w jednorazowych przypadkach, ale często używana wartość powinna trafić do motywu.

Stany hover i focus w Tailwind CSS działają przez dodanie przed klasą prefiksu stanu, takiego jak hover:, focus: lub active:. Na przykład bg-blue-500 hover:bg-blue-600 przyciemnia przycisk po najechaniu myszą. Prefiksy można łączyć z punktami przerwania i trybem ciemnym, na przykład md:hover:underline.

Nie, sam Tailwind CSS zawiera tylko klasy narzędziowe, a nie gotowe komponenty, takie jak okna modalne czy paski nawigacji. Gotowe komponenty pochodzą z osobnych kolekcji, na przykład oficjalnego Tailwind Plus lub bibliotek społeczności, takich jak daisyUI i Flowbite. Wiele zespołów buduje własny mały zestaw komponentów na bazie klas narzędziowych.

Tak, Tailwind CSS obsługuje układy od prawej do lewej dzięki wariantom rtl: i ltr: oraz logicznym klasom narzędziowym. Klasy logiczne, takie jak ms-4 i pe-2, ustawiają margines i dopełnienie na początku lub końcu linii, więc w języku arabskim odwracają się automatycznie. Dzięki temu jeden kod HTML działa zarówno na stronach angielskich, jak i arabskich.

Tailwind CSS w wersji 4 przeniósł konfigurację do CSS, z blokiem @theme i jedną linią @import. Wersja 4 przyniosła też szybszy silnik budowania, automatyczne wykrywanie plików z treścią i nowoczesne funkcje CSS, takie jak warstwy kaskady. Większość projektów przechodzących z wersji 3 może zaktualizować kod oficjalnym narzędziem do migracji.

Tailwind CSS może nie być najlepszy, gdy projekt potrzebuje pełnego zestawu gotowych komponentów prawie bez własnego designu albo gdy zespół woli pisać klasyczny CSS. Mała statyczna strona z kilkoma stylami może w ogóle nie potrzebować frameworka. Tailwind CSS najbardziej się opłaca w projektach z własnym designem, które stale się rozrastają.

Porządek w klasach Tailwind CSS utrzymasz, zamieniając powtarzające się wzorce w komponenty i układając klasy w stałej kolejności. Oficjalna wtyczka Prettier dla Tailwind CSS automatycznie sortuje klasy przy zapisie. Zdefiniowanie kolorów marki i odstępów w motywie też sprawia, że klasy są krótkie i spójne.

Tak, Tailwind CSS jest oprogramowaniem open source na licencji MIT, więc można go używać w projektach prywatnych i komercyjnych. Licencja pozwala używać, modyfikować i dostarczać Tailwind CSS w dowolnym produkcie. Kod źródłowy jest publiczny na GitHub, gdzie każdy może go przeczytać i zgłaszać problemy.