Component Extraction

Tailwind CSS 🟡 Mid

Definition

Strategie de factorisation des styles repetitifs en composants (React, Vue) ou en classes @apply. Le composant JS/TS est prefere a @apply.

Analogie

Quand tu repetes la meme recette, tu l'ecris sur une fiche plutot que de la reciter a chaque fois.

Exemple de code

// Prefere: composant React
const Button = ({ children }) => (
  <button className="px-4 py-2 bg-blue-500
    text-white rounded hover:bg-blue-600">
    {children}
  </button>
);

Cas d'usage

Eviter la duplication de longues chaines de classes dans les templates/JSX.

Anti-pattern

Extraire trop tot : attendre d'avoir 3+ repetitions avant de creer un composant.

Termes lies

#styling#interview#tailwind