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

Qu'est-ce que Tailwind CSS ?

Tailwind CSS est un framework CSS axé sur les fonctionnalités. Il permet aux développeurs de créer rapidement des interfaces utilisateur personnalisées en fournissant un grand nombre de classes pratiques et combinables. Contrairement à des frameworks tels que Bootstrap, qui proposent des composants prédéfinis, Tailwind CSS ne fournit pas de composants complets, mais plutôt des classes CSS atomisées et détaillées, permettant d’écrire directement les styles dans le HTML.

Son concept fondamental est “ l’utilité avant tout ”. Cela signifie que vous n’avez pas besoin de passer constamment d’un fichier CSS à un fichier HTML, ni de vous creuser la tête pour donner des noms de classes aux composants. .card__header--activeVous n’avez qu’à combiner une série de classes d’outils décrivant les différentes propriétés visuelles d’un élément pour réaliser n’importe quel design. Par exemple, pour créer une carte avec des bords arrondis, des marges intérieures et un effet d’ombrage, il vous suffit d’écrire le code correspondant. class="rounded-lg p-6 shadow-md"Cette méthode a considérablement amélioré l’efficacité du développement tout en préservant la cohérence des styles.

Installation de l’environnement et configuration de base

Il existe plusieurs façons de commencer à utiliser Tailwind CSS, la plus répandue étant l’intégration de son outil en ligne de commande dans le processus de construction de projets.

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

Installer les paquets essentiels via npm

Tout d’abord, vous devez installer Tailwind CSS ainsi que ses dépendances via npm ou yarn. Exécutez les commandes suivantes dans le répertoire racine de votre 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 postcss autoprefixer
npx tailwindcss init

Cela installera Tailwind CSS, PostCSS pour la gestion du CSS, ainsi que Autoprefixer pour l’ajout automatique des prefixes de navigateur.npx tailwindcss init La commande générera un fichier de configuration par défaut. tailwind.config.js。

Configuration de l'emplacement des fichiers de contenu et génération du CSS

Ensuite, vous devez effectuer les configurations nécessaires. tailwind.config.js Les fichiers indiquent quels fichiers Tailwind doit parcourir pour générer les styles correspondants. content Ajoutez le chemin de votre fichier de modèle dans l'array.

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

Ensuite, créez un fichier CSS principal (par exemple…). src/input.css), et ajoutez les directives de Tailwind.

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

Enfin, exécutez le processus de construction depuis la ligne de commande pour convertir votre CSS fourni en un fichier de styles final et utilisable.

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

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

Maintenant, vous pouvez intégrer le contenu généré dans votre HTML. ./dist/output.css Vous avez téléchargé le fichier et commencé à utiliser les classes pratiques de Tailwind.

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

Les classes pratiques de Tailwind CSS couvrent la plupart des propriétés CSS et suivent un système de nommage rigoureux ainsi que des tokens de conception bien définis.

Aperçu des outils les plus couramment utilisés

Les noms des outils correspondent généralement directement aux propriétés CSS et utilisent des abréviations. Par exemple :
* Espacement :p-4 padding: 1rem;, m-2 (marge: 0.5rem), space-x-4 (Espacement horizontal entre les éléments enfants).
* Mise en page :text-lg (Taille de la police), font-bold (Épaisseur du caractère), text-center (Ajustement du texte.)
* Couleur :bg-blue-500 (Couleur de fond), text-gray-800 (Couleur du texte), border-red-300 (Couleur du cadre).
* Mise en page :flex, items-center (align-items: center), justify-between (justify-content: space-between).
* Dimensions :w-64 (largeur : 16rem), h-full (Largeur : 100%).
* Effet :rounded (Angles arrondis), shadow (Sombre), opacity-50 (Transparence).

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

Réaliser un layout responsive.

Tailwind utilise un système de points de rupture (breakpoints) axé sur les appareils mobiles. Les classes prédefinies sont conçues pour les appareils mobiles ; pour appliquer des styles sur des écrans plus grands, il est nécessaire d’ajouter les préfixes correspondants pour une réaction adaptative (responsive design).
Les prefixes des points d’arrêt comprennent :sm: (640 pixels), md: (768 pixels), lg: (1024 pixels), xl: (1280 pixels), 2xl: (1536 pixels).

Par exemple, le code suivant crée un layout avec une disposition empilée par défaut, où les éléments sont affichés côte à côte sur un écran de taille moyenne :

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

En combinant ces prefixes, vous pouvez facilement créer des interfaces réactives complexes qui s’adaptent à toutes les tailles d’écran.

Lectures recommandées Le guide ultime de Tailwind CSS : de la découverte à la maîtrise, pour créer des sites web modernes.。

Pratique : Créer un composant de barre de navigation

Mettons en pratique nos connaissances en créant un menu de navigation réactif et couramment utilisé. Ce menu s’affiche horizontalement sur les écrans grands et se transforme en un menu hamburger sur les écrans plus petits.

Rédiger la structure de base et les styles

Tout d’abord, nous créons la structure HTML de la barre de navigation et appliquons les styles de base.

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

<nav class="bg-gray-800 shadow-lg">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="flex items-center justify-between h-16">
      <!-- 网站Logo -->
      <div class="flex-shrink-0">
        <a href="#" class="text-white font-bold text-xl">Ma marque.</a>
      </div>
      <!-- 桌面端导航链接 -->
      <div class="hidden md:block">
        <div class="ml-10 flex items-baseline space-x-4">
          <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Accueil</a>
          <a href="#" class="bg-gray-900 text-white px-3 py-2 rounded-md text-sm font-medium">À propos de nous</a>
          <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Service</a>
          <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Contacter</a>
        </div>
      </div>
      <!-- 移动端菜单按钮 -->
      <div class="md:hidden">
        <button type="button" class="bg-gray-800 inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700">
          <!-- 汉堡菜单图标（简化版） -->
          <span class="sr-only">Ouvrir le menu principal</span>
          <svg class="block h-6 w-6" fill="none" viewbox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
          </svg>
        </button>
      </div>
    </div>
  </div>
</nav>

À ce stade, la navigation sur l'interface desktop est terminée. Nous utilisons… hidden md:block Afficher les liens de navigation de l'écran de bureau uniquement sur les écrans de taille moyenne et supérieure.

Ajouter de l’interactivité et un menu mobile.

Pour afficher un menu lorsque l'on clique sur un bouton sur un appareil mobile, nous avons besoin d'utiliser un peu de JavaScript. Ici, nous utilisons du JavaScript natif simple pour changer le classement d'un élément qui contrôle l'affichage du menu.
Tout d’abord, ajoutez des ID aux boutons du menu ainsi qu’au contenu du menu, et modifiez ces boutons de manière à qu’ils déclenchent une fonction lorsqu’on les clique.

<!-- 修改后的移动端菜单按钮 -->
<button id="mobile-menu-button" type="button" class="..."> ... </button>

<!-- 新增的移动端菜单内容，初始隐藏 -->
<div id="mobile-menu" class="md:hidden hidden">
  <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
    <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Accueil</a>
    <a href="#" class="bg-gray-900 text-white block px-3 py-2 rounded-md text-base font-medium">À propos de nous</a>
    <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Service</a>
    <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Contacter</a>
  </div>
</div>

Ensuite, ajoutez le script en bas de la page.

<script>
  const menuButton = document.getElementById('mobile-menu-button');
  const mobileMenu = document.getElementById('mobile-menu');

menuButton.addEventListener('click', () => {
    // 切换 'hidden' 类来显示/隐藏菜单
    mobileMenu.classList.toggle('hidden');
  });
</script>

À ce stade, un barre de navigation réactive et complète a été créée. En combinant différentes classes pratiques, nous avons réalisé ce composant sans avoir à écrire une seule ligne de code CSS personnalisé.

résumés

Tailwind CSS a complètement révolutionné la façon dont les développeurs créent leurs styles en adoptant une approche axée sur la praticité. Il déplace les décisions relatives aux styles des fichiers CSS vers les templates HTML, permettant une plus grande efficacité de développement et une meilleure cohérence visuelle grâce à l’utilisation de classes d’outils très fines. De la configuration de l’environnement de développement, à l’utilisation des classes d’outils de base, en passant par le système de points de rupture (breakpoints) réactifs et la construction de composants pratiques, Tailwind offre un flux de travail complet et efficace pour le développement d’interfaces modernes.

Bien qu’il soit nécessaire de mémoriser un grand nombre de noms de classes au début, les règles de nommage intuitives et la documentation de qualité vous aident à vous mettre en route rapidement. Pour les équipes et les projets qui cherchent à accélérer le rythme de développement, à bénéficier d’une plus grande liberté de conception et à contrôler la taille finale des fichiers générés, Tailwind CSS représente sans aucun doute une solution puissante et élégante.

FAQ Foire aux questions

Les fichiers de style de Tailwind CSS peuvent-ils être très volumineux ?

Non. Tailwind CSS utilise dans l’environnement de production la technologie PurgeCSS (actuellement appelée Content Scanning). Cette technologie analyse les fichiers de votre projet et ne compile que les classes que vous avez réellement utilisées dans le fichier CSS final. Cela permet de garantir que le fichier CSS généré soit très compact, pesant généralement entre quelques kilo-octets et une dizaine de kilo-octets.

Quels sont les principaux avantages de Tailwind CSS par rapport à Bootstrap ?

Tailwind CSS offre une plus grande liberté de personnalisation. Bootstrap propose des composants prêts à l’emploi, dotés d’un aspect spécifique ; pour les modifier, il est nécessaire de surcharger une grande quantité de code CSS. Tailwind, quant à lui, fournit des styles de base (des “ matériaux ”) que l’on peut combiner afin de créer des composants uniques parfaitement adaptés au cahier des charges graphiques. Cela permet d’éviter de devoir s’adapter aux styles par défaut du framework, ainsi que de réduire l’importance des codes CSS superflus.

Dans un projet d’équipe, comment maintenir la cohérence du code CSS écrit avec Tailwind ?

Il est possible d’utiliser à la fois les fichiers de configuration de Tailwind CSS et les plugins d’IDE. tailwind.config.js Les couleurs, les espacements, les polices de caractère et autres éléments de design des projets sont définis de manière uniforme. Les membres de l’équipe peuvent utiliser les plugins officiels pour VS Code ou IntelliJ IDE, qui offrent des fonctionnalités de complétation automatique, de mise en évidence du code syntaxique et de prévisualisation en survolant les éléments du code. Ces plugins aident à réduire les erreurs de saisie des noms de classes et à améliorer l’efficacité du développement.

Comment gérer des effets de survol (hover) ou des états de mise en évidence (focus) complexes dans Tailwind CSS ?

Tailwind CSS propose une gamme de préfixes riches pour les variantes de style (ou « états »), tels que… hover:, focus:, active:, disabled: Vous pouvez facilement les placer devant n’importe quelle classe d’outils. Par exemple,hover:bg-blue-600 focus:ring-2 focus:ring-blue-500 Il est possible de définir pour un bouton une couleur de fond au survol et un contour en anneau lorsqu’il reçoit le focus.