Tailwind CSS, un framework qui a la classe !

Introduction à Tailwind CSS

Le framework CSS Tailwind vous permet de créer toutes sortes d’interfaces et de composants sans avoir à rédiger une seule ligne de CSS. Et le meilleur dans tout ça : une fois compilé, votre fichier CSS ne contient que les classes CSS Tailwind qui ont été utilisées dans votre projet, rendant ainsi votre site web léger et rapide !

Avec Tailwind CSS, vous n’avez pas besoin de créer de noms de classes CSS dont vous aurez certainement oublié l’utilité lorsque vous souhaiterez mettre à jour votre site design. Ce framework est basé sur des classes CSS, dites « utilitaires » que vous appliquerez directement dans votre code HTML.

Fonctionnalités de Tailwind CSS

Framework utilitaire

Tailwind a une approche différente des autres frameworks CSS. Les classes dites « utilitaires » sont au cœur du système. Ces dernières permettent de créer des composants totalement personnalisés, sans avoir à écrire une seule ligne de CSS! Les autres frameworks proposent des éléments prédéfinis tels que des boutons, des cartes, des listes, etc. qui sont en général difficilement personnalisables.

Les avantages d’un framework utilitaire sont multiples, parmi eux citons :

• Le fait de ne pas devoir inventer de noms de classes CSS qui, avouons-le, ne sont jamais très parlants et qui rendent la maintenance complexe.
• Un fichier CSS final de taille réduite, le framework conservant uniquement les classes CSS qui ont été effectivement utilisées dans vos fichiers HTML.
• Les modifications futures se font de manière plus sereine. Vous pouvez librement modifier les classes CSS appliquées à un élément HTML sans craindre pour les répercussions sur d’autres éléments de votre site web.

Exemple

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

Dans cet exemple, les classes utilitaires suivantes sont utilisées pour créer le design de la notification ci-dessus :

• flex, shrink-0 et p-6 qui permettent de définir l’aspect global de la carte.
• max-w-sm et mx-auto pour définir la largeur de la carte et la centrer horizontalement.
• bg-white, rounded-xl et shadow-lg pour appliquer un fond blanc, des coins arrondis et une ombre à la carte.
• w-12 et h-12 pour définir la taille du logo.
• space-x-4 pour indiquer l’espacement horizontal entre le logo et le texte.
• text-xl, text-black, font-medium et text-slate-500 pour définir la taille du texte, son épaisseur et sa couleur.

Au premier coup d’œil, ce système de classes utilitaires peut paraître intimidant et peu lisible. Ce n’est qu’une fois que vous l’aurez essayé que vous ne pourrez plus vous en passer !

Responsive Design

Tailwind propose tout le nécessaire pour adapter votre site à tous les écrans (responsive design).

Toutes les classes CSS proposées peuvent être appliquées de manière conditionnelle en fonction de la taille de l’écran. Le framework propose 5 tailles d’écran par défaut :

Préfixe	Taille d’écran maximale
sm	640px
md	768px
lg	1024px
xl	1280px
2xl	1536px

Exemple

<img class="w-16 md:w-32 lg:w-48" src="/img/logo.svg" alt="Chat bubble">

Dans cet exemple, l’image aura par défaut une largeur de 16, puis de 32 sur les écrans de taille moyenne (md), et enfin de 48 sur les écrans larges et au-delà.

Gestion des états (survol, actif, etc.)

Les états CSS permettent de comprendre les interactions disponibles en changeant la couleur d’un bouton au survol par exemple.

Tailwind permet d’appliquer des styles différents au survol, lors du clic, etc. toujours en utilisant le principe de classes utilitaires. Comme c’est le cas pour les classes responsive citées plus haut dans cet article, les classes liées aux états sont appliquées de manière conditionnelle en ajoutant un préfixe indiquant l’état que vous souhaitez cibler.

Pseudo-classes	:hover, :focus, :first-child, :required
Pseudo-éléments	::before, ::after, ::placeholder, ::selection

Exemple

<button class="bg-sky-500 hover:bg-sky-700 px-5 py-2 text-sm rounded-full font-semibold text-white">
  Enregistrer
</button>

Dans l’exemple ci-dessus, le bouton (à gauche de l’image) a un fond bleu clair dans son état normal bg-sky-500 puis un fond bleu foncé lorsqu’il est survolé hover:bg-sky-700 (à droite de l’image).

Mode sombre

De plus en plus de sites web proposent un mode sombre qui est activé automatiquement en suivant les réglages du système d’exploitation du visiteur. Le mode sombre permet de consulter un site web dans un environnement peu lumineux et « ménage » les yeux dans de telles conditions.

Tailwind propose une gestion native du mode sombre. Toutes les classes utilitaires peuvent être préfixées par dark: pour définir le style qui s’appliquera en mode sombre.

Exemple

<div class="bg-white dark:bg-slate-800 rounded-lg px-6 py-8 ring-1 ring-slate-900/5 shadow-xl">
  <h3 class="text-slate-900 dark:text-white text-base font-medium tracking-tight">Writes Upside-Down</h3>
  <p class="text-slate-500 dark:text-slate-400 mt-2 text-sm">
    The Zero Gravity Pen can be used to write in any orientation, including upside-down. It even works in outer space.
  </p>
</div>

Dans l’exemple ci-dessous, nous utilisons la classe dark:bg-slate-800 pour définir un fond de couleur sombre en mode sombre, ainsi que les classes dark:text-white et dark:text-slate-400 pour adapter la couleur du texte en mode sombre.

Éléments réutilisables

Au fur et à mesure du développement de votre projet, vous pourriez avoir besoin de réutiliser des styles pour des composants utilisés sur plusieurs pages. Tailwind CSS vous permet de réutiliser ces classes utilitaires pour créer votre propre classe CSS grâce à la directive @apply :

.btn-blue {
  @apply py-2 px-5 bg-blue-500 text-white font-semibold rounded-full shadow-md hover:bg-blue-700 focus:outline-none focus:ring focus:ring-blue-400 focus:ring-opacity-75
}

Il suffit ensuite d’appliquer la classe btn-blue à votre élément HTML pour obtenir le même style de bouton dans tout votre projet.

Conservez un fichier CSS léger en évitant d’extraire les éléments que vous n’allez pas réutiliser.

Installation et configuration de Tailwind CSS

Tailwind analyse les différents fichiers de votre projet (HTML, JS, etc.) afin de compiler seulement les classes utilitaires nécessaires à votre site web.

1. Le framework est proposé sous forme d’un package npm qui peut être installé via la commande (l’instruction -D indique qu’il s’agit d’un paquet nécessaire uniquement durant le développement) :

npm install -D tailwindcss

2. Une fois le paquet Tailwind CSS installé, vous allez pouvoir initialiser le framework avec cette commande qui va créer un fichier de configuration tailwind.config.js :

npx tailwindcss init

3. Modifiez ensuite le fichier de configuration tailwind.config.js pour indiquer au framework tous les fichiers qu’il devra analyser à la recherche des classes utilisées pour générer votre fichier CSS :

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

Dans l’exemple ci-dessus, le paramètre content indique que Tailwind va analyser tous les fichiers se terminant par .html et .js dans le répertoire src ainsi que tous les sous-dossiers qu’il contient.

Le fichier de configuration permet également de personnaliser les valeurs par défaut de Tailwind CSS (polices, couleurs, tailles d’écran, etc.).

4. Ajoutez les directives de base de Tailwind dans votre fichier CSS :

@tailwind base;
@tailwind components;
@tailwind utilities;

5. Ensuite, lancez le processus de compilation pour scanner vos fichiers et compiler le fichier CSS final :

npx tailwindcss -i ./src/source.css -o ./dist/style.css --watch

Dans la commande ci-dessus, nous indiquons à Tailwind qu’il doit « surveiller » le fichier ./src/source.css et le compiler dans ce fichier ./dist/style.css. Le paramètre --watch indique à Tailwind qu’il doit surveiller le fichier source afin de le recompiler dès qu’il a été modifié.

6. Enfin, liez le fichier CSS compilé à votre source HTML pour appliquer les styles :

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="/dist/style.css" rel="stylesheet">
</head>
<body>
  <h1 class="text-3xl font-bold underline">
    Mon premier thème Tailwind CSS !
  </h1>
</body>
</html>

Personnaliser Tailwind CSS

Tailwind offre la possibilité de personnaliser les paramètres par défaut : tailles d’écran, couleurs ainsi que les espacements. Toutes ces modifications prennent place dans le fichier de configuration tailwind.config.js créé à l’étape précédente.

Exemple de personnalisation de la palette de couleurs

Par défaut, Tailwind CSS propose une palette complète de couleurs. Ces couleurs ne correspondent peut-être pas aux besoins de votre projet et vous aurez donc besoin d’en définir de nouvelles. Éditez le fichier de configuration tailwind.config.js puis ajoutez la section colors dans la section theme existante pour ajouter votre couleur personnalisée :

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
    colors: {
      'raspberry': '#ec4899'
    }
  },
  plugins: [],
}

Votre nouvelle couleur sera ensuite utilisable comme n’importe quelle classe utilitaire de base. Par exemple, pour définir le texte de votre titre avec la nouvelle couleur définie, ajoutez la classe text-raspberry :

<h1 class="text-3xl font-bold underline text-raspberry">
  Mon premier thème Tailwind CSS !
</h1>

Ressources pour aller plus loin

Si vous ne souhaitez pas vous lancer dans l’installation de Tailwind, vous pouvez tester le framework directement dans votre navigateur grâce à « Tailwind Play ».

La documentation de Tailwind CSS décrit toutes les possibilités proposées par le framework et fourni de nombreux exemples pour les différentes classes utilitaires.

Si vous utilisez un framework de développement web tel que Next.js, Gatsby, Angular, Nuxt.js ou encore Laravel, Tailwind propose des guides d’installation spécifiques à ces plateformes.

Conclusion

Tailwind CSS est un framework CSS extrêmement complet qui permet de créer des interfaces avancées sans avoir à écrire une seule ligne de CSS. Les différentes classes utilitaires proposées par le framework vous permettent de réaliser une interface complète.

Pour les débutants, Tailwind peut paraitre impressionnant au premier abord en raison de l’utilisation d’un nombre de classes CSS qui peut paraitre excessif. Néanmoins, l’utilisation de ces classes utilitaires permet de garder un fichier CSS le plus léger possible, les classes inutilisées n’étant pas compilées.

Ce framework CSS peut s’utiliser aussi bien sur un site HTML statique que via des frameworks de développements web grâce à ses nombreuses intégrations.

Si vous recherchez un framework CSS qui soit flexible, performant et qui propose une vaste palette de possibilités, Tailwind CSS est fait pour vous. Au contraire, si vous êtes à la recherche d’un framework avec des composants prédéfinis, vous devriez jeter un œil à Bootstrap.