Tailwind CSS : approche fondée sur les utilitaires
Appliquez directement les classes utilitaires prédéfinies dans le HTML, personnalisez le thème dans tailwind.config.js et utilisez @apply pour extraire les motifs répétés.
Tailwind CSS : approche fondée sur les utilitaires est une leçon Frontend Academy gratuite sur CoddyKit. Ceci est la leçon 4 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Frontend Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Frontend Academy comprend 4 leçons au total.
Qu'est-ce que le CSS fondé sur des utilitaires ?
Tailwind CSS fournit des classes utilitaires préconstruites pour chaque propriété CSS. Au lieu d'écrire du CSS personnalisé, vous composez les styles en ajoutant directement des classes utilitaires dans le HTML. Une classe = une déclaration CSS.
Installer Tailwind
Installez Tailwind et initialisez la configuration. Les projets Vite utilisent le module d'extension Vite de Tailwind ou le module d'extension PostCSS.
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init
# Or with Vite plugin:
npm install -D @tailwindcss/viteLes classes utilitaires en pratique
Construisez une carte en utilisant uniquement les classes utilitaires de Tailwind. Aucun fichier CSS personnalisé n'est nécessaire.
<div class="bg-white rounded-lg shadow-md p-6 max-w-sm">
<img class="w-full h-48 object-cover rounded-md mb-4" src="..." alt="...">
<h2 class="text-xl font-semibold text-gray-800">Card Title</h2>
<p class="text-gray-500 mt-2">Card description goes here.</p>
<button class="mt-4 w-full bg-indigo-600 text-white py-2 rounded hover:bg-indigo-700 transition-colors">
Read More
</button>
</div>Préfixes adaptatifs
Ajoutez des préfixes de points de rupture adaptatifs. md: s'applique aux écrans moyens et plus grands. lg: s'applique aux grands écrans. Tailwind privilégie les petits écrans.
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">Variantes d'état
Préfixez les classes avec des variantes d'état : hover:, focus:, active:, disabled:, dark:.
<button class="bg-blue-600 hover:bg-blue-700 focus:ring-2 focus:ring-blue-400 disabled:opacity-50 disabled:cursor-not-allowed">Configurer le thème
Personnalisez les couleurs, les espacements, les polices et les points de rupture dans tailwind.config.js. Étendez le thème par défaut ou remplacez certaines de ses parties.
// tailwind.config.js
export default {
theme: {
extend: {
colors: {
brand: { 500: '#6366f1', 600: '#4f46e5' }
},
fontFamily: {
sans: ['Inter', ...defaultTheme.fontFamily.sans]
}
}
}
}@apply — Extraire des motifs
Utilisez @apply dans les fichiers CSS pour composer des classes utilitaires en une règle CSS réutilisable. Utilisez cette approche avec modération : les classes utilitaires directes sont préférables dans la plupart des cas.
/* Only for highly repeated patterns */
@layer components {
.btn-primary {
@apply px-4 py-2 bg-indigo-600 text-white rounded-md
hover:bg-indigo-700 transition-colors font-medium;
}
}Supprimer le CSS inutilisé
Tailwind génère des milliers de classes utilitaires. En production, il analyse vos fichiers source et supprime toutes les classes qui ne sont pas utilisées, ce qui produit de minuscules fichiers CSS (souvent inférieurs à 10 Ko).
Tailwind avec React/Vue
Dans React, utilisez cn() (clsx + twMerge) pour appliquer conditionnellement les classes Tailwind sans conflits. Dans Vue, utilisez les liaisons :class.
import { clsx } from 'clsx';
import { twMerge } from 'tailwind-merge';
function cn(...classes: string[]) { return twMerge(clsx(classes)); }
<div className={cn('rounded-lg p-4', featured && 'border-2 border-indigo-600')}>IntelliSense pour Tailwind
Installez l'extension Tailwind CSS IntelliSense pour VSCode afin d'obtenir la complétion automatique, l'aperçu des noms de classes au survol et la détection des classes inconnues. Elle améliore considérablement l'expérience de développement avec Tailwind.
Critique et défense de Tailwind
Critique : le HTML devient encombré par de nombreuses classes et plus difficile à lire. Défense : vous n'écrivez jamais de CSS, tous les styles sont regroupés au même endroit et le système de conception est imposé par la configuration. La plupart des équipes qui essaient Tailwind signalent régulièrement une productivité accrue.
Vérification rapide
Comment Tailwind gère-t-il la taille du paquet de production alors qu'il génère des milliers de classes utilitaires ?
Récapitulatif : Tailwind CSS
Approche fondée sur les utilitaires : une classe = une propriété CSS. Aucun CSS personnalisé n'est nécessaire dans la plupart des cas. Préfixes adaptatifs et d'état (md:, hover:). Personnalisez avec tailwind.config.js. Utilisez @apply pour les motifs répétés. La compilation de production analyse les classes et supprime celles qui sont inutilisées. Utilisez cn() + twMerge pour les classes conditionnelles dans React. Installez l'extension IntelliSense.
Questions Fréquemment Posées
La leçon « Tailwind CSS : approche fondée sur les utilitaires » est-elle gratuite ?
Oui — le texte complet de « Tailwind CSS : approche fondée sur les utilitaires » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Frontend Academy, passe à CoddyKit PRO. Le cours Frontend Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Tailwind CSS : approche fondée sur les utilitaires » ?
Appliquez directement les classes utilitaires prédéfinies dans le HTML, personnalisez le thème dans tailwind.config.js et utilisez @apply pour extraire les motifs répétés. Tu pratiques Frontend Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer Frontend Academy ?
Aucune expérience préalable n'est requise. Frontend Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 4 sur 4.
Combien de temps prend la leçon « Tailwind CSS : approche fondée sur les utilitaires » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon Frontend Academy ?
Oui. Chaque leçon Frontend Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Méthodologie BEM : bloc, élément et modificateur
- Modules CSS : noms de classes à portée limitée
- CSS-in-JS : Styled-components et Emotion
- Tailwind CSS : approche fondée sur les utilitaires