Utilisation de littéraux de modèle pour la modification dynamique des classes dans tailwindcss

Lorsque vous essayez de modifier dynamiquement les classes en utilisant le 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 des 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`}

Alternativement, vous pouvez utiliser la concaténation de chaîne pour définir votre 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 des chaînes pour les noms de classe individuels, par exemple? 'red': 'vert'} - 600`}

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

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

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

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

[react.js Application conditionnellement des noms de classe] (https://reactjs.org/docs/dom-elements.httml#conditional-class-mames-and-styles)

[comment ajouter dynamiquement une classe à la classe manuelle) Noms?] (Https://stackoverflow.com/questions/24217807/how-to-dynamical-add-a-class-to-manual-class-mates) [Correction de la manière de gérer le style conditionnel dans React] (https://stackoverflow.com/questions/40787489/correct-way-to-handle-conditional-styling-in-react)

[Embedding Expressions In dans Jsx] (https://reactjs.org/docs/jsx-in-epth.html#embedding-expressions-in-jsx)
[template littérales - Mdn] (https://developer.mozilla.org/en-us/docs/web/javascript/reference/template_literals)
[Optimiser pour la production - Écriture purgeable html - tailwind CSS] (https://tailwindcss.com/docs/optimising-for-production#writing-purgableable-html)