Maison > interface Web > js tutoriel > Comment utiliser les noms de classe dynamiques avec Tailwind CSS ?

Comment utiliser les noms de classe dynamiques avec Tailwind CSS ?

Linda Hamilton
Libérer: 2024-11-28 10:01:11
original
887 Les gens l'ont consulté

How to Use Dynamic Class Names with Tailwind CSS?

Noms de classe dynamiques et CSS Tailwind

La construction dynamique de noms de classe en JavaScript est une pratique courante, mais lorsqu'il s'agit de CSS Tailwind, cela pose un défi. Tailwind CSS repose sur l'extraction de noms de classe complets et ininterrompus à partir de vos fichiers sources.

Selon la documentation de Tailwind, la construction dynamique de noms de classe à l'aide de l'interpolation ou de la concaténation de chaînes empêchera Tailwind de trouver les classes et donc de ne pas générer le CSS correspondant. Par exemple :

<div class="text-{{ error ? 'red' : 'green' }}-600"></div>
Copier après la connexion

Dans cet exemple, les chaînes text-red-600 et text-green-600 n'existent pas en tant que noms de classe complets, donc Tailwind les ignore.

Solutions :

Pour résoudre ce problème, il existe plusieurs solutions :

  • Utiliser les noms de classe complets :
    Assurez-vous que tous les noms de classe que vous utilisez existent sous leur forme complète.
<div class="{{ error ? 'text-red-600' : 'text-green-600' }}"></div>
Copier après la connexion
  • Définir les noms de classe dans les variables :
    Définir les noms de classe dans les variables qui peuvent être directement référencé.
const colors = {
  // ...
  secondary: darkTheme ? "bg-[#FFFFFF]" : "bg-[#FFFFFF]",
  // ...
};
Copier après la connexion
<p className={`${colors.secondary} text-text-white`}></p>
Copier après la connexion
  • Utiliser l'attribut de style :
<p className="text-text-white">
Copier après la connexion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal