dexblog.ro
Acces rapid: Învață AI Învață Programare Specificații Dispozitive Comparații
TW Toate comenzile Tailwind CSS

Directiva @utility în Tailwind CSS v4 în Tailwind CSS

Directive și configurare CSS (Tailwind v3 & v4) Tailwind CSS v4+ Q&A / Distribuie cod

Directivă nativă în Tailwind v4 pentru declararea simplă a utilitarelor personalizate ce suportă automat variante (hover, dark etc.).

Sintaxă 
@utility nume-utilitar { proprietate: valoare; }

Ce este directiva @utility

Înainte de Tailwind v4, pentru a crea o clasă utilitară personalizată care să suporte automat modificatori precum hover: sau dark:, trebuia să scrieți un plugin JavaScript în tailwind.config.js. Cu directiva @utility, declarați utilitarul direct în CSS, iar Tailwind îi generează automat toate variantele interactive și responsive.

Exemplu Concret: Crearea unui utilitar pentru umbre neon
@utility shadow-neon {
  box-shadow: 0 0 15px rgba(59, 130, 246, 0.6);
}

/* Utilizare în HTML: class="shadow-neon hover:shadow-neon" */

Comunitate & Schimb de cunoștințe

Întrebări & Exemple de Cod: Directiva @utility în Tailwind CSS v4

Ai o nelămurire despre utilizarea comenzii Directiva @utility în Tailwind CSS v4 sau ai descoperit un truc / fragment de cod util? Distribuie-l cu ceilalți programatori!

💬

Fii primul care pune o întrebare sau distribuie un fragment de cod / prompt!

Nu au fost adăugate încă întrebări sau exemple de cod pentru această pagină. Dacă ai întâlnit o problemă sau ai un snippet util, adaugă-l mai jos pentru a-i ajuta pe ceilalți.

Comunitate Adaugă o întrebare sau distribuie un cod

Moderare & Siguranță:

Pentru a menține calitatea și securitatea informațiilor, fiecare întrebare sau fragment de cod/prompt este analizat (manual sau prin moderare asistată de AI) înainte de publicare.