tailwind-4
Wzorce i dobre praktyki Tailwind CSS 4 — pisz style bez błędów
Instalacja
Wybierz klienta i sklonuj repozytorium do odpowiedniego katalogu skilli.
Instalacja
O skillu
Skill Claude'a, który uczy Cię pisać style w Tailwind CSS 4 zgodnie z najlepszymi praktykami. Pokazuje, kiedy użyć cn() do warunkowych klas, kiedy zastosować style inline, a kiedy pozostać przy zwykłych className. Eliminuje typowe błędy: var() w className, kolory heksadecymalne zamiast klas Tailwind, niepotrzebne opakowywanie statycznych klas. Zawiera drzewo decyzyjne, które prowadzi Cię krok po kroku od problemu do rozwiązania.
Jak używać
Zainstaluj skill w swoim środowisku Claude'a, wskazując repozytorium Gentleman-Programming. Skill aktywuje się automatycznie, gdy pracujesz nad stylowaniem komponentów w Tailwind CSS 4.
Gdy piszesz style, pozwól Claude'owi analizować Twój kod za pomocą drzewa decyzyjnego: czy klasa Tailwind już istnieje? Czy wartość jest dynamiczna? Czy potrzebujesz warunkowych stylów? Skill będzie sugerować odpowiednią ścieżkę.
Dla klas warunkowych użyj cn() — funkcji, która łączy clsx i tailwind-merge. Przykład: cn("base-class", isActive && "active-class"). Skill upewni się, że konflikty klas są rozwiązane prawidłowo.
Nigdy nie umieszczaj var() lub kolorów heksadecymalnych w className. Zamiast className="bg-[var(--color)]" pisz className="bg-primary". Skill będzie Cię korygować, gdy spróbujesz tego antywzorca.
Dla wartości dynamicznych, które Tailwind nie może wyrazić klasą, użyj style prop: style={{ width:
${x}%}}. Skill rozróżni, kiedy className wystarczy, a kiedy potrzebujesz inline style'u.Przejrzyj przykłady w README — zawierają pełne decyzje dla różnych scenariuszy (statyczne klasy, warunkowe style, konflikty). Skill będzie odwoływać się do tych wzorców, gdy analizuje Twój kod.