Comment utiliser correctement les littéraux de modèles pour la manipulation dynamique de classes dans Tailwind CSS ?

Comment utiliser la manipulation dynamique de classe dans Tailwind CSS avec des littéraux de modèle ?

Dans Tailwind CSS, l'affectation de classe conditionnelle permet aux développeurs de mettre à jour dynamiquement les noms de classe en fonction de conditions spécifiques. Cependant, il n'est pas rare de rencontrer des problèmes lors de la tentative d'utilisation de cette fonctionnalité.

Dans un de ces cas, un utilisateur a tenté de changer de classe à l'aide du code suivant :

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

Cependant, cet extrait de code n'a pas fonctionné comme prévu. L'approche correcte pour ce scénario est la suivante :

<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 la syntaxe suivante :

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

Il est crucial d'éviter d'utiliser la concaténation de chaînes pour la création de classe, car illustré ci-dessous :

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

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

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

Tailwind conservera les classes qui apparaissent dans leur intégralité dans votre modèle lors de la version de production.

De plus, d'autres options sont à votre disposition, telles que :

• Utiliser des bibliothèques comme les noms de classe ou clsx
• Utilisation de solutions spécifiques à Tailwind comme twin.macro, twind ou xwind

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!