Introduction à Tailwind CSS : un guide pratique pour passer de débutant à expert.

Qu'est-ce que Tailwind CSS ?

Tailwind CSS est un framework CSS axé sur les fonctionnalités, qui aide les développeurs à créer rapidement des interfaces utilisateur personnalisées en fournissant un grand nombre de classes pratiques et combinables. Contrairement à des frameworks comme Bootstrap, qui proposent des composants prédéfinis (tels que des boutons ou des cartes), Tailwind CSS ne fournit aucun composant conçu à l’avance. Au lieu de cela, il offre des classes CSS très détaillées et flexibles, permettant une grande liberté dans la conception des éléments de l’interface. .text-center、.bg-blue-500、.p-4 Ces classes correspondent directement à des attributs CSS uniques. Les développeurs peuvent “ assembler ” les styles souhaités en combinant ces classes directement sur les éléments HTML, ce qui leur permet une grande liberté de conception et une personnalisation extrême.

Sa philosophie fondamentale est la “ liberté dans la contrainte ”. Elle propose un système de conception soigneusement élaboré, qui prend en compte les espacements, les couleurs, la taille des polices, les points de rupture, etc. Toutes les classes utiles sont générées à partir de ce système. Cela permet aux projets de maintenir une cohérence visuelle tout en évitant les problèmes courants de nommage des classes et d’expansion des styles observés dans le CSS traditionnel. Vous n’avez plus besoin de réfléchir longuement à un nom de classe pour chaque composant, ni de passer fréquemment d’un fichier CSS à un fichier HTML.

Comment commencer à utiliser Tailwind CSS ?

Il existe plusieurs méthodes pour intégrer Tailwind CSS dans votre projet. La méthode la plus recommandée est l’utilisation de son plugin officiel pour PostCSS. Cela permet d’activer des fonctionnalités avancées telles que le mode JIT (compilation en temps réel) et de bénéficier d’une expérience de performance optimale.

Lectures recommandées Guide d’introduction à Tailwind CSS : construire des pages web modernes et responsives de zéro à un。

Installation via PostCSS

C’est la méthode d’installation la plus répandue et la plus complète en termes de fonctionnalités. Tout d’abord, utilisez npm ou yarn pour initialiser votre projet et installer les dépendances nécessaires. Vous devez installer… tailwindcss En soi,postcss aussi autoprefixer。

Assistant de création de site WordPress.com

Disponibilité de 99,999% + reprise après sinistre interrégionale, assistance 24/7, site AI Build gratuit avec l'achat d'un pack Blog

Nom de domaine gratuit pendant un an

Visitez l'assistant de création de sites Web de WordPress.com →

UltaHost Website Builder Assistant

900+ modèles gratuits et personnalisables pour obtenir la puissance SEO dont vous avez besoin pour optimiser l'exposition de votre site web aux moteurs de recherche.

Offre 40%

Visiter UltaHost Website Builder Helper →

npm install -D tailwindcss postcss autoprefixer

Ensuite, générez le fichier de configuration pour Tailwind CSS. tailwind.config.js Les fichiers de configuration de PostCSS postcss.config.js。

npx tailwindcss init -p

Cette commande créera deux fichiers. tailwind.config.js Vous pouvez personnaliser les thèmes, configurer les plugins, etc. L'état initial est… content Les champs sont utilisés pour indiquer aux outils de Tailwind quels fichiers doivent être analysés afin de trouver les noms de classes utilisées dans le code. Cela est essentiel pour le mode JIT (Just-In-Time compilation). Vous devez les configurer en fonction de la structure de votre projet, par exemple :

module.exports = {
  content: ["./src/**/*.{html,js,jsx,ts,tsx,vue}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

Ensuite, dans votre fichier CSS principal (par exemple…) src/styles.css Ou src/index.cssDans ce cas, utilisez @tailwind Des instructions permettent d’injecter des éléments dans les différentes couches du framework Tailwind.

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

Enfin, assurez-vous que PostCSS est correctement appelé dans votre processus de construction de projet (la plupart des frameworks frontaux modernes tels que Vite et Next.js le prennent en charge automatiquement). Après l’exécution de la commande de construction, Tailwind effectuera une analyse des fichiers nécessaires. content Pour le fichier spécifié dans la configuration, il faut identifier toutes les classes utiles qui y sont utilisées, puis générer un fichier CSS minimalisé contenant uniquement les styles nécessaires.

Lectures recommandées Guide de démarrage rapide de Tailwind CSS : créer une interface frontale moderne à partir de zéro.。

Utiliser Play CDN pour un prototypage rapide

Pour le prototypage rapide, les démonstrations ou les pages HTML statiques simples, vous pouvez utiliser Play CDN. Il suffit d’inclure le code approprié dans votre fichier HTML. <head> Ajoutez un élément à l’intérieur de la balise. <script> Il suffit d’utiliser des étiquettes. Cette méthode ne nécessite aucun étape de compilation, mais elle n’est pas recommandée pour un environnement de production, car la performance, la stabilité et l’intégralité des fonctionnalités sont inférieures à celles des versions compilées.

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
  <h1 class="text-3xl font-bold underline">
    Bonjour le monde !
  </h1>
</body>
</html>

Concepts clés et utilisation des classes pratiques

La clé pour comprendre Tailwind CSS réside dans la maîtrise de ses conventions de nommage et de son système de conception. Chaque classe pratique fonctionne comme une fonction : elle reçoit des valeurs provenant du système de conception et génère une déclaration CSS en retour.

Système de espacements et de dimensions

Tailwind utilise un système de valeurs unifié pour gérer les marges intérieures et extérieures, les largeurs, les hauteurs, etc. Le format des noms de classe est généralement le suivant : {属性}{方向}-{大小}Par exemple :
- .p-4 Exprimez padding: 1rem;(1rem = 16px ; 4 représente donc 4 × 0.25rem.)
- .mt-2 Exprimez margin-top: 0.5rem;。
- .mx-auto Indique que le margine horizontal est défini automatiquement, et est souvent utilisé pour centrer les éléments de niveau bloc.
- .w-64 Exprimez width: 16rem;。
- .h-screen Exprimez height: 100vh;。

Bluehost Website Builder

Offre un outil de création de sites web AI, une assistance téléphonique et par chat 24/7, un nom de domaine gratuit pendant 1 an, un CDN gratuit, un SLA de 99,99%.

Visiter Bluehost

La couleur et l'arrière-plan.

Tailwind propose une palette de couleurs très riche et hiérarchisée. Le format des noms des classes de couleurs est le suivant : {属性}-{颜色}-{深浅}。
- .text-gray-800 Indique que la couleur du texte est du gris avec une nuance de 800.
- .bg-blue-500 Cela indique que la couleur de fond est le bleu avec une nuance de 500 sur l'échelle des couleurs.
- .border-red-300 Indique que la couleur du bord est le rouge avec une nuance de 300 dans l’échelle des couleurs.
Vous pouvez également utiliser… .hover:bg-blue-600 Voici comment ajouter des styles lorsqu'on passe la souris dessus (état de survol).

La conception réactive et les points de rupture.

Tailwind utilise un système de points de rupture (breakpoints) axé sur les appareils mobiles. Les classes pratiques par défaut sont conçues pour les appareils mobiles. Pour appliquer des styles sur des écrans plus grands, il est nécessaire d’ajouter un préfixe correspondant au point de rupture avant le nom de la classe. Le format est le suivant : {断点}:{类名}Les points d’arrêt par défaut sont :
- sm: (640 pixels)
- md: (768 pixels)
- lg: (1024 pixels)
- xl: (1280 pixels)
- 2xl: (1536 pixels)

Par exemple.<div class="text-center md:text-left lg:text-2xl"> Cela signifie que le texte doit être centré sur les appareils mobiles, aligné à gauche sur les écrans de taille moyenne et supérieure, et affiché avec une police de caractères plus grande sur les écrans de grande taille et supérieure.

Lectures recommandées Maîtriser les fonctionnalités essentielles de Tailwind CSS : du guide pratique sur la bibliothèque de composants au design responsive。

Techniques avancées et meilleures pratiques

Une fois que vous maîtrisez les bases, les astuces suivantes vous permettront d’utiliser Tailwind CSS de manière plus efficace.

Extraire des classes de composants réutilisables

Bien que Tailwind encourage l’utilisation directe de classes pratiques dans le HTML, pour les combinaisons de styles complexes qui se répètent dans un projet, il est possible d’utiliser… @apply L’instruction permet d’extraire ces éléments et de les intégrer dans le CSS sous la forme d’une classe personnalisée. Cela contribue à maintenir la simplicité du code HTML.

hosting.com

SSL gratuit, CDN Cloudflare, WAF, 40+ salles de serveurs mondiales à choisir, latence plus faible près de chez vous, service d'assistance 24/7/365, vous pouvez maintenant économiser jusqu'à 67%, support pour les constructions AI et l'optimisation SEO !

Visitez hosting.com

Dans votre fichier CSS, vous pouvez écrire ceci :

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

Ensuite, utilisez-le directement dans le HTML. <button class="btn-primary">C’est une bonne façon de trouver un équilibre entre les principes de “ priorité aux éléments pratiques ” et les approches basées sur le CSS traditionnel.

Thèmes entièrement personnalisés

En passant par… tailwind.config.js Les documents de theme.extend Vous pouvez configurer certaines aspects du système de conception par défaut pour l’adapter facilement à vos besoins. Par exemple, vous pouvez ajouter des couleurs, des polices de caractères, des espacements ou des points de rupture personnalisés.

module.exports = {
  theme: {
    extend: {
      colors: {
        'brand-blue': '#1992d4',
      },
      spacing: {
        '128': '32rem',
      }
    },
  },
}

Une fois la configuration terminée, vous pourrez utiliser des outils ou des fonctionnalités similaires à… .text-brand-blue et .w-128 Voilà un tel type de classe.

Avantages de l'utilisation du mode JIT (Just-In-Time)

Le mode JIT (Just-In-Time), introduit à partir de Tailwind CSS v2.1, a vraiment bouleversé la façon de travailler avec les styles CSS. Tailwind CSS ne génère plus à l’avance tous les styles possibles, mais les produit uniquement au moment où ils sont réellement nécessaires pendant le processus de développement. Cela signifie que :
1. La vitesse de développement et de compilation est extrêmement rapide, quel que soit le degré de complexité de vos configurations.
2. Vous pouvez utiliser n’importe quelle valeur, par exemple… .top-[-113px] Ou .bg-[#1da1f2]… et cela sans avoir besoin de les configurer à l’avance.
3. Le fichier CSS généré est extrêmement compact et optimisé pour un environnement de production.
À partir de la version 3.0, le mode JIT est devenu le moteur par défaut et le seul disponible. Vous pouvez donc profiter de tous ces avantages sans avoir à l’activer manuellement.

résumés

Tailwind CSS offre une révolutionnaire amélioration de l’efficacité et de la flexibilité dans le développement front-end grâce à sa méthodologie basée sur des classes pratiques et hiérarchisées. Il élimine les coûts de transition entre le CSS et l’HTML et assure la cohérence visuelle des projets grâce à un système de conception rigoureux. Que ce soit pour des prototypes simples ou des applications d’entreprise complexes, Tailwind CSS est à la hauteur de la tâche. Maîtriser ses concepts fondamentaux, ses modèles de conception responsive et ses techniques de personnalisation avancées vous permettra de créer rapidement des interfaces utilisateur de haute qualité, à la fois esthétiques et uniques. Bien qu’il vous faille au début mémoriser certains noms de classes, une fois que vous aurez compris ses règles de nommage, la vitesse de développement sera bien supérieure à celle de la programmation CSS traditionnelle.

FAQ Foire aux questions

Les fichiers CSS générés par Tailwind CSS sont-ils très volumineux ?

Non, surtout dans un environnement de production. Grâce à son moteur JIT (compilation en temps réel), Tailwind scanne avec précision les fichiers de votre projet et ne génère que les styles correspondant aux classes CSS que vous utilisez réellement. Cela signifie que le fichier CSS final est généralement très compact, parfois même plus petit que de nombreux fichiers CSS écrits manuellement. Les outils de construction (comme PurgeCSS, dont les fonctionnalités sont intégrées au moteur JIT) suppriment tous les styles inutilisés.

Dans les projets d’équipe, le code HTML peut devenir très encombrant, ce qui peut rendre son maintien difficile.

C’est effectivement une préoccupation courante. La pratique montre qu’une bonne modularisation (que ce soit en utilisant des frameworks de composants tels que React ou Vue, ou autrement) permet de résoudre ces problèmes. @apply L’extraction des combinaisons de styles répétées permet de gérer efficacement la complexité des documents HTML. Le “surpoids” des codes HTML est compensé par la prévisibilité des styles et par une charge de nommage beaucoup plus réduite. Les équipes ont plus facilement une cohérence dans la mise en œuvre des styles, car elles utilisent le même ensemble de conventions de conception (espacements, couleurs, etc.). De nombreuses équipes ont constaté que les coûts de maintenance globaux diminuaient en réalité.

Puis-je l’utiliser avec des frameworks CSS ou UI existants, tels que Bootstrap ?

C’est possible, mais il n’est pas recommandé de les utiliser ensemble. Vous pouvez intégrer à la fois Tailwind CSS et d’autres styles CSS dans un projet, mais vous devez faire attention aux conflits qui pourraient survenir en raison des différences de priorité des styles (spécificité). Une approche plus courante consiste à effectuer une migration progressive, c’est-à-dire à utiliser uniquement Tailwind CSS pour les nouvelles fonctionnalités tout en conservant les anciens styles. Tailwind CSS offre des outils pour faciliter cette transition. prefix Les options de configuration permettent d’ajouter un préfixe à toutes les classes utiles (par exemple…). tw-Cela permet d’éviter efficacement les conflits de noms de classes.

Comment supprimer ou ajouter des styles personnalisés ?

Il existe plusieurs méthodes principales : 1. Utiliser… @apply Dans le CSS, les instructions permettent de combiner des classes pratiques pour créer de nouvelles classes. 2. Dans… tailwind.config.js de theme.extend Système de conception évolutive en Chine. 3. Dans… tailwind.config.js de theme Remplacez directement les valeurs par défaut (ce n’est pas recommandé, sauf si c’est nécessaire). 4. Utilisez n’importe quelle valeur directement dans le HTML. bg-[#yourcolor]Écrire du CSS traditionnel et l’utiliser pour outrepasser les styles, mais ce ne devrait être qu’un dernier recours.