Partir de zéro : construire rapidement une page web moderne et réactive avec Tailwind CSS.

Au cours des dernières années, le domaine du développement front-end a connu l'émergence de frameworks CSS axés sur l'efficacité pratique (« Utility-First »). Tailwind CSS Il est sans aucun doute l’un des meilleurs outils de son genre. En proposant une série de classes pratiques et modulables, il a complètement révolutionné la façon dont les développeurs créent les interfaces utilisateur. Contrairement aux frameworks CSS traditionnels tels que Bootstrap,Tailwind CSS Aucun composant prêt à l’emploi n’est fourni ; plutôt, les outils de base permettent de créer ces composants soi-même. Ce changement de paradigme accélère le rythme de développement, offre un degré de personnalisation plus élevé et facilite la réalisation de designs entièrement réactifs.

Cet article vous guidera, pas à pas, pour apprendre à utiliser… Tailwind CSS Grâce à ses fonctionnalités puissantes, il est possible de créer des pages web réactives qui répondent aux normes modernes de manière efficace. Nous aborderons l’ensemble du processus, de la mise en place de l’environnement de développement à le déploiement final.

Les concepts fondamentaux et les avantages de Tailwind CSS

Avant d’approfondir ses connaissances, il est essentiel de comprendre… Tailwind CSS La philosophie de conception est cruciale. Son principe fondamental est l“” utilité avant tout » (Utility-First), ce qui signifie que les styles sont créés en appliquant directement de nombreuses classes petites et à usage unique dans le HTML.

Lectures recommandées Maîtriser Tailwind CSS : du guide pratique des outils atomiques au développement web réactif efficace.。

Le paradigme de la priorité de l’efficacité pratique

La méthode traditionnelle de rédaction de CSS vous oblige à créer des noms de classe sémantiques pour chaque composant (par exemple…). .btn-primaryEnsuite, définez les styles de ces classes dans un fichier CSS distinct. Tailwind CSS Alors, je vous encourage à utiliser directement des outils tels que… bg-blue-500 text-white font-bold py-2 px-4 rounded De tels ensembles de classes sont utilisés pour construire des boutons. Cette approche élimine le coût lié aux allers-retours constants entre les fichiers HTML et CSS, et tous les styles sont présentés de manière intuitive directement dans les balises.

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 →

Une grande personnalisation est possible.

Tailwind CSS Tous les styles sont gérés à travers un élément appelé… tailwind.config.js Le système est géré à l’aide d’un fichier de configuration. Dans ce fichier, vous pouvez facilement définir le système de conception du projet : la palette de couleurs, les polices de caractères, les proportions d’espacement, les points de rupture (utilisés pour le design responsive), etc. Cela signifie que vous pouvez personnaliser les styles entièrement selon le cahier des charges de conception, sans être limité par les thèmes par défaut du framework.

Soutien intégré au design réactif

Le design responsive est… Tailwind CSS Ses points forts résident dans son système de points d’arrêt axé sur les appareils mobiles. Cinq prédicats de points d’arrêt sont fournis par défaut :sm:, md:, lg:, xl:, 2xl:Il vous suffit d’ajouter ces préfixes devant les classes pratiques pour spécifier facilement les styles adaptés à différentes tailles d’écran.

<!-- 默认在移动端显示为块级元素，在中等屏幕及以上尺寸显示为行内块元素 -->
<div class="block md:inline-block">Éléments réactifs</div>

Initialisation du projet et configuration de l’environnement

commencer à utiliser Tailwind CSS Il existe plusieurs méthodes pour le faire, notamment via le CDN, l’utilisation d’outils CLI ou l’intégration avec des outils de construction de front-end. Afin d’obtenir la meilleure expérience (comme les modes JIT ou le Tree Shaking), nous recommandons d’utiliser l’outil en ligne de commande fourni ou d’intégrer le module avec PostCSS.

Démarrez rapidement en utilisant la CLI Tailwind.

C’est la manière la plus rapide de commencer. Tout d’abord, assurez-vous que Node.js est installé sur votre système. Ensuite, exécutez les commandes suivantes dans le répertoire du projet :

Lectures recommandées Partir de zéro : créer une interface web moderne et réactive avec Tailwind CSS.。

# 初始化 package.json 文件（如果不存在）
npm init -y

# 安装 Tailwind CSS
npm install -D tailwindcss

# 生成 tailwind.config.js 配置文件
npx tailwindcss init

Ensuite, créez un fichier d’entrée pour le CSS, par exemple… src/input.cssEt ajoutez… Tailwind CSS Les instructions :

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

Ensuite, exécutez la commande CLI pour générer votre CSS.

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

Cette commande va effectuer une écoute (ou surveillance) en continu. src/input.css Les modifications apportées au fichier sont détectées en temps réel, et le CSS compilé est ensuite affiché immédiatement. dist/output.cssEnfin, introduisez cela dans votre fichier HTML. ./dist/output.css C'est tout.

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

Intégration avec les outils de construction (à l’exemple de Vite)

Si vous utilisez des outils de construction frontale modernes tels que Vite, le processus d’intégration est beaucoup plus fluide. Après avoir créé un projet Vite, installez et configurez-le. Tailwind CSS：

# 创建 Vite 项目
npm create vite@latest my-project -- --template vanilla
cd my-project

# 安装 Tailwind CSS 及其依赖
npm install -D tailwindcss postcss autoprefixer

# 初始化配置文件
npx tailwindcss init -p

Cela générera… tailwind.config.js et postcss.config.js Deux fichiers. Ensuite, modifiez-les. tailwind.config.js Fichier, chemin du contenu de configuration :

/** @type {import('tailwindcss').Config} */
export default {
  content: ["./*.html", "./src/**/*.{js,ts}"], // 根据你的项目结构调整
  theme: {
    extend: {},
  },
  plugins: [],
}

Ensuite, dans votre fichier CSS principal (par exemple…) src/style.css…) et l’introduire dans… Tailwind CSS Instructions pour l’exécution. Maintenant, exécutez. npm run devVous pourrez alors l’utiliser dans votre projet. Tailwind CSS C'est fini.

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

Construire des composants réactifs à l’aide de Tailwind CSS

Après avoir maîtrisé la configuration de l’environnement, mettons-nous au travail pour créer quelques composants réactifs courants, afin de mieux comprendre leur fonctionnement.

Créer une barre de navigation

Une barre de navigation réactive est généralement disposée horizontalement sur les ordinateurs de bureau et se transforme en menu hamburger sur les appareils mobiles. Tailwind CSS Cela peut être facilement réalisé.

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 p-4">
  <div class="container mx-auto flex flex-wrap items-center justify-between">
    <!-- 品牌Logo -->
    <a href="#" class="text-white text-xl font-bold">Ma marque.</a>

<!-- 汉堡菜单按钮（移动端显示） -->
    <button class="md:hidden text-white focus:outline-none" id="menu-button">
      <svg class="w-6 h-6" fill="none" stroke="currentColor" viewbox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
      </svg>
    </button>

<!-- 导航链接 -->
    <div class="hidden w-full md:flex md:w-auto md:items-center" id="menu">
      <ul class="flex flex-col mt-4 md:flex-row md:space-x-8 md:mt-0">
        <li><a href="#" class="block py-2 text-gray-300 hover:text-white">Accueil</a></li>
        <li><a href="#" class="block py-2 text-gray-300 hover:text-white">En ce qui concerne...</a></li>
        <li><a href="#" class="block py-2 text-gray-300 hover:text-white">Service</a></li>
        <li><a href="#" class="block py-2 text-gray-300 hover:text-white">Contacter</a></li>
      </ul>
    </div>
  </div>
</nav>

<script>
  // 简单的 JavaScript 用于切换移动端菜单
  document.getElementById('menu-button').addEventListener('click', function() {
    const menu = document.getElementById('menu');
    menu.classList.toggle('hidden');
  });
</script>

Dans cet exemple,md:hidden et md:flex Les contrôles de ce type permettent de gérer l'affichage et la dissimulation des éléments à différents points de rupture (points de débogage).flex-col et md:flex-row La direction du layout a été contrôlée.

Créer une composante de type carte (card component).

La carte est un composant courant utilisé pour afficher du contenu sur les pages web. Voici un exemple de carte qui propose un effet de survol (« hover ») et des images réactives (adaptées à différentes tailles d'écran).

<div class="max-w-sm rounded overflow-hidden shadow-lg bg-white mx-auto my-8">
  <!-- 响应式图片容器 -->
  <div class="w-full h-48 md:h-64 overflow-hidden">
    <img class="w-full h-full object-cover hover:scale-105 transition-transform duration-300"
         src="https://picsum.photos/400/300"
         alt="Image de la carte">
  </div>
  <div class="px-6 py-4">
    <div class="font-bold text-xl mb-2 text-gray-800">Titre de la carte</div>
    <p class="text-gray-700 text-base">
      Voici un texte décrivant une carte : son layout et la taille de son texte s’adaptent automatiquement à l’écran, que ce soit sur appareils mobiles ou sur ordinateurs de bureau.
    </p>
  </div>
  <div class="px-6 pt-4 pb-6">
    <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">Étiquette #1</span>
    <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">Étiquette #2</span>
  </div>
</div>

Il est utilisé ici. h-48 md:h-64 Pour que la hauteur de l'image varie selon les différentes tailles d'écran,hover:scale-105 et transition-transform Un effet de mise en gros fluide lors du survol a été réalisé.

Astuces avancées et optimisation de la production

Au fur et à mesure que le projet prend de l’ampleur, maîtriser certaines techniques avancées et stratégies d’optimisation vous permettra d’utiliser vos outils de manière plus efficace. Tailwind CSS。

Utiliser l’instruction `@apply` pour extraire les classes répétées.

Bien que la priorité soit donnée à l’utilité, il est possible d’utiliser une classe plusieurs fois dans un projet lorsque celle-ci est réutilisée de manière répétée (par exemple, pour des boutons d’un style particulier). @apply L’instruction permet d’extraire ces éléments dans une classe CSS personnalisée, afin de maintenir la simplicité du code HTML.

Dans votre fichier CSS (par exemple…) input.cssAjoutez ceci dans le texte :

.btn-primary {
  @apply bg-blue-600 text-white font-semibold py-2 px-4 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-le directement dans le HTML. class="btn-primary" C'est tout.

Personnalisation avancée des fichiers de configuration

Ouvrez tailwind.config.jsVous pouvez effectuer des personnalisations complètes. Par exemple, vous pouvez étendre la gamme de couleurs disponibles pour le thème.

module.exports = {
  theme: {
    extend: {
      colors: {
        'brand-blue': '#1992d4',
        'brand-green': '#0ca678',
      },
      spacing: {
        '128': '32rem',
      }
    },
  },
  plugins: [],
}

Une fois défini, vous pouvez l’utiliser comme… bg-brand-blue et w-128 Voilà une nouvelle classe de ce type.

Activer le mode JIT et la compilation pour l’environnement de production

À partir de la version 3.0,Tailwind CSS L’engine Just-In-Time (JIT) est activé par défaut. Il génère les styles sur la demande lorsque vous écrivez vos templates, ce qui accélère considérablement le processus de développement et réduit la taille du fichier CSS final. Pour l’environnement de production, veillez à l’activer dans les commandes de compilation. NODE_ENV=production，Tailwind CSS Le processus de « Tree Shaking » se déclenche automatiquement, permettant de supprimer tous les styles qui ne sont pas utilisés.

Configurer des scripts dans le fichier `package.json` :

{
  "scripts": {
    "dev": "tailwindcss -i ./src/input.css -o ./dist/output.css --watch",
    "build": "NODE_ENV=production tailwindcss -i ./src/input.css -o ./dist/output.css --minify"
  }
}

être en mouvement npm run build Un fichier CSS compressé et optimisé sera obtenu.

résumés

Tailwind CSS Grâce à sa méthodologie axée sur les priorités, cette solution offre aux développeurs front-end un ensemble de styles efficaces, flexibles et facilement maintenables. Elle abandonne le modèle traditionnel qui consiste à passer d'un fichier à l'autre pour modifier les styles, intégrant directement les décisions relatives aux styles dans le processus de rédaction HTML, ce qui accélère le processus de développement. Ses puissants outils de réactivité et son système de configuration hautement personnalisable permettent de gérer facilement tout, des simples sites personnels aux applications d'entreprise complexes.

Bien qu’il faille mémoriser certains noms de classes au début, l’amélioration de l’efficacité de développement est significative une fois que l’on s’y est habitué. En combinant son moteur JIT et ses excellentes optimisations de production…Tailwind CSS Il s’agit sans aucun doute d’un outil puissant pour créer des pages web modernes et réactives.

FAQ Foire aux questions

Le CSS Tailwind peut-il rendre l’HTML trop encombrant à lire ou à visualiser ?

C’est effectivement une préoccupation courante. La vue de nombreux noms de classe dans un fichier HTML peut sembler au début déroutante. Cependant, cette “grosseur” du code offre une flexibilité et une vitesse de développement maximales. Vous n’avez plus besoin de réfléchir longuement aux noms de classe, ni de gérer un fichier CSS volumineux qui pourrait contenir de nombreux styles inutiles. De plus, vous pouvez utiliser… @apply Les instructions prévoient l’extraction des classes pratiques utilisées fréquemment en composants, afin de maintenir la clarté et l’organisation des modèles.

Comment masquer ou modifier les styles par défaut de Tailwind ?

Tailwind CSS La conception même de ce produit encourage la personnalisation et l’adaptation aux besoins de l’utilisateur. La principale méthode pour y parvenir consiste à modifier les éléments qui le composent. tailwind.config.js Fichier de configuration. Vous pouvez… theme.extend Vous pouvez ajouter de nouvelles valeurs pour étendre le thème par défaut, ou bien… theme La valeur existante de la clé est directement remplacée par la nouvelle valeur définie. Pour une modification de style ponctuelle, vous pouvez utiliser la notation avec des crochets pour générer n’importe quelle valeur souhaitée. Par exemple : top-[117px] Ou bg-[#1da1f2]。

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

Tailwind CSS Il s’intègre parfaitement avec la quasi-totalité des frameworks et bibliothèques frontales les plus répandus. Que ce soit des frameworks de composants tels que React, Vue, Angular ou Svelte, ou des meta-framesworks comme Next.js, Nuxt.js ou Gatsby, des guides d’intégration détaillés sont disponibles officiellement. Son modèle de conception basé sur les classes complète idéalement l’approche modulaire de ces frameworks ; vous pouvez utiliser directement les classes de Tailwind dans des fichiers JSX ou des templates Vue.

Dans un environnement de production, le volume final du fichier CSS sera-t-il très important (c’est-à-dire très volumineux) ?

Non, c’est bien ça. Tailwind CSS L’un des avantages majeurs de Tailwind CSS est son moteur de compilation JIT (Just-In-Time) ainsi que sa fonctionnalité puissante de purification des fichiers CSS (PurgeCSS), intégrée depuis la version v3+. Ces outils analysent automatiquement les fichiers de votre projet (HTML, JSX, composants Vue, etc.) lors de la génération de la version finale du site. Ils ne conservent que les classes CSS réellement utilisées dans le fichier de style résultant. Cela permet d’obtenir un fichier CSS très compact (généralement de quelques kilooctets seulement) et hautement optimisé.