Tailwind CSS axé sur les utilitaires

L'approche Utility-First de Tailwind CSS est une approche de conception axée sur la pratique qui permet aux développeurs d'appliquer directement des classes de style prédéfinies aux éléments HTML sans écrire de code CSS traditionnel.

La philosophie centrale de Tailwind CSS est Utility-First. Ce concept de conception signifie que vous pouvez obtenir un style complet en combinant des classes CSS à usage unique plutôt qu'en vous appuyant sur des styles personnalisés complexes.

Tailwind CSS fournit un grand nombre de classes utilitaires, chacune effectuant une tâche de style simple, par exemple,text-centersert à centrer le texte,bg-blue-500sert à définir la couleur d'arrière-plan,p-4sert à définir le padding, etc.

Classes utilitaires courantes :

CatégorieExemples de classes utilitairesDescription
Typographietext-center, text-lg, font-boldContrôle l'alignement du texte, la taille de police, la graisse de police, etc.
Arrière-planbg-blue-500, bg-opacity-50Définit la couleur d'arrière-plan, l'image d'arrière-plan et l'opacité d'un élément.
Espacementp-4, m-2, mt-8Contrôle le padding et la marge de l'élément.
Layoutflex, grid, blockDéfinit le type d'affichage et la méthode de mise en page d'un élément.
Dimensionnementw-32, h-48Définit la largeur et la hauteur d'un élément.
Borduresborder, border-2, roundedDéfinit la bordure de l'élément, la largeur de bordure et le rayon de bordure.
Ombresshadow, shadow-lgContrôle l'effet d'ombre d'un élément.
Opacitéopacity-50, opacity-100Définit l'opacité d'un élément.
Responsivesm:text-lg, md:bg-blue-300Contrôle les changements de style selon différentes tailles d'écran.
Statehover:bg-blue-700, focus:ring-4Définit le style d'un élément dans différents états d'interaction (tels que hover, focus, active).

Avantages des classes utilitaires

  • Concision et efficacité: Chaque classe utilitaire gère une seule petite opération de style. Les développeurs peuvent combiner différentes classes selon les besoins pour réaliser rapidement la mise en page et le style.
  • Flexibilité: Grâce à la combinaison de classes, presque n'importe quel style peut être obtenu sans écrire de code CSS complexe.
  • Prise en charge du responsive: Tailwind fournit des classes responsive intégrées, ce qui rend très pratique l'ajustement de la mise en page et des styles en fonction de la taille de l'écran.
  • Éviter les conflits de nommage: Étant donné que chaque classe a un objectif clair et indépendant, l'utilisation de classes utilitaires évite les problèmes de conflits de nommage et de remplacements de style rencontrés dans le CSS traditionnel.

Applications pratiques des classes utilitaires

1. Classes utilitaires liées au texte

  • text-center: Définit l'alignement du texte au centre.
  • text-lg: Définit la taille de police àlg(police de grande taille).
  • font-bold: Met la police du texte en gras.
  • text-red-500: Définit la couleur du texte en rouge (500est une nuance spécifique de rouge).

Exemple

<p class="text-center text-lg font-bold text-red-500">Bonjour, Tailwind!</p>

2. Classes utilitaires liées à l'arrière-plan

  • bg-blue-500: Définit la couleur d'arrière-plan de l'élément en bleu.
  • bg-opacity-50: Définit l'opacité de l'arrière-plan à 50%.
  • bg-cover: Ajuste la taille de l'image d'arrière-plan pour couvrir entièrement l'élément.

Exemple

<div class="bg-blue-500 bg-opacity-50 p-4">
  <h1 class="text-white">Bienvenue dans Tailwind</h1>
</div>

3. Classes utilitaires liées à l'espacement

  • p-4: Définit le padding de l'élément à1rem。
  • m-8: Définit la marge de l'élément à2rem。
  • mt-4: Définit la marge supérieure de l'élément à1rem。

Exemple

<div class="m-8 p-4 mt-4">
  <p>Cette boîte possède un padding et une marge.</p>
</div>

4. Classes utilitaires liées à la mise en page

  • flex: Définit le mode de mise en page de l'élément sur flexbox.
  • grid: Définit le mode de mise en page de l'élément sur CSS Grid.
  • items-center: Centre verticalement les éléments enfants à l'intérieur d'un conteneur flexbox.
  • justify-between: Dans un conteneur flexbox, l'espace entre les éléments enfants est réparti uniformément.

Exemple

<div class="flex items-center justify-between">
  <div class="bg-blue-500 text-white p-4">Élément 1</div>
  <div class="bg-blue-500 text-white p-4">Élément 2</div>
</div>

5. Classes utilitaires relatives aux bordures et au rayon de bordure

  • border: Ajoute une bordure.
  • border-2: Définit la largeur de la bordure à2px。
  • rounded-lg: Définit le rayon de bordure de l'élément à0.5rem。

Exemple

<div class="border border-2 rounded-lg p-4">
  <p>Cette boîte a une bordure et des coins arrondis.</p>
</div>

6. Classes utilitaires relatives aux ombres

  • shadow: Ajoute une ombre par défaut à l'élément.
  • shadow-lg: Ajoute une ombre plus grande.
  • shadow-none: Supprime l'ombre.

Exemple

<div class="shadow-lg p-6">
  <p>Cette boîte a une grande ombre.</p>
</div>

7. Classes utilitaires responsives

Tailwind fournit des classes utilitaires responsives qui peuvent appliquer différents styles selon différentes tailles d'écran. Les tailles d'écran courantes incluentsm(petits écrans),md(écrans moyens),lg(grands écrans),xl(très grands écrans).

  • sm:: Ne prend effet que lorsque la largeur d'écran est supérieure ou égale à 640px.
  • md:: Ne prend effet que lorsque la largeur d'écran est supérieure ou égale à 768px.
  • lg:: Ne prend effet que lorsque la largeur de l'écran est supérieure ou égale à 1024px.
  • xl:: Ne prend effet que lorsque la largeur de l'écran est supérieure ou égale à 1280px.

Exemple

<div class="bg-blue-500 sm:bg-green-500 lg:bg-red-500 p-4">
  <p>Cette couleur d'arrière-plan change en fonction de la taille de l'écran.</p>
</div>

8. Classes utilitaires d'état

Tailwind prend en charge les classes utilitaires pour les états d'interaction, telles quehover:, focus:, active:etc.

  • hover:bg-blue-700: Lorsque l'élément est survolé par la souris, la couleur d'arrière-plan devient bleue.
  • focus:outline-none: Lorsque l'élément reçoit le focus, supprime le contour de bordure par défaut.
  • active:bg-red-500: Lorsque l'élément est à l'état actif, la couleur d'arrière-plan devient rouge.

Exemple

<button class="hover:bg-blue-700 focus:outline-none active:bg-red-500">
  Survolez-moi ou donnez-moi le focus !
</button>

Exemple

En utilisant l'approche traditionnelle, définissez des styles CSS personnalisés :

Exemple

<div class="chat-notification">
  <div class="chat-notification-logo-wrapper">
    <img class="chat-notification-logo" src="/img/logo.svg" alt="Logo ChitChat">
  </div>
  <div class="chat-notification-content">
    <h4 class="chat-notification-title">ChitChat</h4>
    <p class="chat-notification-message">Vous avez un nouveau message !</p>
  </div>
</div>

<style>
  .chat-notification {
    display: flex;
    align-items: center;
    max-width: 24rem;
    margin: 0 auto;
    padding: 1.5rem;
    border-radius: 0.5rem;
    background-color: #fff;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  }
  .chat-notification-logo-wrapper {
    flex-shrink: 0;
  }
  .chat-notification-logo {
    height: 3rem;
    width: 3rem;
  }
  .chat-notification-content {
    margin-left: 1.5rem;
  }
  .chat-notification-title {
    color: #1a202c;
    font-size: 1.25rem;
    line-height: 1.25;
  }
  .chat-notification-message {
    color: #718096;
    font-size: 1rem;
    line-height: 1.5;
  }
</style>

Essayez-le vous-même »

Ensuite, regardons comment utiliser Tailwind pour styliser directement les éléments en HTML avec des classes préexistantes, sans écrire de CSS :

Exemple

<div class="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-lg flex items-center gap-x-4">
  <div class="shrink-0">
    <img class="size-12" src="/img/logo.svg" alt="Logo ChitChat">
  </div>
  <div>
    <div class="text-xl font-medium text-black">ChitChat</div>
    <p class="text-slate-500">Vous avez un nouveau message !</p>
  </div>
</div>

Essayez-le vous-même »

Voici une analyse de chaque nom de classe dans le code :

Conteneur externe :<div class="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-lg flex items-center gap-x-4">

Nom de classe Objectif
p-6 Définit le padding de l'élément à 1.5rem (24px).
max-w-sm Définit la largeur maximale de l'élément àsm, ce qui correspond à environ 24rem (384px).
mx-auto Définit la marge horizontale àauto, ce qui centre l'élément horizontalement.
bg-white Définit la couleur d'arrière-plan de l'élément sur blanc.
rounded-xl Définit le rayon de bordure àxl, c'est-à-dire 0.75rem (12px).
shadow-lg Ajoute un effet d'ombre plus important pour donner l'impression que le conteneur flotte.
flex Définit le mode de mise en page de l'élément àflexbox, ce qui facilite l'agencement des éléments enfants en lignes.
items-center Centre verticalement les éléments enfants.
gap-x-4 Définit l'espacement horizontal entre les éléments enfants dans le conteneur flex à 1rem (16px).

Conteneur de gauche :<div class="shrink-0">

Nom de classe Objectif
shrink-0 Empêche l'élément de rétrécir, garantissant que sa taille n'est pas affectée par les autres éléments du conteneur flex.

Image :<img class="size-12" src="../img/logo.svg.html" alt="ChitChat Logo">

Nom de classe Objectif
size-12 Ce n'est pas une classe Tailwind native. Il peut s'agir d'une classe personnalisée utilisée pour définir la taille de l'image.

Conteneur de contenu de droite :<div>

Aucun nom de classe, contient du contenu textuel comme élément enfant.

Texte du titre :<div class="text-xl font-medium text-black">ChitChat</div>

Nom de classe Objectif
text-xl Définit la taille de police àxl, soit 1.25rem (20px).
font-medium Définit la graisse de police àmedium, i.e., 500.
text-black Définit la couleur du texte en noir.

Texte de description :<p class="text-slate-500">You have a new message!</p>

Nom de classe Objectif
text-slate-500 Définit la couleur du texte àslate-500, c'est-à-dire gris ardoise (teinte moyenne).
Autres extensions