Apprendre Tailwind CSS : Construire des pages web modernes et réactives à partir de zéro

Qu'est-ce que Tailwind CSS ?

Tailwind CSS Tailwind CSS est un framework qui met l’accent sur les fonctionnalités. Il aide les développeurs à créer rapidement des interfaces utilisateur personnalisées en leur 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 ne fournit aucun composant prêt à l’emploi. Au lieu de cela, il offre un ensemble de classes atomiques de niveau bas, qui peuvent être assemblées pour créer des éléments d’interface selon les besoins. .text-center、.p-4、.bg-blue-500Les développeurs “ assemblent ” les styles requis en écrivant directement ces classes sur les éléments HTML.

L’avantage majeur de cette méthode réside dans le fait qu’elle améliore considérablement l’efficacité du développement et élimine les conflits de noms ainsi que les problèmes de surcouvrement des styles courants dans le CSS traditionnel. Vous n’avez plus besoin de vous creuser la tête pour trouver des noms de classes, ni de naviguer entre plusieurs fichiers CSS. De plus, comme les styles sont directement intégrés dans le HTML, la maintenance du projet en est facilitée : vous pouvez voir d’un coup d’œil à quoi ressemblera un élément final.Tailwind CSS Il intègre par défaut un design réactif, des variantes d'état (comme le survol ou le focus) ainsi que le support du mode sombre, ce qui en fait un outil idéal pour créer des pages web modernes.

Comment commencer à utiliser Tailwind CSS ?

commencer à utiliser Tailwind CSS Il existe plusieurs méthodes pour installer et configurer ce logiciel, mais la plus recommandée est l’utilisation de son outil CLI (Command Line Interface) officiel. Cette approche offre le plus grand niveau de flexibilité ainsi que un contrôle complet sur le processus de construction.

Lectures recommandées Maîtriser Tailwind CSS : Un guide pratique de l'initiation à la maîtrise, avec les meilleures pratiques。

Installation à l’aide d’un outil CLI (Command Line Interface).

Tout d’abord, vous devez initialiser le projet. Tailwind CSSIl est de bonnes pratiques d’installer l’outil CLI via npm ou yarn, puis de générer un fichier de configuration. Exécutez les commandes suivantes dans le répertoire racine du projet :

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
npx tailwindcss init

Cela créera dans votre projet un élément nommé… tailwind.config.js Le fichier de configuration. Ensuite, vous devez créer un fichier CSS principal (par exemple <). src/input.css), et utilisez @tailwind Les instructions permettent d’inclure les différentes composantes (ou « couches ») de Tailwind CSS dans le code HTML.

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

Ensuite, dans tailwind.config.js Dans le fichier de configuration, indiquez l'emplacement de vos fichiers de modèle afin que Tailwind puisse les parcourir et générer le CSS correspondant.

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

Enfin, exécutez la commande CLI pour générer le fichier CSS final.

npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch

Cette commande surveillera les modifications apportées à vos fichiers sources et compilera en temps réel les classes utiles nécessaires. ./dist/output.css Le fichier est présent à l’intérieur du document. Vous n’avez qu’à l’incorporer dans votre code HTML pour utiliser le fichier CSS qui a été généré au final.

Lectures recommandées Le guide ultime pour débuter avec Tailwind CSS : construire une interface utilisateur moderne et réactive à partir de zéro。

Les classes pratiques de base et la conception réactive.

Tailwind CSS Les classes pratiques couvrent presque tous les attributs CSS, tels que le layout, les espaces, la mise en page, les couleurs, les bordures et les effets. Les règles de nommage sont intuitives et cohérentes ; par exemple, les espaces sont représentés par des noms spécifiques… p-{size} Indique le padding (espace intérieur).m-{size} Indique les marges (espaces autour d’un élément) ; les valeurs de la largeur et de la hauteur sont utilisées pour définir la taille de l’élément. w-{size} et h-{size}。

Le design responsive est un point fort de Tailwind. Il utilise un système de points de rupture (breakpoints) basé sur le principe « Mobile First » (priorité au format mobile). Les points de rupture par défaut sont les suivants :sm(640 pixels)md(768 pixels)lg(1024 pixels)xl(1280 pixels)2xl(1536 px). Pour appliquer des styles à différentes tailles d’écran, il suffit d’ajouter le préfixe de point de rupture correspondant avant la classe correspondante.

Par exemple, le code suivant crée un conteneur qui s’affiche de manière définie par défaut en mode empilé sur les appareils mobiles, et qui est aligné horizontalement sur les écrans de taille moyenne et supérieure :

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

<div class="flex flex-col md:flex-row">
  <div class="p-4 bg-blue-100 md:w-1/2">Le contenu de gauche.</div>
  <div class="p-4 bg-green-100 md:w-1/2">Le contenu de droite.</div>
</div>

Dans cet exemple,flex-col C’est le style par défaut (pour les appareils mobiles).md:flex-row Indique que… md Pour les points de rupture et les écrans supérieurs, la direction des conteneurs flexibles change pour devenir horizontale (c’est-à-dire en ligne). De même, la largeur des conteneurs est également ajustée en conséquence. md:w-1/2 Cela n’est également efficace que sur les écrans de taille moyenne et supérieure.

Des thèmes et des plugins personnalisés.

même si Tailwind CSS Un système de conception par défaut élégant a été fourni, mais pour garantir la cohérence de la marque, la personnalisation des thèmes est indispensable. Cela se fait principalement en modifiant… tailwind.config.js Dans le fichier theme Cela peut être réalisé en partie.

Étendre les configurations par défaut

Vous pouvez… theme.extend On ajoute de nouvelles valeurs à un objet ; celles-ci ne remplacent pas les valeurs par défaut, mais les complètent. Par exemple, on peut y ajouter des couleurs personnalisées, des polices de caractères ou des espacements.

Lectures recommandées Apprendre Tailwind CSS : Construire des sites web modernes et réactifs à partir de zéro。

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'brand-primary': '#1d4ed8',
        'brand-secondary': '#7e22ce',
      },
      fontFamily: {
        'sans': ['Inter var', 'system-ui', 'sans-serif'],
      },
      spacing: {
        '72': '18rem',
        '84': '21rem',
      }
    },
  },
}

Une fois personnalisé, vous pourrez l’utiliser dans votre HTML. text-brand-primary、font-sans et p-84 Voilà un tel type de classe.

Utiliser les plugins officiels ainsi que ceux proposés par la communauté.

Tailwind CSS Le système de plugins vous permet de créer vos propres classes utiles. L’éditeur fournit quelques plugins très pratiques, par exemple… @tailwindcss/forms(Utilisé pour embellir les éléments de formulaire.)@tailwindcss/typography(Utilisé pour offrir une mise en page élégante à du contenu HTML non contrôlable.) Après l’installation, il suffit de modifier les fichiers de configuration. plugins Il suffit de l’incorporer dans l’array.

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

npm install @tailwindcss/typography

// tailwind.config.js
module.exports = {
  plugins: [
    require('@tailwindcss/typography'),
    // ... 其他插件
  ],
}

Par la suite, vous pourrez l'utiliser avec n'importe quel conteneur. prose Cette classe permet à son contenu HTML d’obtenir automatiquement un formatage esthétique et agréable à lire.

Construire des composants complexes

Après avoir maîtrisé les classes de base, vous pouvez commencer à créer des composants complexes et réutilisables. Bien que Tailwind encourage l’utilisation directe de styles dans le HTML, pour les composants fréquemment utilisés dans de grands projets, il est plus pratique de les mettre en place via des fichiers de style dédiés. @apply Il est également une bonne pratique d’extraire les styles communs des instructions CSS.

Par exemple, vous pouvez définir un style de bouton personnalisé :

/* 在你的 CSS 文件中 */
.btn-primary {
  @apply py-2 px-4 bg-brand-primary 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 transition duration-150 ease-in-out;
}

Ensuite, utilisez ce nom de classe directement dans votre HTML :

<button class="btn-primary">点击我</button>

Cette approche combine la flexibilité des solutions pratiques avec la maintenabilité propre au CSS traditionnel. Pour les projets basés sur des frameworks JavaScript tels que React ou Vue, il est courant d’intégrer ces styles directement dans les templates des composants, ce qui permet de regrouper étroitement les éléments de style, la structure et la logique.

résumés

Tailwind CSS Grâce à son paradigme axé sur les fonctionnalités essentielles et l’utilité pratique, Tailwind a complètement révolutionné la façon dont les développeurs front-end créent leurs styles. Il offre tout ce qu’il faut pour construire des pages web modernes et réactives, à partir de zéro. De plus, son système de noms intuitif, son système réactif puissant et ses configurations hautement personnalisables assurent à la fois une efficacité de développement et une cohérence dans le design. Que ce soit pour le développement rapide de prototypes ou la création d’applications de production à grande échelle, Tailwind améliore considérablement le flux de travail. Maîtriser ses concepts fondamentaux, ses préfixes réactifs, ses méthodes de configuration des thèmes et ses techniques de construction de composants vous permettra de créer des interfaces utilisateur uniques et élégantes de manière efficace.

FAQ Foire aux questions

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

Non. Dans un environnement de production,Tailwind CSS Utilisez la technologie PurgeCSS (désormais intégrée et appelée “ content scanning ”). Elle scanne tous les fichiers de template que vous avez spécifiés dans votre fichier de configuration (tels que HTML, JSX, Vue) et ne compile que les classes réellement utilisées dans le fichier CSS final. Cela permet d’obtenir un fichier CSS très compact, généralement de quelques kilooctets à une dizaine de kilooctets.

Dans un projet d’équipe, comment maintenir une cohérence des styles ?

Tailwind CSS Il favorise la cohérence en fournissant un ensemble de systèmes de conception restreints (tels qu’un palet de couleurs fixe, des proportions de espacement prédéfinies). L’équipe peut ainsi partager et respecter strictement ces éléments soigneusement conçus. tailwind.config.js Utilisez des fichiers de configuration pour assurer une uniformité. De plus, il est possible d’utiliser ces fichiers en combinaison avec d’autres outils ou méthodes. @apply Utilisez des directives ou des systèmes de composants de frameworks JavaScript pour créer une bibliothèque de composants UI réutilisables et présentant un style cohérent.

Quelle est la différence entre Tailwind CSS et les approches traditionnelles de CSS dans JavaScript (comme styled-components) ?

Les deux objectifs sont différents, mais ils peuvent se compléter.Tailwind CSS Je travaille principalement au niveau HTML et des templates, en combinant des noms de classes pour définir les styles, en mettant l’accent sur la praticité et la vitesse de développement. CSS-in-JS, quant à lui, génère dynamiquement des styles pendant l’exécution du JavaScript. Il est particulièrement adapté pour gérer des styles très dynamiques et dépendants de l’état de l’application, tout en assurant une isolation parfaite des éléments de style. Dans les projets réels, les développeurs peuvent choisir l’une de ces approches en fonction de leurs besoins, ou même les combiner : par exemple, utiliser Tailwind pour gérer les layouts de base et les styles généraux, et CSS-in-JS pour les styles dynamiques et complexes.

Est-il nécessaire de disposer d’une solide base en CSS pour apprendre Tailwind CSS ?

Des connaissances de base en CSS sont nécessaires, mais il n’est pas nécessaire de devenir un expert. En fait,Tailwind CSS Les noms de classe correspondent parfaitement aux attributs CSS (par exemple…) flex, justify-center, text-whiteApprendre Tailwind, c’est également apprendre les meilleures pratiques en CSS. Pour les débutants, cela peut servir de bon “ soutien ” pour éviter les pièges courants lors de la rédaction de CSS complexe. À mesure que vous devenez plus familier avec les classes de Tailwind, votre compréhension du CSS de base s’enrichit également.