Gestion des états Tailwind CSS

Tailwind CSS fournit de puissantes classes d'état (modificateurs d'état) pour contrôler les changements de style des éléments dans différents états d'interaction.

Tailwind CSS fournit une variété de classes d'état (telles que hover:, focus:, active:, etc.) pour aider les développeurs à gérer rapidement les effets d'interaction. En combinant ces classes d'état, vous pouvez facilement implémenter des changements de style pour le survol, le focus, le clic et d'autres états, améliorant ainsi l'expérience utilisateur.

Préfixes des classes d'état :

1. Survol

Survol (hover) l'état fait référence au moment où l'utilisateur survole un élément avec la souris, le style de l'élément change. Utilisezhover:préfixe, vous pouvez facilement obtenir cet effet.

Syntaxe：

hover:{class}

Par exemple,hover:bg-sky-700changera la couleur d'arrière-plan de l'élément lorsque la souris le survole.sky-700。

Utilisation courante：

Lorsque la souris survole, la couleur d'arrière-plan du bouton passe deblue-500àsky-700。

Plus d'exemples：

• hover:text-white: Change la couleur du texte en blanc au survol.
• hover:underline: Ajoute un soulignement au texte au survol.
• hover:border-2 hover:border-gray-500: Ajoute une bordure de 2px au survol et la définit en gris.

2. Concentration

Focus (focus) L'état de focus fait référence au moment où l'utilisateur interagit avec un élément de formulaire (comme un champ de saisie), l'élément obtient le focus. Utilisezfocus:préfixe, vous pouvez contrôler le style de l'élément lorsqu'il a le focus.

Syntaxe：

focus:{class}

Par exemple,focus:ring-2 focus:ring-blue-600affiche un anneau bleu lorsque l'élément obtient le focus.

Lorsque l'utilisateur clique sur le champ de saisie ou le sélectionne, le champ de saisie affichera un anneau bleu en surbrillance.

Plus d'exemples：

• focus:text-black: Change la couleur du texte en noir au focus.
• focus:border-blue-500: Change la couleur de bordure du champ de saisie en bleu au focus.
• focus:ring-4 focus:ring-opacity-50 focus:ring-green-500: Affiche un anneau vert au focus, le met en évidence et définit l'opacité.

3. Active

Active (active) l'état désigne le moment où un élément est cliqué par l'utilisateur, le style de l'élément change. Utilisezactive:préfixe pour contrôler le style lorsqu'on clique.

Syntaxe：

active:{class}

Par exemple,active:bg-green-700change la couleur d'arrière-plan en vert lorsque l'élément est pressé.

Utilisation courante：

Lorsque le bouton est pressé, la couleur d'arrière-plan devient verte.green-700。

Plus d'exemples：

• active:text-gray-600: Change la couleur du texte en gris au clic.
• active:ring-2 active:ring-opacity-50 active:ring-green-500: Ajoute un effet de surbrillance d'anneau vert à l'élément au clic.

4. États combinés

Tailwind CSS prend en charge la combinaison de plusieurs modificateurs d'état, ce qui vous permet de contrôler plus précisément les changements de style dans les états d'interaction. Par exemple, vous pouvez combiner les états hover, focus, active, ainsi que le responsive ou le mode sombre.

Syntaxe：

{state}:{class}

Par exemple,dark:md:hover:bg-fuchsia-600modifie la couleur d'arrière-plan en mode sombre, aux points d'arrêt moyens, et au survol.

En mode normal, au survol, la couleur d'arrière-plan du bouton passe àsky-700, et en mode sombre, la couleur d'arrière-plan passe àfuchsia-600。

Plus d'exemples：

• sm:focus:ring-2: Sur les appareils à petit écran, ajoutez un anneau de surbrillance de 2px lorsque l'élément reçoit le focus.
• lg:active:bg-red-500: Sur les appareils à grand écran, changez la couleur d'arrière-plan en rouge lorsque le bouton est cliqué.

5. Pseudo-classes

Tailwind CSS prend également en charge plusieurs modificateurs de pseudo-classes, ce qui vous permet d'appliquer des styles en fonction de la position ou de l'ordre des éléments dans le document.

Modificateurs de pseudo-classes courants：

• first-child: S'applique au premier élément enfant.
• last-child: S'applique au dernier élément enfant.
• odd-child: S'applique aux éléments enfants aux positions impaires.
• even-child: S'applique aux éléments enfants aux positions paires.

• Le premier élément de la listeItem 1sera en gras, et le dernier élément de la listeItem 3aura une graisse de police plus légère.
• Les éléments impairs et pairs sont distingués par des couleurs d'arrière-plan différentes.

6. États de formulaire

Tailwind CSS fournit des classes d'état de formulaire pour contrôler les changements de style des éléments de formulaire dans différents états, tels que required (required), invalide (invalid) et désactivé (disabled) états.

Classes courantes：

• required: Indique que le champ de saisie est requis.
• invalid: Utilisé pour une saisie de formulaire invalide.
• disabled: Éléments de formulaire désactivés.

• Si le champ de saisie est invalide, une bordure jaune sera affichée.
• Si le champ de saisie est désactivé, la couleur d'arrière-plan deviendra grise.

7. Mise en forme basée sur l'état du parent (modificateur de groupe)

Tailwind CSS vous permet d'affecter le style des éléments enfants lorsque l'élément parent est survolé ou a le focus. En utilisant legroup-hoveretgroup-focusmodificateur, vous pouvez ajuster le style de l'élément enfant lorsque l'état de l'élément parent change.

Syntaxe：

group-{state}:{class}

Par exemple,group-hover:bg-gray-300définira la couleur d'arrière-plan de l'élément enfant en gris lorsque l'élément parent est survolé.

Lorsque le conteneur parent est survolé, la couleur d'arrière-plan du bouton devient grise.

8. Responsive et mode sombre

Tailwind CSS vous permet de combiner les préfixes responsives et les modificateurs de mode sombre pour appliquer différents styles à différentes tailles d'écran et différents modes.

Syntaxe：

• Préfixes responsives :sm:, md:, lg:, xl:, 2xl:
• Préfixe du mode sombre :dark:

Sur les petits écrans, la couleur d'arrière-plan change au survolblue-700; sur les écrans moyens, un anneau bleu en surbrillance est ajouté au focus, et en mode sombre, la couleur d'arrière-plan devient grise.

9. Configuration des variantes

Danstailwind.config.jsDans le fichier, vous pouvez utiliser lavariantssection pour configurer quelles variantes d'état sont activées.

Dans cette configuration,backgroundColorajoute l'activeetgroup-hoverétat, ettextColorajoute l'focus-visibleetdisabledl'état.

10. Premier, dernier, impair et pair

Lorsqu'un élément est le premier enfant ou le dernier élément, utilisezfirstetlastmodificateur pour définir le style de l'élément :

Effet :

• La couleur du texte du premier élément de liste devient rouge text-red-500.
• La police du dernier élément de liste devient gras font-bold.

oddModificateur : est utilisé pour sélectionner tous les éléments enfants de position impaire dans le conteneur parent (basé sur un index commençant à 1).

Effet :La couleur d'arrière-plan des éléments 1 et 3 de la liste devient gris clair bg-gray-100.

evenModificateur : even est utilisé pour sélectionner tous les éléments enfants en position paire dans le conteneur parent (basé sur un index commençant à 1).

Effet :La couleur d'arrière-plan des éléments 2 et 4 de la liste devient un gris plus foncé bg-gray-200.

Référence des modificateurs