🌈Générateur de couleurs Tailwind

Ce que signifient 50–950 dans Tailwind

Les couleurs de Tailwind CSS sont représentées par 11 chiffres où 50 est le plus clair et 950 le plus foncé, avec 500 comme couleur de base. Les chiffres sont utilisés à la fin des noms de classe comme dans « bg-primary-500 » ou « text-primary-700 ».

• Niveaux 50–300：Les niveaux 50–300 sont des couleurs claires souvent utilisées pour les couleurs d'arrière-plan ou les remplissages légers, qui restent lisibles même avec du texte foncé dessus.
• Niveaux 600–950：Les niveaux 600–950 sont des couleurs foncées souvent utilisées pour les états de survol des boutons ou les couleurs de texte des titres, qui restent clairement visibles sur les arrière-plans blancs.

Différences dans les méthodes de définition des couleurs entre v3 et v4

Dans Tailwind CSS v3, les couleurs sont définies en JavaScript dans tailwind.config.js, tandis que dans v4, elles sont définies comme variables CSS dans @theme d'un fichier CSS. Avec l'une ou l'autre méthode, les couleurs définies peuvent être utilisées avec le même nom de classe comme « bg-primary-500 ».

• Méthode v3：La méthode v3 consiste à entrer des noms de couleur et des niveaux imbriqués comme « primary: { 500: '#3B82F6' } » dans theme.extend.colors.
• Méthode v4：La méthode v4 consiste à écrire des noms de variables avec des noms de couleur et des niveaux séparés par des tirets comme « --color-primary-500: #3B82F6; » dans @theme.