Nelle parole della skill
Costruisce design system pronti per la produzione su Tailwind CSS v4 (2024+). Illustra la configurazione CSS-first, dove @theme in app.css sostituisce tailwind.config.ts, i token di colore semantici scritti in OKLCH, i token di radius e animazione i cui keyframes risiedono dentro @theme, la dark mode basata su classi dichiarata con @custom-variant e gli stili base applicati in @layer base.
Definisce inoltre la gerarchia dei token dal brand al semantico ai token di componente, un'architettura dei componenti che attraversa stili base, varianti, dimensioni, stati e override, oltre a pattern di componenti responsivi e accessibili. Pensata per team che creano una libreria di componenti, standardizzano i pattern UI in un codebase o migrano da Tailwind v3.
Come funziona
- 01Importare Tailwind nel Punto di Ingresso CSS
app.css inizia con un singolo @import invece delle direttive v3 @tailwind base/components/utilities.
- 02Dichiarare il Set di Token Semantici Sotto @theme
Background, foreground, primary, secondary, muted, accent, destructive, border, ring e card sono tutti dichiarati come token di colore in OKLCH.
- 03Aggiungere Token di Animazione con i Rispettivi Keyframes
--animate-fade-in e --animate-fade-out durano 0.2s, --animate-slide-in e --animate-slide-out 0.3s, ciascuno con un blocco @keyframes corrispondente dichiarato dentro @theme.
- 04Sovrascrivere gli Stessi Nomi di Token Sotto .dark
Il blocco dark riassegna ogni token invece di introdurne di nuovi, rispecchiando background, foreground, primary, secondary, muted, accent, destructive, border, ring, card e ring-offset.
- 05Impostare i Valori Predefiniti del Base Layer
@layer base applica border-border a ogni elemento e assegna al body lo sfondo tematizzato, il colore del foreground e l'antialiasing.
- 06Costruire i Componenti nell'Ordine dei Layer
I componenti attraversano stili base, varianti, dimensioni, stati e override in questa sequenza.