Créer un site Web moderne et réactif avec Tailwind CSS : du tutoriel de base à la mise en pratique.

Qu'est-ce que Tailwind CSS ?

Tailwind CSS est un framework CSS axé sur les fonctionnalités. Il permet aux développeurs de construire rapidement des interfaces utilisateur en fournissant une série de classes pratiques et combinables de niveau bas. Contrairement à des frameworks traditionnels tels que Bootstrap ou Foundation, qui proposent des composants préconstruits (comme des boutons ou des cartes), Tailwind CSS ne fournit pas de composants prêts à l’emploi.Tailwind CSS Permettez-vous de “ monter ” votre design en appliquant directement ces classes de granularité fine dans le HTML.

Sa philosophie fondamentale est “ l’utilité avant tout ”. Cela signifie que vous n’avez plus besoin d’écrire du CSS personnalisé pour chaque élément, ni de passer constamment d’un fichier HTML à un fichier CSS. Par exemple, pour créer un bouton avec un bord intérieur, un arrière-plan bleu et du texte blanc, vous pouvez simplement écrire ceci :

<button class="px-4 py-2 bg-blue-500 text-white rounded-lg">
  点击我
</button>

Dans cet exemple,px-4 et py-2 Des marges intérieures ont été définies séparément dans les directions horizontale et verticale.bg-blue-500 La couleur de fond a été définie.text-white La couleur du texte a été définie.rounded-lg Des coins arrondis ont été ajoutés. Cette approche a considérablement accéléré la vitesse de développement et facilité la maintenance, car les styles sont étroitement liés à la structure HTML, et les noms de classe sont eux-mêmes très explicites.

Lectures recommandées Maîtriser les concepts fondamentaux de Tailwind CSS : des classes pratiques à la mise en œuvre concrète du design responsive。

Comment commencer à utiliser Tailwind CSS ?

commencer à utiliser Tailwind CSS Il existe plusieurs méthodes pour le faire, la plus courante étant d’utiliser son outil CLI officiel ou de l’intégrer à des outils de construction (build tools).

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 →

Lancer rapidement grâce à la CLI Tailwind

C’est la manière la plus directe, particulièrement adaptée à l’apprentissage et au développement rapide de prototypes. Tout d’abord, vous devez initialiser le projet à l’aide de npm ou de yarn et installer les dépendances nécessaires. Tailwind CSS。

npm install -D tailwindcss
npx tailwindcss init

Cela créera un fichier de configuration. tailwind.config.jsEnsuite, créez un fichier CSS (par exemple…). src/input.css), et ajoutez les directives de Tailwind :

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

Ensuite, utilisez une commande CLI pour écouter les modifications apportées à ce fichier CSS et compiler le résultat final en CSS.

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

Enfin, introduisez le contenu généré dans votre fichier HTML. output.css Une fois le fichier téléchargé et installé, vous pouvez commencer à utiliser les classes pratiques fournies par Tailwind.

Lectures recommandées Maîtriser pleinement Tailwind CSS : guide pratique pour créer des pages web modernes et responsives。

Intégration avec les frameworks front-end

Tailwind CSS L’intégration avec les frameworks frontaux modernes se fait très facilement. Par exemple, dans des projets Vue ou React, il est possible de les intégrer à l’aide de PostCSS. Lors de l’utilisation de Create React App, il suffit d’installer les bibliothèques nécessaires.

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Cela générera tout en même temps. tailwind.config.js et postcss.config.js Fichier de configuration. Ensuite, dans le fichier CSS d’entrée du projet (par exemple…) src/index.cssAjoutez ces trois lignes dans le document. @tailwind Une simple instruction suffit.

Concepts clés et classes pratiques

Pour utiliser efficacement… Tailwind CSSIl est essentiel de comprendre son système de nommage des classes pratiques ainsi que les principes du design réactif.

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

Système de nommage pour les classes pratiques

Tailwind CSS Les noms de classe suivent un schéma de nommage cohérent, qui est généralement du type “ attribut-modificateur-valeur ”. Par exemple :
Marges :m-4(Tous les marges)mt-2(Marge supérieure)
– Couleur :text-gray-800，bg-red-300
– Dimensions :w-64(Largeur : 16rem)h-screen(Largeur : 100 % de la hauteur de l'écran)
Aménagement :flex，justify-center，items-center

Les chiffres correspondent généralement à un système de conception (espacement, taille de la police, etc.) et sont basés par défaut sur une unité de base de 4 pixels. De plus, ce système prend en charge des variantes de représentation en fonction de l’état de l’élément (par exemple, lorsqu’on passe le curseur dessus).hover:bg-blue-700), l’attention (focus:ring-2Il suffit d’ajouter un préfixe indiquant l’état devant le nom de la classe.

Construire un layout réactif

Tailwind CSS Adoptez une stratégie responsive axée sur les appareils mobiles. Les classes pratiques par défaut sont conçues pour les appareils mobiles ; pour appliquer des styles sur des écrans plus grands, il est nécessaire d’utiliser des préfixes responsive. Le système de points de rupture (breakpoints) inclut… sm, md, lg, xl, 2xl。

Lectures recommandées De l’initiation à la maîtrise : Apprenez à utiliser Tailwind CSS pour créer des sites web modernes et réactifs。

Par exemple, pour qu’un élément occupe la totalité de l’écran sur un téléphone portable, qu’il prenne la moitié de la largeur sur un écran de taille moyenne, et qu’il ne représente qu’un quart de la largeur sur un écran large, on peut le définir de la manière suivante :

<div class="w-full md:w-1/2 lg:w-1/4">
  <!-- 内容 -->
</div>

Cela rend la création d’interfaces réactives complexes extrêmement simple et intuitive, car toutes les règles de réactivité sont concentrées sur le même élément, ce qui les rend facilement visibles et compréhensibles.

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

Pratique : Créer un menu de navigation réactif

Considérons un exemple complet pour construire un barre de navigation réactive et moderne en utilisant les connaissances acquises.

Structure HTML et styles pour les appareils mobiles

Tout d’abord, nous construisons la structure de base. Sur les appareils mobiles, la barre de navigation contient généralement l’identité de la marque ainsi qu’un bouton représentant un menu en forme de hamburger.

<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">
      <!-- 品牌标识 -->
      <div class="flex-shrink-0">
        <span class="text-white text-xl font-bold">Mon site web</span>
      </div>
      <!-- 移动端菜单按钮 -->
      <div class="md:hidden">
        <button id="menu-btn" class="text-gray-300 hover:text-white focus:outline-none">
          <!-- 汉堡图标 SVG -->
          <svg class="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 class="hidden md:block">
        <div class="ml-10 flex items-baseline space-x-4">
          <a href="#" class="px-3 py-2 rounded-md text-sm font-medium text-white bg-gray-900">Accueil</a>
          <a href="#" class="px-3 py-2 rounded-md text-sm font-medium text-gray-300 hover:text-white hover:bg-gray-700">En ce qui concerne...</a>
          <a href="#" class="px-3 py-2 rounded-md text-sm font-medium text-gray-300 hover:text-white hover:bg-gray-700">Service</a>
          <a href="#" class="px-3 py-2 rounded-md text-sm font-medium text-gray-300 hover:text-white hover:bg-gray-700">Contacter</a>
        </div>
      </div>
    </div>
  </div>
  <!-- 移动端下拉菜单 -->
  <div id="mobile-menu" class="hidden md:hidden">
    <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
      <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-white bg-gray-900">Accueil</a>
      <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-white hover:bg-gray-700">En ce qui concerne...</a>
      <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-white hover:bg-gray-700">Service</a>
      <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-white hover:bg-gray-700">Contacter</a>
    </div>
  </div>
</nav>

Ici, nous utilisons… md:hidden et hidden md:block Cela permet de contrôler l'affichage et la dissimulation des différents éléments sur les versions desktop et mobiles.

Ajouter de l’interactivité et des possibilités de configuration personnalisée.

La barre de navigation nécessite JavaScript pour contrôler l’affichage et le rétractement du menu sur les appareils mobiles. Ajoutez un script simple :

<script>
  const menuBtn = document.getElementById('menu-btn');
  const mobileMenu = document.getElementById('mobile-menu');
  menuBtn.addEventListener('click', () => {
    mobileMenu.classList.toggle('hidden');
  });
</script>

De plus, vous pourriez souhaiter modifier la couleur du thème. Cela peut être fait en modifiant les paramètres correspondants. tailwind.config.js Cela peut être réalisé à l’aide de fichiers. Par exemple, pour étendre la palette de couleurs d’un thème :

module.exports = {
  theme: {
    extend: {
      colors: {
        'primary': '#3B82F6', // 自定义主色调
        'secondary': '#10B981',
      }
    }
  },
  variants: {},
  plugins: [],
}

Ensuite, vous pourrez utiliser ces noms dans les noms de classe. bg-primary et text-secondary Oui. Grâce au fichier de configuration, vous pouvez personnaliser entièrement tous les paramètres de design tels que les espaces, les polices de caractères et les points de rupture, afin qu’ils correspondent parfaitement à votre système de conception de marque.

résumés

Tailwind CSS En utilisant une approche axée sur la praticité, ce framework a complètement transformé la façon dont les développeurs rédigent leur CSS. Il intègre directement les décisions relatives aux styles dans les balises HTML, ce qui permet d’obtenir une efficacité de développement élevée et une grande cohérence dans la conception. Que ce soit pour débuter rapidement ou pour créer des composants réactifs complexes, son système de noms de classes intuitif et ses fonctionnalités de configuration avancées en font un outil idéal, que ce soit pour le prototypage rapide ou pour des projets de production à grande échelle. Maîtriser ses concepts fondamentaux – tels que la nomination des classes de manière pratique, l’utilisation de préfixes réactifs et la personnalisation des fichiers de configuration – est essentiel pour construire des sites web modernes et réactifs.

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 PurgeCSS (ou son moteur JIT intégré) est utilisé pour analyser vos fichiers de template HTML, JavaScript, etc., et supprimer automatiquement toutes les classes CSS qui ne sont pas utilisées. Le fichier CSS résultant pèse généralement seulement quelques kilooctets, ce qui le rend beaucoup plus compact que celui généré par de nombreux frameworks traditionnels.

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 que des couleurs et des proportions de espacement prédéfinies). De plus, l’équipe peut ensemble entretenir et étendre un cadre uniforme. tailwind.config.js Les fichiers de configuration permettent de définir les couleurs, les polices de caractères, les points d’arrêt (breakpoints) spécifiques à un projet, etc. L’utilisation de l’instruction `@apply` permet de regrouper des combinaisons de classes CSS répétitives en classes composées personnalisées, ce qui contribue également à améliorer la cohérence visuelle du site.

Comment supprimer ou personnaliser les styles d’un composant ?

Il existe principalement trois méthodes. La première consiste à utiliser des classes plus spécifiques et pratiques directement dans le HTML, ce qui est la méthode la plus courante. La deuxième consiste à étendre ou à modifier les paramètres du thème à partir d'un fichier de configuration. Enfin, la troisième méthode consiste à utiliser des fichiers CSS pour appliquer les modifications souhaitées. @apply Les instructions permettent de combiner plusieurs classes pratiques en une nouvelle classe, ou d’écrire du CSS personnalisé et de l’utiliser. @layer L'instruction permet d'injecter ce contenu dans Tailwind. base、components Ou utilities Dans les couches, il est possible de contrôler leur priorité.

Quelles bibliothèques ou frameworks d’interface utilisateur (UI) conviennent-ils d’utiliser avec Tailwind CSS ?

Tailwind CSS Il s’intègre parfaitement avec la quasi-totalité des frameworks frontaux modernes, tels que React, Vue, Angular, Svelte, etc. Il sert généralement de outil de style de base et fonctionne en collaboration avec les systèmes de composants de ces frameworks. De plus, il existe des bibliothèques de composants UI construites sur la base de Tailwind, comme Headless UI (des composants d’interaction sans style officiels), DaisyUI, Flowbite, etc. Ces bibliothèques proposent des composants prêts à l’emploi tout en vous permettant de personnaliser profondément leur apparence à l’aide de Tailwind.