tailwind-patterns

Tailwind CSS v4 to narzędzie do szybkiego tworzenia interfejsów użytkownika z wykorzystaniem utility-first CSS. Skill zawiera gotowe wzorce projektowe oparte na architekturze tokenów designu, natywnych zapytaniach kontenerowych i konfiguracji CSS-first. Zamiast pliku JavaScript definiujesz temat bezpośrednio w CSS za pomocą dyrektywy @theme, co przyspiesza pracę dzięki silnikowi Oxide. Dowiedz się, jak przejść z v3 na v4, konfigurować kolory semantyczne, spacing i typografię oraz stosować nowoczesne wzorce responsywne.

1. Zainstaluj skill tailwind-patterns w swoim projekcie Claude/Codex. Skill zawiera dostęp do narzędzi Read, Write, Edit, Glob i Grep, które umożliwią ci przeglądanie i modyfikowanie plików konfiguracyjnych.

2. Utwórz lub otwórz plik CSS zawierający konfigurację Tailwind v4. W pliku zdefiniuj blok @theme, w którym umieścisz zmienne CSS dla kolorów, spacing i typografii. Użyj semantycznych nazw, takich jak --color-primary, --color-surface, --spacing-md, aby ułatwić zarządzanie designem.

3. Skonfiguruj kolory za pomocą notacji oklch, która oferuje lepszą kontrolę nad odcieniami i nasyceniem. Przykładowo: --color-primary: oklch(0.7 0.15 250) dla koloru podstawowego. Dodaj również zmienne dla ciemnego motywu, takie jak --color-surface-dark.

4. Zdefiniuj skalę spacing (odstępy) i czcionki w tym samym bloku @theme. Ustandaryzuj wartości jak --spacing-xs, --spacing-sm, --spacing-md, --spacing-lg oraz przypisz czcionki systemowe do --font-sans i --font-mono.

5. Zastosuj zapytania kontenerowe zamiast breakpointów viewport, gdy chcesz, aby komponenty reagowały na szerokość elementu nadrzędnego. Oznacz element rodzicielski dyrektywą @container, a następnie używaj klas takich jak @container w komponentach potomnych.

6. Przejrzyj tabelę zmian między v3 a v4, aby zrozumieć różnice: konfiguracja CSS zamiast JavaScript, silnik Oxide zamiast PostCSS, natywne zagnieżdżanie CSS. Unikaj dyrektywy @apply, która jest wciąż wspierana, ale niezalecana w v4.