Theme Extend

Tailwind CSS 🟡 Mid

Definition

Section extend dans la config qui ajoute de nouvelles valeurs au theme sans ecraser les valeurs par defaut de Tailwind.

Analogie

Ajouter des pages a un dictionnaire sans arracher les existantes.

Exemple de code

// tailwind.config.js
theme: {
  extend: {
    spacing: { '128': '32rem' },
    colors: { primary: { 500: '#6366f1' } },
    fontFamily: { display: ['Inter', 'sans-serif'] },
  }
}

Cas d'usage

Ajouter des couleurs de marque, des tailles custom tout en conservant les utilitaires existants.

Anti-pattern

Placer les customisations dans theme au lieu de theme.extend, perdant toutes les valeurs par defaut.

Termes lies

#styling#interview#tailwind