Content Paths

Tailwind CSS 🟡 Mid

Definition

Configuration content qui indique a Tailwind ou scanner les classes utilisees. Essentiel pour le tree-shaking : seules les classes trouvees sont generees en prod.

Analogie

Dire au facteur quelles boites aux lettres existent pour qu'il ne distribue pas de courrier fantome.

Exemple de code

// tailwind.config.js
module.exports = {
  content: [
    './src/**/*.{js,ts,jsx,tsx}',
    './components/**/*.vue',
    './node_modules/flowbite/**/*.js'
  ]
}

Cas d'usage

Configurer correctement le scanning pour eviter que des classes soient manquantes en production.

Anti-pattern

Oublier d'inclure les fichiers d'une librairie tierce, causant des styles manquants en prod.
#styling#interview#tailwind