Introduction et pratique de Tailwind CSS : Construire des sites web réactifs et modernes à partir de zéro

Dans le développement front-end moderne, la quête d’efficacité et de flexibilité reste un thème constant. Les méthodes traditionnelles de rédaction de CSS sont souvent associées à des problèmes tels que l’expansion des fichiers de style, les conflits de noms et les difficultés liées aux changements de contexte. Tailwind CSS En tant que framework CSS atomisé axé sur la praticité, il offre une multitude de classes d’outils à haute granularité, permettant aux développeurs de construire rapidement n’importe quel design directement dans le HTML, sans avoir à quitter le flux de document. Il ne s’agit pas d’une bibliothèque d’UI composée de composants prédéfinis, mais plutôt d’un système puissant destiné à la création de designs personnalisés. Cet article vous guidera pas à pas pour maîtriser ses concepts fondamentaux et vous aidera à créer un site web moderne et responsive.

Qu’est-ce que Tailwind CSS et quelle en est sa philosophie fondamentale ?

Tailwind CSS La philosophie fondamentale de [nom de la société] est “ L’utilité avant tout ”. Elle ne propose pas de fonctionnalités telles que… <button class=“btn btn-primary”> Ce n’est pas une classe de composants sématiques, mais plutôt un ensemble complet de classes d’outils atomisés, chacune étant responsable d’une seule et unique fonction de style. Par exemple…text-center Utilisé pour centrer le texte.p-4 Utilisé pour les marges intérieures.bg-blue-500 À utiliser pour un fond bleu.

L’avantage de cette approche est qu’elle permet d’accélérer considérablement le processus de développement. Les développeurs n’ont pas besoin de passer constamment d’un fichier HTML à un fichier CSS, ni de se creuser la tête pour trouver un nom approprié pour un élément. Toutes les décisions concernant les styles sont prises directement dans le langage de balisage, ce qui rend la création de prototypes et les itérations de conception extrêmement rapides.

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

Comparaison entre la priorité de l’efficacité pratique et le CSS traditionnel

Contrairement au CSS écrit à la main traditionnellement ou à l’utilisation de bibliothèques de composants comme Bootstrap, les styles fournis par les frameworks basés sur le principe de la “ praticité avant tout ” sont “ instantanés ”. Vous créez des styles de manière immédiate en combinant des noms de classes, plutôt que de définir une classe de style au préalable pour l’appliquer ensuite à des éléments. Cela évite l’accumulation de code de style inutilisé, car votre projet ne contient finalement que les classes que vous avez réellement utilisées. Grâce aux optimisations offertes par ces outils de construction… PurgeCSSCela permet de générer des fichiers CSS pour l’environnement de production de très petite taille.

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 →

Comment commencer à utiliser Tailwind CSS ?

montage Tailwind CSS Il existe plusieurs méthodes pour effectuer l’installation, mais la plus recommandée est d’utiliser Node.js et npm, puis d’intégrer le module dans votre processus de construction. Voici les étapes standard pour l’intégration à l’aide de PostCSS :

Tout d’abord, initialisez le projet à l’aide de npm et installez les dépendances nécessaires.

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

Cette commande créera un… tailwind.config.js Fichier de configuration. Ensuite, vous devez configurer le chemin du fichier de modèle afin que… Tailwind Il est possible de supprimer les styles inutilisés lors de la construction du produit.

Modifier tailwind.config.js Dans le fichier content Partie :

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

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [“./src/**/*.{html,js}”], // 根据你的项目结构调整路径
  theme: {
    extend: {},
  },
  plugins: [],
}

Ensuite, créez un fichier CSS principal (par exemple…). src/input.css), et ajoutez Tailwind Les instructions correspondantes.

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

Enfin, exécutez le processus de construction via une commande, ou intégrez-le à votre outil de packaging (comme Vite ou Webpack). Une méthode simple consiste à utiliser… package.json Script.

“scripts”: {
  “build”: “tailwindcss -i ./src/input.css -o ./dist/output.css --watch”
}

être en mouvement npm run build Ensuite, cela se produira… dist Un répertoire contenant tous les fichiers CSS de classes pratiques a été créé. Vous pouvez y faire référence dans votre HTML et commencer à les utiliser.

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

Maîtriser les outils essentiels et la construction des layouts.

Tailwind CSS La classe d’outils couvre presque toutes les propriétés CSS et suit un ensemble de conventions de nommage systématiques. Comprendre ces conventions est essentiel pour une utilisation efficace de cet outil.

Système de espacements et de dimensions

Tailwind Utiliser une méthode basée sur… rem L'échelle de distance par défaut de l'unité. Le format du nom de la classe est généralement… {属性}{方向}-{大小}Par exemple :
- p-4Appliquer dans toutes les directions (padding). 1rem Le padding (espace intérieur) de…
- mt-2Application 0.5rem Le marge supérieure (margin-top) de…
- mx-autoDéfinir la marge extérieure (margin) sur « auto » dans le sens horizontal est une pratique courante pour centrer les éléments de niveau bloc.

Les classes de tailles, comme… w-64(Largeur : 16rem)h-screen(La hauteur de 100vh suit également une logique similaire.)

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

La couleur et l'arrière-plan.

La structure des noms de classes de couleurs est la suivante : {属性}-{颜色}-{深浅}Par exemple :
- text-gray-800Sette la couleur du texte à un niveau de gris de 800.
- bg-indigo-600Sette la couleur de fond à un niveau de saturation de 600 pour la couleur indigo.
- border-red-300Sette la couleur du bordure à la teinte rouge de niveau 300.

La conception réactive et les points de rupture.

Tailwind Le design réactif adopte une stratégie axée sur les appareils mobiles. Les styles par défaut s’appliquent à toutes les tailles d’écran, mais pour les appliquer à des écrans plus grands, il est nécessaire d’ajouter un préfixe de point de rupture avant le nom du style concerné. Par exemple :
- text-smUtiliser une police de caractères petite sur tous les écrans.
- md:text-baseUtilisez la taille de caractère de référence sur les écrans de taille moyenne (≥768 px) et supérieure.
- lg:flexLe mode d'affichage est réglé sur « flex » sur les écrans grands (≥1024 pixels) et supérieurs.

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 une barre de navigation réactive et une zone dédiée aux héros

Maintenant, nous allons utiliser les connaissances que nous avons acquises pour créer une page web simple qui comprend un menu réactif et une zone dédiée au « héros » (l’élément central de l’histoire ou de l’application).

Construire une barre de navigation réactive

Nous allons créer une barre de navigation qui se plie sur les appareils mobiles et s’affiche horizontalement sur les ordinateurs de bureau.

<nav class="“bg-white" shadow-lg”>
  <div class="“max-w-6xl" mx-auto px-4”>
    <div class="“flex" justify-between”>
      <div class="“flex" space-x-7”>
        <a href="/fr/“/#”" class="“flex" items-center py-4”>
          <span class="“font-semibold" text-gray-500 text-lg”>Ma marque.</span>
        </a>
      </div>
      <!-- 桌面端导航链接 -->
      <div class="“hidden" md:flex items-center space-x-1”>
        <a href="/fr/“/#”" class="“py-4" px-2 text-gray-500 font-semibold hover:text-green-500 transition duration-300”>Accueil</a>
        <a href="/fr/“/#”" class="“py-4" px-2 text-gray-500 font-semibold hover:text-green-500 transition duration-300”>Service</a>
        <a href="/fr/“/#”" class="“py-4" px-2 text-gray-500 font-semibold hover:text-green-500 transition duration-300”>À propos de nous</a>
        <a href="/fr/“/#”" class="“py-4" px-2 text-gray-500 font-semibold hover:text-green-500 transition duration-300”>Contacter</a>
      </div>
      <!-- 移动端菜单按钮 -->
      <div class="“md:hidden" flex items-center”>
        <button class="“outline-none" mobile-menu-button”>
          <svg class="“w-6" h-6 text-gray-500” fill="“none”" stroke-linecap="“round”" stroke-linejoin="“round”" stroke-width="“2”" viewbox="“0" 0 24 24” stroke="“currentColor”">
            <path d="“M4" 6h16m4 12h16m4 18h16”></path>
          </svg>
        </button>
      </div>
    </div>
  </div>
  <!-- 移动端菜单内容 -->
  <div class="“hidden" mobile-menu md:hidden”>
    <a href="/fr/“/#”" class="“block" py-2 px-4 text-sm hover:bg-gray-200”>Accueil</a>
    <a href="/fr/“/#”" class="“block" py-2 px-4 text-sm hover:bg-gray-200”>Service</a>
    <a href="/fr/“/#”" class="“block" py-2 px-4 text-sm hover:bg-gray-200”>À propos de nous</a>
    <a href="/fr/“/#”" class="“block" py-2 px-4 text-sm hover:bg-gray-200”>Contacter</a>
  </div>
</nav>

Cette barre de navigation utilise… flex Layout, via… hidden md:flex et md:hidden Permet de contrôler l'affichage et la dissimulation des éléments sur différents écrans.

Construire la zone des héros

Ensuite, créez une zone pour le héros qui soit attrayante et captivante.

<section class="“bg-gradient-to-r" from-blue-50 to-indigo-100 py-20”>
  <div class="“max-w-6xl" mx-auto px-4 sm:px-6 lg:px-8 text-center”>
    <h1 class="“text-4xl" md:text-6xl font-extrabold text-gray-900 mb-6”>
      Construire l’avenir avec Tailwind CSS
    </h1>
    <p class="“text-lg" md:text-xl text-gray-700 max-w-3xl mx-auto mb-10”>
      Un framework CSS axé sur la praticité qui vous permet de construire rapidement des interfaces utilisateur modernes et réactives sans quitter le code HTML. Sayonara aux feuilles de style complexes et bienvenue à un processus de développement plus efficace.
    </p>
    <div class="“space-x-4”">
      <a href="/fr/“/#”" class="“inline-block" bg-indigo-600 text-white font-semibold py-3 px-8 rounded-lg shadow-md hover:bg-indigo-700 transition duration-300”>
        commencer à utiliser
      </a>
      <a href="/fr/“/#”" class="“inline-block" bg-white text-indigo-600 font-semibold py-3 px-8 rounded-lg shadow border border-indigo-600 hover:bg-gray-50 transition duration-300”>
        En savoir plus
      </a>
    </div>
  </div>
</section>

Cette zone utilise un arrière-plan avec un dégradé de couleurs. bg-gradient-to-rTaille de police réactive text-4xl md:text-6xl De plus, il y a des boutons qui affichent un effet de survol (lorsque l'on passe le curseur dessus).

résumés

Tailwind CSS Grâce à sa méthodologie unique axée sur la praticité, cet outil a complètement transformé la façon dont les développeurs créent leurs styles. Il déplace les décisions relatives aux styles des feuilles de style vers le langage de balisage, permettant de réaliser des designs complexes à l’aide de classes de petite taille combinées. Cela offre une efficacité de développement et une flexibilité de conception exceptionnelles. Bien qu’il faille au début mémoriser certaines conventions de noms de classes, une fois que l’on s’y est habitué, la vitesse de développement ainsi que les possibilités de personnalisation sans contraintes sont incomparables aux méthodes traditionnelles. Que ce soit pour des classes pratiques simples ou pour des layouts réactifs complexes…Tailwind Un système complet et extensible est proposé, parfaitement adapté au développement tout au long du processus, de la phase de prototype à la production.

FAQ Foire aux questions

Est-ce que Tailwind CSS rend le HTML trop lourd ?

Oui, mais il s’agit de trouver un équilibre. L’augmentation du nombre de noms de classe peut effectivement rendre le HTML plus complexe à lire. Cependant, cela améliore considérablement l’efficacité du développement et permet de mieux contrôler la taille des fichiers CSS. Grâce aux outils de construction de code qui suppriment les styles inutilisés, les fichiers CSS utilisés dans l’environnement de production sont généralement plus légers que ceux rédigés manuellement. De nombreux développeurs considèrent en effet que la gestion des styles à l’intérieur du HTML est plus simple que celle effectuée dans des fichiers CSS distincts.

Comment personnaliser le thème par défaut de Tailwind ?

La personnalisation se fait principalement en modifiant des éléments préexistants. tailwind.config.js Dans le fichier theme Cela peut être réalisé en partie. Vous pouvez facilement étendre ou modifier les configurations par défaut concernant les couleurs, les polices, les espacements, les points de rupture, etc. Par exemple, pour ajouter une couleur propre à votre marque, vous pouvez le faire en… theme.extend.colors Ajoutez une nouvelle paire de clé-valeur de couleur. Cette méthode de configuration permet à le système de conception de s’intégrer parfaitement au projet.

Avec quels frameworks front-end Tailwind CSS est-il compatible ?

Tailwind CSS Il s’intègre parfaitement avec la quasi-totalité des frameworks frontaux modernes, tels que React, Vue.js, Angular, Svelte, etc. L’entreprise édite également des guides d’installation et des meilleures pratiques adaptés à ces frameworks. Les fonctionnalités de ses outils s’accordent très bien avec les modèles de développement basés sur des composants ; le style de chaque composant est étroitement lié à sa structure de marqueur (HTML).

Dans un environnement de production, le fichier CSS final sera-t-il très volumineux ?

Non. C’est exactement ça. Tailwind CSS Les points remarquables de la conception : Lors de la création de la version finale destinée à la production, le système utilise… PurgeCSSDes outils similaires sont utilisés pour analyser vos fichiers de templates et ne conserver que les classes de fonctionnalités qui ont réellement été mises en œuvre, tout en supprimant tous les styles inutilisés. Le résultat est un fichier CSS qui ne pèse généralement que quelques kilooctets à quelques dizaines de kilooctets, ce qui en fait un fichier très compact et optimisé.