Tutoriel Tailwind CSS : le guide pratique ultime, du niveau débutant au niveau expert.

Qu'est-ce que Tailwind CSS ?

Tailwind CSS est un framework CSS axé sur l’utilité. Il fournit une série de classes CSS basiques et à usage unique, qui peuvent être combinées directement dans le code HTML (ou JSX, modèles Vue, etc.) pour créer rapidement des interfaces utilisateur personnalisées. Contrairement aux frameworks tels que Bootstrap, qui fournissent des composants prédéfinis (comme des boutons ou des cartes), Tailwind CSS n’offre pas de composants prêts à l’emploi, mais plutôt un ensemble d’outils de base nécessaires pour créer n’importe quel design.

Cette approche axée sur l'utilité signifie que les développeurs n'ont plus besoin d'écrire du CSS personnalisé pour les composants, ni d'alterner fréquemment entre les fichiers HTML et CSS. En appliquant directement une série de règles CSS dans le code HTML, ils peuvent atteindre le même résultat. text-blue-600、p-4、bg-gray-100 En utilisant la classe CSS, il est possible de définir la couleur du texte, les marges intérieures et la couleur d’arrière-plan. Cela améliore considérablement l’efficacité du développement et permet un couplage étroit entre le style et la structure, réduisant ainsi la taille et la complexité des fichiers CSS.

La philosophie de conception centrale de Tailwind CSS est “ les contraintes créent la liberté ”. Elle assure la cohérence de la conception du projet tout en offrant une grande flexibilité grâce à un ensemble de contraintes bien conçues, telles que l’espacement, les couleurs et la taille des polices, qui respectent le système de conception. Les développeurs peuvent créer des designs uniques en s’appuyant entièrement sur ces contraintes prédéfinies, sans avoir à se soucier de la prolifération incontrôlée des styles.

Comment commencer à utiliser Tailwind CSS ?

Il existe plusieurs façons d'intégrer Tailwind CSS dans votre projet. La méthode la plus recommandée consiste à l'installer en tant que plug-in PostCSS, ce qui permet d'exploiter au maximum les fonctionnalités d'optimisation de Tailwind.

Installation via npm ou yarn.

Tout d'abord, initialisez le projet via le gestionnaire de paquets et installez Tailwind CSS et ses dépendances. La commande principale est l'installation. tailwindcss、postcss et autoprefixer。

npm install -D tailwindcss postcss autoprefixer

Après l'installation, exécutez la commande suivante pour générer les fichiers de configuration de Tailwind CSS et de PostCSS. Exécutez : npx tailwindcss init -p Ils seront créés simultanément. tailwind.config.js et postcss.config.js Les documents.

npx tailwindcss init -p

Configurez le chemin du modèle.

Dans le fichier généré, tailwind.config.js Dans le fichier, vous devez configurer... content Des champs pour indiquer à Tailwind quels fichiers il doit analyser afin de trouver les noms de classes. Cela inclut généralement vos fichiers HTML, JavaScript, JSX ou Vue. C'est très important car Tailwind utilise un mécanisme appelé “ PurgeCSS ” (dans la version de production) pour supprimer tout le CSS non utilisé, ce qui permet de générer des fichiers de style aussi petits que possible.

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

Les instructions d'importation de style.

Dans votre fichier CSS principal (par exemple : src/styles.css Ou src/index.cssDans ce cas, utilisez @tailwind Des instructions pour injecter les styles de base de Tailwind.

/* src/styles.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

Ensuite, importez ce fichier CSS dans le fichier d’entrée de votre projet. Une fois ces étapes terminées, vous pourrez commencer à utiliser les classes utilitaires de Tailwind dans votre code HTML.

Les classes pratiques de base et les modèles couramment utilisés.

Les noms de classes de Tailwind CSS sont très sémantiques et prévisibles, et suivent un modèle de nommage simple : propriété-valeur (ou propriété-point de rupture-valeur).

La disposition et l'espacement.

C'est le groupe de classes le plus couramment utilisé. Par exemple,flex Pour configurer la disposition des boîtes flexibles,p-4 Exprimez padding: 1remLes marges sont utilisées. m-*, l'espace intérieur est utilisé. p-*Les chiffres correspondent généralement à un système d'espacement proportionnel (par exemple, 0, 1, 2, 4, 6).

<div class="flex justify-between items-center p-4">
  <div class="ml-2">À gauche.</div>
  <div class="mr-2">À droite</div>
</div>

La couleur et l'arrière-plan.

Vous pouvez facilement définir la couleur du texte, la couleur d'arrière-plan et la couleur du cadre. Le système de couleurs offre une palette de couleurs variée, telle que : text-blue-500、bg-gray-100、border-red-300. Plus le chiffre est élevé, plus la couleur est généralement foncée (par exemple,blue-100 C'est très peu profond.blue-900 C'est très profond.

conception réactive

Tailwind adopte une stratégie axée sur les appareils mobiles : toutes les classes pratiques sont conçues par défaut pour ces appareils. Pour ajouter des styles aux écrans plus grands, il est nécessaire d’ajouter un préfixe spécifique avant le nom de la classe. md:、lg:Cela rend la création d'interfaces réactives extrêmement simple.

<div class="text-base md:text-lg lg:text-xl">
  Ce texte est affiché en taille normale sur un téléphone, en taille plus grande sur une tablette, et encore plus grande sur un ordinateur de bureau.
</div>

Les états tels que le survol, la mise en évidence, etc.

En ajoutant un préfixe d’état, vous pouvez définir un style pour les différents états d’un élément. Par exemple,hover:bg-blue-600 Il changera la couleur d'arrière-plan lorsque la souris y passera dessus.focus:ring-2 Un cadre circulaire sera ajouté lorsque l'élément obtiendra le focus.

<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
  悬停有效果的按钮
</button>

Techniques avancées et configuration personnalisée.

Une fois que vous aurez maîtrisé les bases, vous pourrez exploiter tout le potentiel de Tailwind grâce à des techniques avancées et des configurations personnalisées.

Extrair la classe des composants.

Bien que la priorité à l'utilité soit un concept fondamental, afin d'éviter de répéter de longues listes de classes dans le HTML, vous pouvez utiliser < @apply L'instruction permet d'extraire et de réutiliser des combinaisons de styles courantes dans CSS, afin de créer vos propres “ classes de composants ”.

/* 在你的 CSS 文件中 */
.btn-primary {
  @apply bg-blue-500 text-white font-bold py-2 px-4 rounded hover:bg-blue-700;
}

Ensuite, dans le HTML, il suffit d'utiliser <. class="btn-primary" C'est tout.

Système de design personnalisé.

Toutes les valeurs par défaut de Tailwind sont configurables. En modifiant... tailwind.config.js Pour les documents, vous pouvez personnaliser la couleur, la police, l'espacement, les points de rupture, etc. afin qu'ils correspondent parfaitement à votre marque ou à vos directives de conception.

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'brand-blue': '#1992d4',
      },
      spacing: {
        '72': '18rem',
        '84': '21rem',
      }
    },
  },
}

Après la définition, vous pouvez utiliser text-brand-blue Ou p-84 C'est un tel type de classe personnalisée.

Utiliser le mode JIT.

À partir de Tailwind CSS v2.1+, un moteur Just-in-Time (JIT) a été introduit. Il génère dynamiquement le CSS nécessaire lorsque vous écrivez un modèle, au lieu de générer à l'avance un énorme fichier CSS contenant toutes les classes possibles. Cela permet d'améliorer considérablement les performances et de prendre en charge certaines fonctionnalités qui ne sont pas possibles en mode traditionnel, telles que les variantes de valeurs arbitraires.

Pour activer le mode JIT, il suffit de le faire dans tailwind.config.js Configuration dans… mode: 'jit'。

// tailwind.config.js
module.exports = {
  mode: 'jit',
  // ... 其他配置
}

Après l'activation, vous pouvez même utiliser des outils tels que... w-[200px] Ou top-[-10px] De telles classes de valeurs arbitraires offrent une grande flexibilité au cours du développement.

résumés

Tailwind CSS a révolutionné la façon dont les développeurs front-end écrivent des styles grâce à sa méthodologie unique axée sur l'utilisabilité. Il déplace les décisions de style des fichiers CSS vers les balises HTML et permet de développer des interfaces efficaces, cohérentes et hautement personnalisables en combinant de nombreuses classes atomiques à responsabilité unique. De l'installation et de la configuration simples aux classes de base pour la mise en page, les couleurs, la réactivité et les états, en passant par les configurations personnalisées avancées, l'extraction de composants et le mode JIT, Tailwind offre un ensemble d'outils puissants et flexibles. Il encourage la créativité dans des contraintes bien définies, tout en garantissant la cohérence du design et en offrant aux développeurs une grande liberté. C'est un outil puissant pour le prototypage rapide et le développement de produits dans les projets Web modernes.

FAQ Foire aux questions

Est-ce que Tailwind CSS rend le HTML trop lourd ?

En effet, l’utilisation de Tailwind CSS ajoute un grand nombre de noms de classes aux éléments HTML, ce qui peut rendre le code HTML un peu trop verbeux.

Cependant, ce “ gonflement ” est structuré et prévisible. En réalité, il transfère la complexité du style du CSS vers le HTML, qui est plus facile à gérer. Plus important encore, cela permet une configuration personnalisée. content Dans le processus de construction, les outils de production suppriment toutes les classes CSS inutilisées, et le fichier CSS final est généralement beaucoup plus petit que celui écrit à la main ou utilisé avec une bibliothèque de composants. Par conséquent, cela offre un avantage en termes de performances.

Comment masquer ou modifier les styles par défaut de Tailwind ?

Vous pouvez surcharger les styles par défaut de plusieurs manières. La méthode la plus recommandée est de… tailwind.config.js Les documents de theme.extend Une partie peut être étendue, ce qui permet d'ajouter de nouvelles valeurs sans affecter le système original. Si vous souhaitez remplacer complètement une clé de thème (comme la couleur), il suffit de le faire directement dans le fichier. theme Ça veut dire que vous allez redéfinir la classe. De plus, utilisez < avant les classes pratiques. !important Les modificateurs (tels que !text-red-500) Ou en utilisant des sélecteurs CSS plus spécifiques, il est également possible d'obtenir une surcharge de style.

Avec quels frameworks front-end Tailwind CSS est-il compatible ?

Tailwind CSS s'intègre parfaitement avec presque tous les frameworks front-end modernes. Il prend en charge nativement React, Vue, Angular, Svelte, etc. Vous devez simplement vous assurer d'utiliser correctement les noms de classes dans les modèles ou JSX du framework, et de configurer PostCSS et Tailwind dans votre processus de construction. De nombreux frameworks (tels que Next.js, Vite) fournissent même des exemples ou des plugins d'intégration officiels pour Tailwind CSS, ce qui rend le processus d'intégration encore plus fluide.

Pour utiliser Tailwind CSS, est-il nécessaire d'abandonner l'écriture manuelle de CSS ?

Ce n'est pas nécessaire du tout. Tailwind CSS n'exclut pas le CSS manuel, mais le complète. Vous pouvez toujours écrire des fichiers CSS personnalisés pour votre projet. Tailwind permet de : @apply Cette directive vous permet de réutiliser ses classes d’outils dans votre CSS personnalisé. Pour les styles très particuliers qui ne peuvent pas être réalisés avec des classes utilitaires, ou les scénarios nécessitant des fonctionnalités CSS complexes (telles que l’animation d’images clés), l’écriture manuelle de CSS reste nécessaire. Tailwind offre simplement un moyen plus efficace de gérer les besoins de style courants dans un projet, pour plus de 90% de styles.