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

Construirea Sistemelor de Componente Reutilizabile cu Tailwind CSS și CVA (Class Variance Authority) în Tailwind CSS

Componente & Design Systems Tailwind CSS Q&A / Distribuie cod

Ghid enterprise pentru Design Systems cu Tailwind CSS: gestionarea variantelor vizuale (primary, secondary, danger) și a dimensiunilor cu biblioteca CVA (Class Variance Authority) și tailwind-merge.

Sintaxă 
const buttonVariants = cva('base-classes', { variants: { intent: { ... } } });

Când aplicațiile cresc, scrierea repetată a zecilor de clase utilitare pe fiecare buton sau input duce la duplicare. Soluția profesională adoptată de biblioteci celebre precum shadcn/ui este utilizarea CVA (Class Variance Authority) combinată cu tailwind-merge și clsx.

Definirea unui Buton Tipizat cu Variante Multiple
import { cva, type VariantProps } from 'class-variance-authority';
import { twMerge } from 'tailwind-merge';

const button = cva(
  'inline-flex items-center justify-center font-medium rounded-lg transition focus:outline-none focus:ring-2',
  {
    variants: {
      intent: {
        primary: 'bg-indigo-600 text-white hover:bg-indigo-700 focus:ring-indigo-500',
        secondary: 'bg-slate-100 text-slate-900 hover:bg-slate-200 focus:ring-slate-400',
        danger: 'bg-rose-600 text-white hover:bg-rose-700 focus:ring-rose-500'
      },
      size: {
        sm: 'text-xs px-2.5 py-1.5',
        md: 'text-sm px-4 py-2',
        lg: 'text-base px-6 py-3'
      }
    },
    defaultVariants: {
      intent: 'primary',
      size: 'md'
    }
  }
);
Comunitate & Schimb de cunoștințe

Întrebări & Exemple de Cod: Construirea Sistemelor de Componente Reutilizabile cu Tailwind CSS și CVA (Class Variance Authority)

Ai o nelămurire despre utilizarea comenzii Construirea Sistemelor de Componente Reutilizabile cu Tailwind CSS și CVA (Class Variance Authority) 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.