tailwind-4
Tailwind CSS 4 patterns and best practices. Trigger: When styling with Tailwind - cn(), theme variables, no var() in className.
Installation
Pick a client and clone the repository into its skills directory.
Installation
About this skill
Tailwind CSS 4 patterns and best practices. Trigger: When styling with Tailwind - cn(), theme variables, no var() in className.
How to use
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.