Comment gérer dynamiquement les classes CSS Tailwind avec des littéraux de modèles ?

Changements de classe dynamiques dans TailwindCSS avec des littéraux de modèle

Dans TailwindCSS, les littéraux de modèle fournissent un moyen pratique de modifier dynamiquement les classes en fonction de l'état ou des accessoires . Cependant, des erreurs de syntaxe peuvent survenir en cas d'utilisation incorrecte.

Un problème courant consiste à tenter d'ajouter ou de supprimer dynamiquement une classe avec une règle de style, telle que :

const [click, setClick] = useState(false);

const closeNav = () => {
  setClick(!click);
};

const openNav = () => {
  setClick(!click);
};

<div
  className=" absolute inset-0 ${click ? translate-x-0 : -translate-x-full }
        transform  z-400 h-screen w-1/4 bg-blue-300 "
>
  <XIcon onClick={closeNav} className=" absolute h-8 w-8 right-0 " />
</div>;

Pour résoudre ce problème, joignez le nom de la classe entre les backticks (`) :

<div className={`absolute inset-0 ${click ? 'translate-x-0' : '-translate-x-full'} transform z-400 h-screen w-1/4 bg-blue-300`}>
</div>

Vous pouvez également utiliser ce qui suit syntaxe :

<div className={'absolute inset-0 ' + (click ? 'translate-x-0' : '-translate-x-full') + ' transform z-400 h-screen w-1/4 bg-blue-300'}>
</div>

Évitez d'utiliser la concaténation de chaînes, car TailwindCSS peut supprimer les classes inutilisées dans la version de production :

<div className={`text-${error ? 'red' : 'green'}-600`}>
</div>

À la place, sélectionnez le nom complet de la classe :

<div className={`${error ? 'text-red-600' : 'text-green-600'}`}>
</div>

ou :

<div className={error ? 'text-red-600' : 'text-green-600'}>
</div>

Les options supplémentaires incluent les noms de classe et twin.macro.

Voici quelques ressources utiles :

• React.js appliquant conditionnellement les noms de classe
• Comment ajouter dynamiquement une classe aux noms de classe manuels ?
• Manière correcte de gérer le style conditionnel dans React
• Intégration d'expressions dans JSX
• Modèles littéraux - MDN
• Optimisation pour la production - Écriture de HTML purgeable - Tailwind CSS

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!