Les frameworks CSS ont changé la manière dont les développeurs abordent le développement web en fournissant des composants préconstruits et des styles. Cependant, de nombreux frameworks proposent des designs très marqués et des feuilles de style volumineuses qui limitent la personnalisation.
Tailwind CSS adopte une approche différente. En tant que framework CSS axé sur les utilitaires, il fournit des classes utilitaires de bas niveau qui permettent aux développeurs de créer des designs personnalisés sans être limités par des composants prédéfinis.
Avec plus de 675 375 sites web utilisant Tailwind CSS et plus de 8,61 millions de dépôts dépendants, Tailwind est devenu bien plus qu’un simple framework CSS.
Dans cet article, nous allons aborder la compréhension des concepts de Tailwind CSS, le processus de configuration et l’utilisation pratique pour que tu puisses commencer à construire tes interfaces utilisateur personnalisées sans apprendre le CSS.
Commencez maintenant !
Qu’est-ce Que Tailwind CSS ?
Tailwind CSS est un Framework CSS hautement personnalisable et de bas niveau qui fournit un ensemble de classes utilitaires pour construire rapidement des interfaces utilisateurs personnalisées. Il a été développé et lancé pour la première fois par Adam Wathan en 2017.
Depuis lors, Tailwind a connu une trajectoire ascendante dans les sites web construits en utilisant la bibliothèque Tailwind.
Bien que la croissance semble actuellement ralentie selon les graphiques de BuiltWith, le framework est régulièrement mis à jour avec de nouvelles fonctionnalités, classes, et plus encore.
Selon les données de stack technologique de BuiltWith, plus de 100 000 sites web rien qu’aux États-Unis utilisent Tailwind pour construire leurs interfaces utilisateur, avec le Royaume-Uni, l’Indonésie, l’Allemagne et d’autres pays faisant partie des 10 premiers utilisateurs de cette bibliothèque.
La philosophie fondamentale derrière Tailwind CSS est de fournir aux développeurs un ensemble de blocs de construction plutôt que des composants préconstruits. Ces blocs de construction sont de petites classes utilitaires à usage unique qui peuvent être combinées pour créer des agencements complexes et réactifs.
Cette approche permet une plus grande flexibilité et contrôle sur le design, car tu peux personnaliser chaque aspect de ton interface utilisateur sans être limité par les styles préconçus du framework.
Qu’est-ce Qui Rend Tailwind CSS Différent ?
Traditionnellement, lorsqu’ils travaillent avec CSS, les développeurs écrivent des classes personnalisées dans des feuilles de style séparées pour styliser leurs éléments HTML. Cette approche peut conduire à de gros fichiers CSS et rendre la maintenance et la mise à jour des styles à travers un projet difficile.
Tailwind fournit un ensemble complet de classes utilitaires qui peuvent être appliquées directement sur les éléments HTML. Ces classes sont hautement composable, permettant aux développeurs de créer des conceptions complexes et personnalisées sans écrire une seule ligne de CSS personnalisé.
Par exemple, au lieu de rédiger une classe CSS personnalisée pour styliser un bouton, tu peux utiliser les classes pré-définies de Tailwind comme ceci :
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
Bouton
</button>Cette approche présente plusieurs avantages :
- Développement Plus Rapide : Les classes prédéfinies aident les développeurs à construire et itérer rapidement sur les designs sans avoir constamment à passer entre les fichiers HTML et CSS.
- Stylisation Cohérente : Tailwind fournit un ensemble standardisé de classes, ce qui aide à maintenir une cohérence dans le design à travers un projet.
- Fichiers CSS Plus Petits : Puisque les styles sont appliqués directement dans l’HTML, il n’est pas nécessaire d’avoir de gros fichiers CSS personnalisés.
- Maintenance Facilitée : Avec les styles définis dans l’HTML, il est plus facile de voir comment les changements affecteront un élément spécifique sans devoir chercher dans des fichiers CSS séparés.
- Meilleure Performance : De nombreux systèmes de stylisme modernes comme Emotion ou Styled Components s’appuient sur le javascript (généralement au moment de l’exécution, ce qui ralentit la performance) pour rendre votre css. Tailwind est simplement du CSS en fin de compte.
Tailwind m’a transformé en développeur de pile complète ?”
— Boris Lepikhin
Commencer Avec Tailwind CSS
Avant de plonger dans des exemples, configurons un projet de base avec Tailwind CSS. Nous supposerons que tu as une certaine familiarité avec HTML et CSS. De plus, tu dois avoir npm installé sur ton système. Une fois que c’est fait, tu es prêt à continuer !
Crée un nouveau répertoire pour ton projet et navigue dedans :
mkdir mon-projet-tailwind
cd mon-projet-tailwindInitialise un nouveau projet npm et installe Tailwind CSS :
npm init -y
npm install -D tailwindcssCrée un fichier tailwind.config.js :
npx tailwindcss initCrée un fichier input.css et ajoute-y ce qui suit :
@tailwind base;
@tailwind components;
@tailwind utilities;Mets à jour ton fichier tailwind.config.js pour traiter ton input.css :
module.exports = {
content: ["./src/**/*.{html,js}"],
theme: {
extend: {},
},
plugins: [],
}Crée un fichier index.html dans un répertoire src et ajoute ce qui suit :
<!DOCTYPE html>
<html>
<head>
<link href="/dist/output.css" rel="stylesheet">
</head>
<body>
<h1 class="text-3xl font-bold text-center mt-4">Bienvenue sur Tailwind CSS !</h1>
</body>
</html>Construis ton CSS :
npx tailwindcss -i ./src/input.css -o ./src/output.css --watchMaintenant, lorsque tu ouvres index.html dans ton navigateur, tu devrais voir un grand titre en gras qui dit Bienvenue à Tailwind CSS !
Félicitations, tu as configuré ton premier projet Tailwind !
Classes Utilitaires Tailwind CSS
Tailwind CSS offre une large gamme de classes utilitaires qui couvrent divers aspects du style, tels que la mise en page, l’espacement, la typographie, les couleurs et plus encore. Ces classes suivent une convention de nommage qui rend leur objectif intuitif à comprendre.
Explorons quelques classes utilitaires fréquemment utilisées dans Tailwind CSS.
Classes de Mise en Page Tailwind
- flex : Applique un conteneur flex.
- grid : Applique un conteneur grid.
- block : Affiche un élément comme un élément de niveau bloc.
- inline : Affiche un élément comme un élément de niveau ligne.
Exemple:
<div class=”flex”>
<div>Article 1</div>
<div>Article 2</div>
</div>
Classes d’espacement Tailwind
- m-{size} : Applique une marge de tous les côtés.
- p-{size} : Applique un padding de tous les côtés.
- mx-{size} : Applique une marge à gauche et à droite.
- py-{size} : Applique un padding en haut et en bas.
Exemple :
<div class="m-4 p-2">
Contenu avec marge et remplissage
</div>Classes de Typographie Tailwind
- text-{size} : Définit la taille de la police.
- font-{weight} : Définit la graisse de la police.
- text-{color} : Définit la couleur du texte.
- uppercase, lowercase, capitalize : Transforme la casse du texte.
Exemple:
<p class="text-lg font-bold text-blue-500 uppercase">
Texte stylisé
</p>Couleurs Tailwind
Tailwind CSS fournit une palette de couleurs par défaut qui peut être personnalisée. Les couleurs sont définies en utilisant une combinaison du nom de la couleur et de la nuance.
- bg-{color}-{shade} : Définit la couleur de fond.
- text-{color}-{shade} : Définit la couleur du texte.
- border-{color}-{shade} : Définit la couleur de la bordure.
Exemple :
<button class="bg-blue-500 text-white border-2 border-blue-700">
Bouton
</button>Classes Tailwind Pour Le Design Réactif
Tailwind facilite la création de designs réactifs en fournissant des variantes réactives pour la plupart de ses classes utilitaires. Ces variantes te permettent de spécifier différents styles pour différentes tailles d’écran.
Tailwind utilise une approche mobile-first, où les styles de base sont appliqués à toutes les tailles d’écran, puis les tailles d’écran plus grandes sont ciblées en utilisant des préfixes responsifs :
- sm : Applique des styles aux petits écrans et plus (640px et plus).
- md : Applique des styles aux écrans moyens et plus (768px et plus).
- lg : Applique des styles aux grands écrans et plus (1024px et plus).
- xl : Applique des styles aux écrans très grands et plus (1280px et plus).
- 2xl : Applique des styles aux écrans extra-extra-larges et plus (1536px et plus).
Pour utiliser ces variantes réactives, ajoute simplement le préfixe de la classe d’utilité avec la taille d’écran désirée :
<div class="bg-blue-500 md:bg-green-500 lg:bg-red-500">
<!-- Contenu -->
</div>Dans cet exemple, le div aura un fond bleu sur les petits écrans, un fond vert sur les écrans moyens et un fond rouge sur les grands écrans.
Tu peux également utiliser des variantes réactives pour contrôler la disposition de tes éléments :
<div class="flex flex-col md:flex-row">
<div class="w-full md:w-1/2 lg:w-1/3">Colonne 1</div>
<div class="w-full md:w-1/2 lg:w-1/3">Colonne 2</div>
<div class="w-full md:w-1/2 lg:w-1/3">Colonne 3</div>
</div>Ici, les colonnes s’empileront verticalement sur les petits écrans, s’afficheront en deux colonnes sur les écrans moyens et en trois colonnes sur les grands écrans.
Personnalisation Des Classes Par Défaut De Tailwind CSS
Un des points forts de Tailwind CSS est ses options de personnalisation. Tu peux facilement personnaliser la configuration par défaut pour qu’elle corresponde aux exigences de design de ton projet. Le fichier tailwind.config.js te permet d’étendre ou de remplacer les paramètres par défaut.
Voici quelques options de personnalisation courantes. Tu peux totalement personnaliser chaque partie de Tailwind, donc ce n’est pas une liste exhaustive de tous les moyens.
Couleurs
Tailwind CSS offre une palette de couleurs riche dès le départ, mais tu peux facilement la personnaliser pour correspondre au branding ou aux exigences de design de ton projet. Le fichier tailwind.config.js te permet d’étendre ou de remplacer la palette de couleurs par défaut. Pour ajouter des couleurs personnalisées, tu peux utiliser la propriété extend à l’intérieur de l’objet colors :
// tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
'brand-primary': '#ff5a5f',
'brand-secondary': '#484848',
'brand-accent': '#ffcc00',
},
},
},
}Dans cet exemple, nous avons ajouté trois couleurs personnalisées : brand-primary, brand-secondary et brand-accent.
Ces couleurs peuvent désormais être utilisées avec des classes utilitaires comme bg-brand-primary, text-brand-secondary, border-brand-accent, etc. Tu peux également modifier les nuances de couleurs existantes ou ajouter de nouvelles nuances à la palette de couleurs par défaut de cette manière :
// tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
blue: {
'100': '#e6f0ff',
'200': '#c3d9ff',
'300': '#a1c2ff',
'400': '#7eabff',
… et ainsi de suite …
},
},
},
},
}Famille de polices
Tailwind CSS utilise une pile de familles de polices par défaut, mais tout comme pour les couleurs, tu peux modifier ces valeurs par défaut pour qu’elles correspondent au style typographique de ton projet.
Dans le fichier tailwind.config.js, tu peux étendre ou remplacer la famille de polices par défaut. Pour ajouter des familles de polices personnalisées, utilise la propriété extend à l’intérieur de l’objet fontFamily :
// tailwind.config.js
module.exports = {
theme: {
extend: {
fontFamily: {
sans: ['Poppins', 'sans-serif'],
serif: ['Merriweather', 'serif'],
mono: ['Fira Code', 'monospace'],
},
},
},
}Tu peux aussi remplacer complètement la famille de polices par défaut en omettant la propriété extend :
// tailwind.config.js
module.exports = {
theme: {
fontFamily: {
'body': ['Open Sans', 'sans-serif'],
'heading': ['Montserrat', 'sans-serif'],
},
},
}Points de Rupture Réactifs
Tailwind CSS offre un système de design réactif prêt à l’emploi, mais tu peux le personnaliser davantage pour répondre aux points de rupture spécifiques de ton projet et aux exigences en matière de réactivité.
En modifiant l’objet screens dans le fichier tailwind.config.js, tu peux définir des points d’arrêt personnalisés et appliquer différents styles en fonction des tailles d’écran.
Par exemple, disons que tu as un point de rupture unique à 1440px où tu souhaites appliquer des styles spécifiques:
// tailwind.config.js
module.exports = {
theme: {
screens: {
'xs': '480px',
'sm': '640px',
'md': '768px',
'lg': '1024px',
'xl': '1440px',
},
},
}Avec ce point d’arrêt personnalisé défini, tu peux utiliser des classes utilitaires responsives telles que xl:text-lg, xl:flex, xl:w-1/2, etc., pour appliquer des styles spécifiquement pour les écrans de plus de 1440px.
Espacement
Tailwind CSS fournit un ensemble complet de valeurs d’espacement pour les marges, les rembourrages et autres utilitaires liés à l’espacement. Tu peux personnaliser ces valeurs pour correspondre aux exigences de mise en page de ton projet. Pour ajouter des valeurs d’espacement personnalisées, utilise la propriété extend à l’intérieur de l’objet spacing :
// tailwind.config.js
module.exports = {
theme: {
extend: {
spacing: {
'13': '3.25rem',
'15': '3.75rem',
'128': '32rem',
'144': '36rem',
},
},
},
}Intégration De Bibliothèques Tierces
Tailwind CSS s’intègre avec des bibliothèques et frameworks frontend populaires comme React, Vue et Angular. En travaillant avec ces bibliothèques, tu peux utiliser les classes utilitaires de Tailwind pour styliser tes composants afin de créer des interfaces utilisateur cohérentes et maintenables. Par exemple, dans un composant React, tu peux appliquer directement les classes utilitaires de Tailwind aux éléments JSX :
import React from 'react';
const Card = () => {
return (
<div className="bg-white shadow-md rounded-lg p-6">
<h2 className="text-2xl font-bold mb-4">Titre de la Carte</h2>
<p className="text-gray-600">Le contenu de la carte va ici...</p>
</div>
);
};
export default Card;Cette approche multi-framework rend vraiment facile la combinaison du meilleur de tous les mondes, t’aidant à créer une belle application avec presque aucun effort.
Création D’une Application Simple En Tailwind CSS
Imaginons que tu construises une page d’atterrissage simple pour une plateforme de cours en ligne fictive appelée LearnHub en utilisant Tailwind pour styliser toute la page.
Étape 1 : Configuration De La Structure HTML
Tout d’abord, créons la structure HTML de base pour notre page d’accueil :
<title>LearnHub – Plateforme de Cours en Ligne</title>
Dans cette étape, nous avons mis en place la structure de base de notre document HTML. Nous avons la section <head> où nous incluons les balises meta nécessaires et le lien vers notre fichier CSS (output.css). À l’intérieur de la section <body>, nous avons les sections <header>, <main> et <footer> où nous ajouterons notre contenu.
Étape 2 : Création Du Menu De Navigation
Maintenant, ajoutons un menu de navigation simple à la section <header> en utilisant les classes utilitaires de Tailwind CSS :
<header class="bg-blue-600 text-white py-4">
<nav class="container mx-auto flex justify-between items-center">
<a href="#" class="text-2xl font-bold">LearnHub</a>
<ul class="flex space-x-4">
<li><a href="#" class="hover:text-blue-200">Cours</a></li>
<li><a href="#" class="hover:text-blue-200">Tarifs</a></li>
<li><a href="#" class="hover:text-blue-200">À Propos</a></li>
</ul>
</nav>
</header>
Voici ce que fait chaque classe :
- bg-blue-600 : Définit la couleur de fond de l’en-tête en une nuance de bleu.
- text-white : Définit la couleur du texte en blanc.
- py-4 : Ajoute un rembourrage en haut et en bas de l’en-tête.
- container mx-auto : Centre le menu de navigation horizontalement.
- flex justify-between items-center : Utilise flexbox pour espacer uniformément le logo et les éléments du menu et les aligner verticalement.
- text-2xl font-bold : Rend le texte du logo plus grand et en gras.
- flex space-x-4 : Ajoute un espacement entre les éléments du menu en utilisant flexbox.
- hover:text-blue-200 : Change la couleur du texte en une nuance de bleu plus claire lors du survol des éléments du menu.
Étape 3 : Ajout du contenu principal
Ajoutons du contenu à la section <main> de notre page d’accueil :
<main class="container mx-auto mt-8">
<section class="bg-gray-100 rounded-lg p-6">
<h1 class="text-3xl font-bold mb-4">Bienvenue Sur LearnHub</h1>
<p class="text-gray-700 mb-6">Découvre un monde de connaissances avec nos cours en ligne.</p>
<a href="#" class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700">Commencez Maintenant</a>
</section>
<section class="mt-8">
<h2 class="text-2xl font-bold mb-4">Cours En Vedette</h2>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
<!-- Les cartes des cours seront placées ici -->
</div>
</section>
</main>Voici ce que fait chaque classe :
- container mx-auto : Centre le contenu principal horizontalement.
- mt-8 : Ajoute une marge en haut du contenu principal.
- bg-gray-100 rounded-lg p-6 : Ajoute un fond gris clair, arrondit les coins et ajoute un rembourrage à la section de bienvenue.
- text-3xl font-bold mb-4 : Rend le texte du titre plus grand, en gras et ajoute une marge en bas.
- text-gray-700 mb-6 : Définit la couleur du texte en gris foncé et ajoute une marge en bas pour le paragraphe.
- bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 : Style le bouton Commencez Maintenant avec un fond bleu, texte blanc, rembourrage, coins arrondis, et un fond bleu plus foncé au survol.
- text-2xl font-bold mb-4 : Rend le titre Cours En Vedette plus grand, en gras et ajoute une marge en bas.
- grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 : Crée une mise en page grille responsive pour les cartes de cours. Elle affiche une colonne sur les petits écrans, deux colonnes sur les écrans moyens, et trois colonnes sur les grands écrans, avec un espace entre les cartes.
En assemblant l’en-tête et le code principal, tu devrais obtenir la sortie suivante :
Étape 4 : Ajout Du Pied De Page
Enfin, ajoutons un pied de page simple à notre page d’atterrissage :
<footer class="bg-gray-800 text-white py-4 mt-8">
<div class="container mx-auto text-center">
<p>© 2023 LearnHub. Tous droits réservés.</p>
</div>
</footer>Voici ce que fait chaque classe :
- bg-gray-800 text-white : Définit la couleur de fond du pied de page en gris foncé et la couleur du texte en blanc.
- py-4 : Ajoute une marge intérieure en haut et en bas du pied de page.
- mt-8 : Ajoute une marge en haut du pied de page.
- container mx-auto : Centre le contenu du pied de page horizontalement.
- text-center : Centre le texte à l’intérieur du pied de page.
Rassembler Le Tout
Voici le code final assemblé :
<p> <title>LearnHub - Plateforme de Cours En Ligne</title></p>
<header class="bg-blue-600 py-4 text-white">
<nav class="container mx-auto flex items-center justify-between"><a class="text-2xl font-bold" href="#">LearnHub</a></p>
<ul class="flex space-x-4">
<li><a class="hover:text-blue-200" href="#">Cours</a></li>
<li><a class="hover:text-blue-200" href="#">Tarifs</a></li>
<li><a class="hover:text-blue-200" href="#">À Propos</a></li>
</ul>
</nav>
</header>
<section class="rounded-lg bg-gray-100 p-6">
<h2 id="h2_bienvenue-sur-learnhub" class="mb-4 text-3xl font-bold">Bienvenue sur LearnHub</h2>
<p class="mb-6 text-gray-700">Découvre un monde de connaissances avec nos cours en ligne.</p>
<p><a class="rounded bg-blue-600 px-4 py-2 text-white hover:bg-blue-700" href="#">Commencez maintenant</a></p>
</section>
<section class="mt-8">
<h2 id="h2_cours-en-vedette" class="mb-4 text-2xl font-bold">Cours en Vedette</h2>
<div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3"><!-- Les cartes de cours iront ici --></div>
</section>
<footer class="mt-8 bg-gray-800 py-4 text-white">
<div class="container mx-auto text-center">
<p>© 2023 LearnHub. Tous droits réservés.</p>
</div>
</footer>Pour afficher le résultat aux utilisateurs, tu dois avoir correctement configuré Tailwind CSS dans ton projet. Assure-toi d’avoir suivi les étapes d’installation mentionnées précédemment, y compris la création du fichier tailwind.config.js et le traitement de ton CSS avec Tailwind.
Une fois que tu as configuré Tailwind CSS, tu peux enregistrer ce code dans un fichier HTML (par exemple, index.html) et l’ouvrir dans un navigateur web. Le navigateur affichera la page d’accueil avec les styles appliqués en utilisant les classes utilitaires de Tailwind CSS. Si tu veux simplement tester Tailwind, tu peux toujours utiliser Tailwind Play, un petit outil pratique de Tailwind où tu peux jouer avec les différentes classes.
Et voilà ! Nous avons créé une page d’atterrissage simple pour notre plateforme de cours en ligne fictive en utilisant les classes utilitaires de Tailwind CSS.
Où Aller Ensuite ?
Maintenant que tu as vu la puissance et la flexibilité de Tailwind CSS, tu sais que les possibilités sont infinies ici. Sa nature flexible et personnalisable peut t’aider à construire tout, des pages d’atterrissage simples à des applications web complexes tout en maintenant un design propre et cohérent.
Voici quelques idées pour commencer :
- Crée Un Site Portfolio : Montre tes compétences et projets avec un portfolio impressionnant.
- Crée Un Blog : Partage tes pensées et idées avec le monde entier en utilisant un blog beau et fonctionnel conçu avec Tailwind.
- Développe Une Application Web : Tailwind CSS est parfait pour construire des interfaces utilisateur pour des applications web de toutes sortes.
Peu importe ce que tu construis, Tailwind CSS peut t’aider à créer un site web superbe et fonctionnel.
Et lorsque tu envisages d’héberger ta création, pense à une solution fiable et évolutive comme les services VPS de DreamHost pour garantir que ton site fonctionne de manière fluide et efficace.
Commence à créer de belles interfaces utilisateur avec un minimum de connaissances en CSS !
