styling

CSS and Tailwind styling guidelines. Use when writing styles, creating UI components, reviewing CSS/Tailwind code, or deciding on wrapper element structure.

1. Aktywuj skill w kontekście, gdy pracujesz nad stylowaniem komponentów UI w projekcie opartym na Tailwind CSS. Skill automatycznie zasugeruje się, gdy napiszesz "styluj to", "napraw CSS", "dodaj klasy" lub gdy będziesz tworzyć komponenty z utility-first podejściem.

2. Przed dodaniem nowego elementu opakowującego (wrapper div) sprawdź, czy klasy stylujące można zastosować bezpośrednio do istniejącego elementu semantycznego (main, section, article, div z rolą). Jeśli efekt wizualny będzie identyczny, pomiń wrapper — zmniejszy to złożoność HTML.

3. Przy łączeniu klas warunkowych używaj funkcji cn() z $lib/utils zamiast ręcznego konkatenowania stringów. Funkcja ta obsługuje konflikty klas i czyni kod bardziej czytelnym.

4. Dla stanów disabled preferuj atrybuty HTML disabled zamiast strażników JavaScript. Dodaj warianty Tailwind :disabled do elementów interaktywnych, aby uniknąć dodatkowej logiki kliknięcia w komponentach.

5. Stosuj konwencję background/foreground do definiowania kolorów oraz zmienne CSS do zapewnienia spójności motywu w całym projekcie. Unikaj hardkodowanych wartości kolorów — zawsze odwołuj się do zmiennych systemowych.

6. Gdy tworzysz warianty komponentów (różne rozmiary, stany, kolory), rozważ użycie biblioteki tailwind-variants zamiast ręcznego zarządzania klasami wariantów — uprości to utrzymanie i skalowanie.