T
tailwindcss-development
Stylizuj aplikacje za pomocą Tailwind CSS v4 — automatyczne aktywowanie przy zmianach UI
Instalacja
Wybierz klienta i sklonuj repozytorium do odpowiedniego katalogu skilli.
Instalacja
O skillu
Umiejętność Claude'a do stylizacji komponentów i stron przy użyciu Tailwind CSS v4. Aktywuje się automatycznie, gdy dodajesz style, przeprojektujesz komponenty, pracujesz z gradientami, spacingiem, layoutem, flexem, gridem, responsive designem, dark mode'em, kolorami, typografią lub obramowaniami. Obsługuje CSS-first konfigurację v4, pomaga w debugowaniu problemów z layoutem i proponuje ekstrakcję powtarzających się wzorców w komponenty.
Jak używać
- Zainstaluj umiejętność w swoim projekcie Claude'a, umieszczając katalog tailwindcss-development w folderze .claude/skills.
- Gdy będziesz pracować nad stylizacją — dodawać style do komponentów, zmieniać layout, implementować dark mode lub responsive design — umiejętność automatycznie się aktywuje.
- Opisz zmianę UI, którą chcesz wprowadzić (np. "Zrób ten przycisk większy" lub "Dodaj gradient do hero section"), a Claude zaproponuje klasy Tailwind CSS v4 zgodne z konwencjami Twojego projektu.
- Jeśli zauważysz powtarzające się wzorce stylów, poproś Claude'a o ekstrakcję ich do komponentów (Blade, JSX, Vue) — umiejętność pomoże zachować spójność z projektem.
- W konfiguracji Tailwind v4 używaj dyrektywy @theme w pliku CSS zamiast tailwind.config.js; importuj Tailwind za pomocą @import "tailwindcss" zamiast starych dyrektyw @tailwind.
- Jeśli napotkasz problemy z spacingiem, layoutem lub responsive designem, Claude może je debugować — zawsze sprawdza istniejące konwencje projektu przed wprowadzeniem nowych wzorców.