Guide pratique de Tailwind CSS : un tutoriel complet pour créer des pages web modernes et réactives.

Qu'est-ce que Tailwind CSS : un framework CSS axé sur l'utilité.

Tailwind CSS est un framework CSS “ axé sur les fonctionnalités ”, qui présente des différences fondamentales en termes de philosophie de conception par rapport aux frameworks traditionnels que nous connaissons, tels que Bootstrap et Foundation. Les frameworks traditionnels fournissent une série de classes de composants préfabriquées et dotées d'une sémantique spécifique, par exemple : .btn、.cardLes développeurs créent des interfaces en combinant ces composants. Tailwind, quant à lui, propose de nombreuses classes utilitaires très précises et spécialisées, qui correspondent directement à des attributs CSS spécifiques.

Par exemple, pour créer un bouton avec une marge intérieure de 1 rem, un arrière-plan bleu et un texte en gras blanc, dans Tailwind, il suffit d’ajouter un nom de classe à l’élément HTML. p-4 bg-blue-600 text-white font-boldChaque nom de classe est comme un atome, exécutant une tâche de style spécifique :p-4 Définissez la marge intérieure.bg-blue-600 Définissez la couleur d'arrière-plan.text-white Définissez la couleur du texte.font-bold Définissez la taille des caractères. L'avantage de cette méthode est que vous n'avez pas besoin de quitter le fichier HTML pour écrire et maintenir de nombreux CSS personnalisés. Tous les styles sont exprimés directement dans le modèle à l'aide de noms de classe, ce qui accélère considérablement le développement et assure la cohérence des styles.

La philosophie de conception centrale.

Le cœur de la philosophie de la priorité pratique réside dans la “ composabilité ” et la “ contraintabilité ”. En fournissant un ensemble de normes de conception prédéfinies (telles que l'espacement, la couleur et la taille de police), Tailwind oblige les équipes à maintenir une cohérence dans leur design. Les développeurs n'ont plus besoin de se demander si un élément doit utiliser... 16px néanmoins 18px Nous ne devrions pas nous disputer à propos des marges intérieures, il suffit de les prendre telles qu'elles sont fournies par le cadre. p-4 (1rem) ou p-5 Il suffit de choisir parmi (1,25 rem). Cela réduit considérablement la fatigue liée à la prise de décision et génère un code de style hautement prévisible et facile à entretenir.

Lectures recommandées Guide d’introduction à Tailwind CSS : créer une page Web moderne et réactive à partir de zéro.。

La configuration de l'environnement et les paramètres de base.

Il existe différentes manières de commencer à utiliser Tailwind CSS. La plus recommandée est de l’installer via son plug-in PostCSS officiel, ce qui permet d’exploiter au maximum ses fonctionnalités, telles que le mode JIT (compilation instantanée) et l’optimisation Tree Shaking.

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 →

Tout d’abord, utilisez npm ou yarn pour initialiser le projet et installer Tailwind et ses dépendances. La commande d’installation principale est la suivante : npm install -D tailwindcss postcss autoprefixerEnsuite, exécutez npx tailwindcss init Pour générer un fichier de configuration. tailwind.config.js。

Dans tailwind.config.js Dans le fichier, les paramètres de configuration les plus importants sont : contentVous devez ici spécifier les fichiers que Tailwind doit analyser pour rechercher les noms de classes utilisés, afin d’éliminer les styles inutilisés lors de la construction de la production et de générer un fichier CSS aussi petit que possible. La configuration d’un projet Vue ou React typique est la suivante :

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

Ensuite, créez un fichier CSS principal (par exemple ). src/index.css Ou src/styles/tailwind.css) et ajoutez les directives Tailwind :

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

Enfin, dans la configuration de votre outil de build (comme Vite ou Webpack), assurez-vous que PostCSS est correctement configuré et que ce fichier CSS est importé dans l’entrée du projet. Une fois ces étapes effectuées, vous pourrez commencer à utiliser les classes utilitaires de Tailwind dans votre HTML ou vos composants.

Lectures recommandées Guide d’introduction à Tailwind CSS : créer une interface réactive et moderne à partir de zéro.。

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

La bibliothèque de Tailwind couvre tous les aspects du CSS, du layout, de l'espacement et de la typographie aux arrière-plans, aux bordures et aux effets spéciaux. Son système de nommage est intuitif et cohérent, ce qui le rend facile à apprendre et à mémoriser.

Le système de mise en page et d'espacement.

Les classes de mise en page telles que flex, grid, block, inline-block etc., correspondant chacun à une propriété CSS. Le système d'espacement est basé sur une valeur par défaut. 0.25rem Échelle de multiples. Par exemple,m-4 Exprimez margin: 1rem，p-2 Exprimez padding: 0.5rem. Utiliser la direction t (Haut)r (à droite)b (en bas)l (à gauche),x (Niveau),y (verticalement) pour spécifier, par exemple : mt-8, px-4。

Mise en œuvre de la conception réactive.

La conception réactive de Tailwind est l'une de ses caractéristiques les plus puissantes. Le framework fournit cinq points d'arrêt par défaut :sm (640px) ,md (768px) ,lg (1024 pixels),xl (1280 pixels),2xl (1536 pixels). Pour appliquer un style réactif, il suffit d’ajouter un préfixe de point de rupture avant toute classe utile. Le style prendra effet à partir de ce point de rupture et s’appliquera aux niveaux supérieurs.

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

Par exemple, le code suivant crée un élément plein écran de largeur par défaut, qui devient de la largeur du conteneur et est centré sur les écrans de taille moyenne et supérieure :

<div class="w-full md:max-w-2xl md:mx-auto p-4">
  <!-- 内容 -->
</div>

Cette approche “ mobile first ” signifie que vous concevez d’abord un style pour les petits écrans (sans classes préfixées), puis vous l’utilisez ensuite. md:、lg: Les préfixes tels que « md- » et « @media » permettent de masquer ou d’ajouter des styles pour les grands écrans, ce qui rend la création d’interfaces réactives complexes extrêmement simple et claire.

Caractéristiques avancées : survol, mise au point et personnalisation.

En plus de la réactivité de base, Tailwind prend également en charge les styles d’état tels que le survol, la mise en évidence et l’activation grâce aux variantes.

Lectures recommandées Introduction à Tailwind CSS et mise en pratique : créer un site Web moderne et réactif à partir de zéro.。

Variantes d'état

Vous pouvez directement ajouter un préfixe d'état avant le nom de la classe pour appliquer le style correspondant à cet état. Par exemple,hover:bg-blue-700 Un arrière-plan bleu plus foncé sera appliqué lorsque la souris sera positionnée au-dessus de l'élément ;focus:ring-2 focus:ring-blue-500 Cela ajoute un contour bleu lorsque l'élément obtient le focus, ce qui est très utile pour améliorer l'accessibilité du formulaire. D'autres variantes courantes incluent : active:, disabled:, group-hover:(Cela prend effet lorsque la souris est positionnée sur l'élément parent, etc.)

Des thèmes et des plugins personnalisés.

Bien que Tailwind propose une gamme complète de dimensions de design par défaut, vous pouvez tout à fait le personnaliser en profondeur. tailwind.config.js Les documents de theme.extend Pour la partie personnalisée, vous pouvez ajouter, modifier ou supprimer des valeurs de thème.

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

Par exemple, pour ajouter une couleur de marque et une échelle d'espacement plus grande :

module.exports = {
  theme: {
    extend: {
      colors: {
        'brand': '#3a86ff',
      },
      spacing: {
        '128': '32rem',
      }
    },
  },
}

Ensuite, vous pourrez utiliser bg-brand et w-128 Voilà un exemple de tel classement. De plus, Tailwind dispose d’un écosystème de plugins très actif : vous pouvez ajouter de nouvelles classes pratiques en installant des plugins, comme ceux proposés officiellement. @tailwindcss/forms Les plugins peuvent améliorer l'apparence des éléments de formulaire.

résumés

Tailwind CSS a complètement changé la façon dont les développeurs écrivent et maintiennent les styles grâce à son approche pragmatique. Il déplace les décisions de style des fichiers CSS vers les modèles HTML, en offrant une efficacité de développement élevée et une cohérence de conception exceptionnelle grâce à un ensemble de classes atomiques contraignantes et modulaires. Son système réactif intégré et ses variantes d’état rendent la création d’interfaces web modernes et interactives intuitive et efficace. Bien qu’il soit nécessaire de mémoriser certains noms de classes au début, une fois que vous aurez maîtrisé son modèle de nommage, votre vitesse de développement augmentera considérablement. Pour les projets qui recherchent un développement rapide, une collaboration d’équipe et une systématisation de la conception, Tailwind CSS est sans aucun doute un outil puissant et très précieux.

FAQ Foire aux questions

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

Non, c'est l'un des principaux avantages de Tailwind. Lors de la construction en production, Tailwind utilise PurgeCSS (ou l'optimisation intégrée du moteur JIT) pour analyser minutieusement les fichiers de votre projet et n'empaqueter que les CSS correspondant aux noms de classes réellement utilisés. Les fichiers CSS générés sont généralement de quelques kilo-octets à une dizaine de kilo-octets, ce qui est bien plus petit que les fichiers CSS de nombreux frameworks traditionnels ou de projets utilisant du CSS écrit manuellement.

Dans les projets d'équipe, écrire beaucoup de noms de classes en HTML ne risque-t-il pas de rendre le code trop désordonné ?

C'est effectivement une préoccupation courante. La pratique montre que, grâce à un bon retour à la ligne et à un bon ordre (il est possible d'utiliser le plug-in Prettier pour un formatage automatique), la liste des noms de classes peut rester lisible. Plus important encore, ce “ désordre ” est local et clair, ce qui évite les coûts de “ sauts ” et les conflits de styles potentiels qui résultent de la séparation entre la définition et l'application des styles dans les CSS traditionnels. De nombreuses équipes considèrent que ce “ désordre ” explicite et local est plus facile à maintenir que l“” ordre » implicite et global.

Est-ce que Tailwind CSS est adapté pour être utilisé avec des bibliothèques de composants (comme React, Vue) ?

C'est une solution idéale, voire parfaite. Dans les composants React ou Vue, vous pouvez extraire un ensemble de classes Tailwind en un composant de style réutilisable. Par exemple, un composant de bouton encapsule tous les classes Tailwind nécessaires et expose une interface de propriétés simple. De cette façon, vous profitez des avantages du développement rapide de prototypes de Tailwind tout en maintenant l'abstraction et la réutilisabilité au niveau des composants. De plus, grâce au mode JIT, Tailwind peut traiter correctement même si les noms de classes sont concaténés dynamiquement.

Comment masquer le style des composants tiers ?

Lorsque vous utilisez une bibliothèque de composants d’interface utilisateur tiers avec son propre style, les classes utilitaires de Tailwind peuvent généralement masquer facilement le style en ligne ou la classe par défaut du composant en raison de leur forte spécificité. Il vous suffit d’ajouter vos propres classes Tailwind au composant. Si vous rencontrez des problèmes de spécificité insuffisante, vous pouvez utiliser les classes utilitaires de Tailwind. !important Les modificateurs, ajoutés après le nom de la classe. !Par exemple… bg-red-500!Cependant, cela devrait être utilisé avec prudence en dernier recours. Il serait préférable de voir si l’on peut directement configurer ou remplacer ce composant tiers.