Czym jest Tailwind CSS? Prosty przewodnik dla twórców aplikacji

Tailwind CSS to zestaw narzędzi do stylizowania stron internetowych. Zamiast pisać osobne reguły stylów w osobnym pliku, nadajesz każdemu elementowi krótkie, gotowe nazwy klas — bg-white dla białego tła, p-4 dla wewnętrznego odstępu, text-lg dla większego tekstu, rounded-xl dla zaokrąglonych rogów — a Tailwind generuje kod CSS, którego potrzebuje przeglądarka. Jest darmowy, open source i jest jednym z najpopularniejszych sposobów stylizowania nowoczesnych aplikacji internetowych.

Dlaczego Tailwind ma znaczenie, gdy budujesz z AI

Jeśli budujesz aplikację internetową przy pomocy asystenta AI, jest spora szansa, że jest ona stylizowana Tailwindem. Mythex, na przykład, zaczyna nowe projekty na Vite + React + TypeScript + Tailwind, chyba że poprosisz o coś innego (jak dobierany jest stos technologiczny).

To ma dla ciebie trzy znaczenia:

• Zmiany wyglądu są tanie. Ponieważ styl znajduje się tuż obok każdego przycisku, karty i nagłówka, AI może zmienić „zrób karty mniej zatłoczone”, edytując kilka nazw klas w jednym miejscu.
• Możesz to przeczytać. Klasy Tailwinda są bliskie zwykłemu językowi. text-center font-bold text-2xl nie jest trudne do odczytania, nawet jeśli nigdy nie pisałeś kodu.
• Wygląd pozostaje spójny. Tailwind ma stały zestaw rozmiarów, odstępów i kolorów. Dzięki temu aplikacja nie kończy z czternastoma nieznacznie różnymi odcieniami szarości.

Codzienna analogia

Pomyśl o malowaniu domu.

Zwykły CSS to jak mieszanie własnej farby na każdą ścianę. Masz pełną swobodę, ale po jakimś czasie salon jest „ciepłą bielą”, korytarz „odrobinę cieplejszą bielą”, a nikt już nie pamięta dlaczego.

Tailwind to jak katalog kolorów z sztywną paletą kolorów i zestaw oznaczonych naklejek. Każda ściana dostaje naklejkę — „biała, matowa, 2 warstwy” — a katalog oferuje tylko wyselekcjonowany zestaw odcieni. Tracisz trochę swobody, ale wszyscy na budowie wiedzą dokładnie, jak ma wyglądać każda ściana, po samym odczytaniu naklejki.

Jak działa Tailwind

Strona internetowa składa się z HTML-u (treść i struktura) oraz CSS-u (wygląd). Zwykle CSS znajduje się w osobnym pliku z regułami takimi jak ta:

.card {
  background: white;
  padding: 1rem;
  border-radius: 0.75rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

Z Tailwindem pomijasz pisanie takiej reguły i umieszczasz klasy narzędziowe bezpośrednio na elemencie:

<div class="bg-white p-4 rounded-xl shadow-sm">
  Rezerwacja została potwierdzona
</div>

Każda klasa wykonuje jedno małe zadanie. Gdy aplikacja jest budowana, Tailwind przegląda twoje pliki, znajduje klasy, których faktycznie użyłeś, i generuje CSS tylko dla nich. Dzięki temu końcowy arkusz stylów jest mały.

Tailwind w wersji 4, obecnej głównej wersji, wymaga bardzo niewielkiej konfiguracji: instalujesz go, dodajesz jego wtyczkę do narzędzia budującego i wpisujesz @import "tailwindcss"; na początku pliku CSS. Dostosowania, takie jak kolory marki i czcionki, definiuje się w CSS jako tokeny projektowe, a nie w dużym pliku konfiguracyjnym JavaScript, jak było w starszych wersjach. Jeśli czytasz starszy poradnik, który wspomina tailwind.config.js, to właśnie dlatego.

Przykład: karta cennika

Załóżmy, że poprosiłeś asystenta AI o stronę z cennikiem i chcesz, żeby karta „Pro” się wyróżniała. Kod tej karty może wyglądać tak (w komponencie React zapisuje się class jako className):

<div className="rounded-2xl border border-gray-200 p-6">
  <h3 className="text-lg font-semibold">Pro</h3>
  <p className="mt-2 text-4xl font-bold">$25</p>
  <button className="mt-6 w-full rounded-lg bg-gray-900 px-4 py-2 text-white">
    Rozpocznij okres próbny
  </button>
</div>

Czytając od lewej do prawej:

Jeśli poprosisz „zrób, żeby karta Pro się wyróżniała niebieską ramką i delikatnym cieniem”, AI może zmienić border-gray-200 na border-2 border-blue-600 i dodać shadow-lg. To cała zmiana.

Responsywność i tryb ciemny

Tailwind ma krótkie przedrostki dla rozmiarów ekranu i stanów:

• md:grid-cols-3 — trzy kolumny na średnich ekranach i większych; na telefonie obowiązuje domyślna pojedyncza kolumna. Tailwind jest mobile-first: klasy bez przedrostka działają wszędzie, a przedrostki dodają zmiany dla większych ekranów.
• hover:bg-gray-700 — ciemniejszy przycisk, gdy nad nim jest kursor myszy.
• dark:bg-gray-900 — inne tło, gdy włączony jest tryb ciemny.

Dlatego poproszenie o układ dostosowany do telefonu lub tryb ciemny zwykle w projekcie opartym na Tailwindzie jest szybkie.

Kluczowe pojęcia

Częste mylne przekonania

• „Tailwind to design.” Nie jest. Tailwind daje klocki budowlane, a nie wygląd. Dwie strony w Tailwindzie mogą wyglądać zupełnie inaczej. Ogólny „wygląd aplikacji AI” bierze się z domyślnych ustawień, a nie z samego Tailwinda — daj swojemu asystentowi konkretne wskazówki. Zobacz jak zaprojektować dobrze wyglądającą aplikację z AI.
• „To to samo co style inline.” Nie do końca. Klasy pochodzą ze wspólnej skali, obsługują najechanie kursorem, tryb ciemny i punkty przełamania, a w czasie budowania zamieniają się w zwykły CSS.
• „Tailwind czyni strony ciężkimi.” Budowanie zawiera tylko klasy, których używasz, więc CSS trafiający do odwiedzających jest zwykle mały.
• „Długie listy klas oznaczają bałagan w kodzie.” Na początku wyglądają zawile, ale wszystko o wyglądzie elementu jest w jednym miejscu. Powtarzające się wzorce zwykle przenosi się do komponentów, np. jednego komponentu Button.
• „Jeśli używam Tailwinda, nie mogę używać własnego CSS.” Wciąż możesz pisać zwykły CSS, gdy go potrzebujesz.

O co poprosić swojego asystenta AI

• „Zdefiniuj kolory marki i czcionki raz jako tokeny motywu i używaj ich wszędzie zamiast wpisanych na sztywno kolorów.”
• „Zrób, żeby każda karta, przycisk i pole miały ten sam promień zaokrąglenia i odstępy.”
• „Sprawdź układ przy szerokości telefonu i popraw wszystko, co się wylewa lub jest za małe do dotknięcia.”
• „Dodaj tryb ciemny przy użyciu wariantu dark: z Tailwinda i zadbaj, aby kontrast tekstu był czytelny.”
• „Wydziel powtarzające się style przycisków do jednego, wielokrotnie używanego komponentu Button.”
• „Wyjaśnij klasy Tailwinda w tej sekcji zwykłym językiem.”

Tailwind w Mythex

Nowe projekty Mythex domyślnie używają Tailwinda razem z Reactem i TypeScriptem, więc możesz prosić o zmiany wizualne zwykłymi słowami i od razu zobaczyć je w podglądzie na żywo. Jeśli wolisz zobaczyć kod, edytor pokazuje każdą klasę (tylko do odczytu w planie Free, edytowalny w Pro). Jeśli wolisz zwykły CSS lub inną konfigurację, powiedz o tym w pierwszym poleceniu — dokumentacja wyjaśnia, jak dobierany jest stos.

Pytania