Comment utiliser correctement les littéraux de modèle pour la modification dynamique de classe dans Tailwind CSS ?

Utilisation de littéraux de modèle pour la modification dynamique de classe dans TailwindCSS

Lorsque vous essayez de modifier dynamiquement des classes à l'aide du code suivant :

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

vous pouvez rencontrer un problème. La bonne façon d'y parvenir en utilisant les littéraux de modèle est :

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

Vous pouvez également utiliser la concaténation de chaînes pour définir votre nom de classe :

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

Il est crucial d'éviter la concaténation de chaînes pour une classe individuelle. noms, par exemple :

className={`text-${error ? 'red' : 'green'}-600`}

Au lieu de cela, sélectionnez les noms de classe complets comme suit :

className={`${error ? 'text-red-600' : 'text-green-600'}`}

className={error ? 'text-red-600' : 'text-green-600'}

Tailwind conservera les noms de classe complets dans les versions de production.

Envisagez d'utiliser des bibliothèques comme les noms de classe, clsx ou des solutions spécifiques à Tailwind comme twin.macro, twind, ou xwind pour plus de flexibilité.

Supplémentaire Ressources :

• [React.js application conditionnelle des noms de classe](https://reactjs.org/docs/dom-elements.html#conditional-class-names-and-styles)
• [Comment ajouter dynamiquement une classe à une classe manuelle Noms ?](https://stackoverflow.com/questions/24217807/how-to-dynamically-add-a-class-to-manual-class-names)
• [Manière correcte de gérer le style conditionnel dans React](https://stackoverflow.com/questions/40787489/correct-way-to-handle-conditional-styling-in-react)
• [Intégration d'expressions dans JSX](https://reactjs. org/docs/jsx-in-owned.html#embedding-expressions-in-jsx)
• [Modèle Littéraux - MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals)
• [Optimisation pour la production - Écriture de code HTML purgeable - Tailwind CSS](https : //tailwindcss.com/docs/optimizing-for-production#writing-purgeable-html)

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!