Safelist

Tailwind CSS 🟡 Mid

Definition

Liste de classes a toujours inclure dans le build, meme si elles ne sont pas detectees dans le code source. Utile pour les classes generees dynamiquement.

Analogie

Une liste VIP : ces invites entrent toujours, peu importe s'ils sont sur la liste principale.

Exemple de code

// tailwind.config.js
module.exports = {
  safelist: [
    'bg-red-500',
    'bg-green-500',
    { pattern: /bg-(red|green|blue)-(100|500)/ }
  ]
}

Cas d'usage

Garantir que des classes construites dynamiquement (bg-${color}-500) sont presentes en production.

Anti-pattern

Mettre trop de classes en safelist au lieu de refactorer le code pour utiliser des classes completes.
#styling#tailwind