Tailwind CSS est un framework CSS à fonctionnalités multiples qui

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 une série de classes utilitaires atomisées et prédéfinies. Contrairement aux frameworks CSS traditionnels au niveau des composants, il encourage le contrôle direct du style via le HTML, permettant une intégration étroite du style et de la structure. Cette approche unique réinvente le processus de développement de styles front-end.

Les principes fondamentaux et le mécanisme de fonctionnement.

La philosophie centrale de Tailwind CSS est le “ CSS atomique ”. Ce n’est pas un framework proposant des composants préfabriqués (comme des boutons ou des cartes), mais un ensemble d’outils de base comprenant des milliers de classes petites et monofonctionnelles.

Comment fonctionnent les cours pratiques ?

框架中的每个实用类（Utility Class）通常对应一条或多条 CSS 规则。例如，类名 .text-center Correspondant text-align: center;Et pourtant, .bg-blue-500 Cela définit une couleur d’arrière-plan bleue spécifique. Les développeurs peuvent “ assembler ” le style souhaité en combinant ces classes sur les éléments HTML, sans avoir à écrire de CSS personnalisé.

Lectures recommandées Maîtriser Tailwind CSS : un guide pratique de l'initiation à la pratique.。

Le processus de génération de style.

Lors du lancement d'un projet, Tailwind scanne tous les fichiers de modèle présents dans le projet (comme…) *.html, *.jsx, *.vue), identifie toutes les classes utilitaires utilisées. Ensuite, il se base sur le fichier de configuration. tailwind.config.jsIl génère dynamiquement un fichier CSS aussi petit que possible pour les classes utilisées et leurs variantes (par exemple, état de survol, état de focus). Cette méthode de génération à la demande permet de réduire au minimum la taille du fichier CSS final.

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 →

Installation et configuration de base

L'intégration de Tailwind CSS dans un projet est très simple, et il prend en charge de nombreux outils et frameworks de développement.

Installation via npm

La méthode la plus courante consiste à l’installer via npm ou yarn. Tout d’abord, initialisez un projet npm dans le répertoire racine du projet, puis installez Tailwind et ses dépendances.

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

L'exécution de la commande d'initialisation génère un fichier de configuration par défaut. tailwind.config.js。

Scannez le chemin de configuration.

Generé. tailwind.config.js Dans le document, le point clé est : content Un champ qui indique à Tailwind quels fichiers il doit scanner pour rechercher des noms de classes.

Lectures recommandées Guide de début et pratique pour Tailwind CSS : Construire des interfaces réactives et modernes à partir de zéro。

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

Introduire les styles de base

Ensuite, dans votre fichier CSS principal (par exemple <), src/styles.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, assurez-vous que votre processus de construction (par exemple, en utilisant Webpack, Vite, etc.) configure PostCSS pour traiter ce fichier CSS, afin que les étapes de prétraitement de Tailwind puissent prendre effet.

Les applications pratiques et les catégories courantes.

La clé pour maîtriser Tailwind CSS est de se familiariser avec ses conventions de nommage et la manière dont les noms de classes sont combinés.

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 disposition et l'espacement.

Tailwind propose un ensemble complet de règles de mise en éspace (basées sur…) remLes classes de contrôle et de mise en page. Par exemple,.p-4 au nom de padding: 1rem;，.mt-2 au nom de margin-top: 0.5rem;Pour le layout à boîtes élastiques (flexbox), il est possible d'utiliser… .flex, .items-center, .justify-between etc.

<div class="flex justify-between items-center p-4">
  <div>Le contenu de gauche.</div>
  <div>Le contenu de droite.</div>
</div>

La couleur et la typographie

Utilisation de la couleur du texte .text-{颜色}-{色度}Par exemple… .text-gray-800Utilisation de la couleur de fond .bg-{颜色}-{色度}Quant à la taille de la police, elle peut être ajustée… .text-sm, .text-lg, .text-xl ainsi qu'une série de classes prédéfinies.

État et variantes réactives

Tailwind permet d'ajouter un préfixe d'état avant le nom de la classe pour définir le style des interactions. Par exemple,.hover:bg-blue-600 Un arrière-plan bleu foncé sera appliqué lorsque la souris sera positionnée dessus. Le design réactif fonctionne de manière similaire. .md:text-center Les variantes sont implémentées dans la classe et indiquent que le texte est centré sur les écrans de taille moyenne et supérieure. Ces variantes peuvent être combinées librement.

Lectures recommandées Découvrez le potentiel de Tailwind CSS : un guide pratique de base à avancé。

Les fonctionnalités avancées et la personnalisation.

En plus des classes prêtes à l'emploi, Tailwind offre de puissantes capacités d'extension et de personnalisation.

Des thèmes hautement personnalisables.

Dans tailwind.config.js de theme.extend Dans les objets, vous pouvez surcharger ou étendre les jetons de conception par défaut, tels que la couleur, la police, l'espacement, les points d'arrêt, etc.

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

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'brand-primary': '#1d4ed8',
      },
      spacing: {
        '128': '32rem',
      }
    },
  },
}

Ensuite, vous pourrez utiliser des classes personnalisées telles que .text-brand-primary et .p-128。

Extraction des composants réutilisables.

Bien que l'utilisation de feuilles de style pratiques soit encouragée, vous pouvez également utiliser des fragments de style hautement réutilisables dans vos projets. @apply Les instructions permettent d’extraire les classes des composants dans le CSS.

.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;
}

Utiliser des plugins tiers.

L’abondant écosystème de plugins permet d’étendre les fonctionnalités de Tailwind. Par exemple,@tailwindcss/forms Offrir un meilleur style de formulaire,@tailwindcss/typography Il offre un style de mise en page agréable pour le corps du texte. Il suffit de l'installer et de le configurer dans le fichier de configuration. plugins Il suffit de l’incorporer dans l’array.

résumés

Tailwind CSS, avec sa philosophie unique axée sur la praticité, améliore considérablement l’efficacité et la flexibilité du développement de styles front-end. Il permet une personnalisation poussée grâce à des noms de classes atomiques, garantit des performances optimales grâce à la génération à la demande, et répond aux besoins de personnalisation approfondie grâce à un système de configuration et de plugins puissant. De la création rapide de prototypes aux projets de production à grande échelle, il démontre une excellente adaptabilité et constitue un outil puissant pour créer des interfaces esthétiques, cohérentes et performantes dans le développement Web moderne. Maîtriser ses concepts fondamentaux et son flux de travail peut libérer efficacement la créativité des développeurs en matière de styles.

FAQ Foire aux questions

Est-ce que Tailwind CSS augmente la lourdeur du code HTML ?

Oui, le nombre de noms de classes dans le HTML augmente considérablement, ce qui est considéré comme l’un des principaux points de controverse. Un élément peut contenir plus d’une douzaine de classes, voire même plus encore.

Mais cette “ redondance ” permet une spécificité des styles, une personnalisation poussée et un CSS sans redondance. De nombreux développeurs considèrent que c'est plus efficace que de naviguer entre plusieurs fichiers CSS et de gérer la spécificité des sélecteurs. De plus, les outils de compression modernes permettent de compresser efficacement les noms de classes, avec un impact minime sur la taille du fichier transmis.

Dans les projets d'équipe, comment maintenir la cohérence du style ?

Tailwind lui-même impose une cohérence visuelle grâce à un système de design restreint (couleurs, espacement, taille de police, etc.). Tous les développeurs utilisent le même ensemble d'outils. rem Une échelle de distances et une palette de couleurs basées sur le RVB.

Afin d’améliorer encore la cohérence, l’équipe devrait bien définir et exploiter pleinement les avantages de la collaboration. tailwind.config.js Les thèmes personnalisés sont encouragés à être utilisés. @apply Extrayez les styles des composants fréquemment utilisés. En même temps, vous pouvez utiliser l'extension Prettier en combinaison. prettier-plugin-tailwindcss C'est pour trier les noms de classes et uniformiser le style du code.

Quelle est la taille du fichier CSS final généré par Tailwind CSS ?

Grâce au concept de génération à la demande de PurgeCSS (maintenant intégré dans Content Scan), le fichier CSS final est généralement très petit. Il ne contient que les classes réellement utilisées dans le projet.

Dans un projet typique, même si l'on utilise de nombreuses fonctionnalités, la taille finale du fichier CSS est généralement inférieure à 10 Ko. Après compression et encodage Brotli/Gzip, la taille du fichier transféré est encore plus réduite, ce qui est bien plus efficace que d'écrire manuellement du code ou d'utiliser une grande bibliothèque de composants contenant des styles inutilisés.

Comment gérer des noms de classes générés dynamiquement ?

Si le nom de la classe est généré dynamiquement par l'assemblage de chaînes de caractères (par exemple, <), alors : text-${error ? 'red' : 'green'}-500Par conséquent, il est possible que l’outil d’analyse statique de Tailwind ne les reconnaisse pas, ce qui fait que ces styles ne seront pas inclus dans le CSS généré.

La solution est la suivante : 1) utiliser autant que possible des chaînes de noms de classes complètes et utiliser des jugements logiques pour contrôler quelles classes sont ajoutées. 2) dans le tailwind.config.js de safelist L'option répertorie explicitement ces noms de classes complets pouvant être générés dynamiquement, en s'assurant qu'ils sont inclus dans le style final.