Créer une page Web moderne et réactive : maîtriser le framework Tailwind CSS à partir de zéro.

Dans le domaine du développement front-end moderne, les frameworks CSS basés sur le principe « Utility-First » (l’utilité avant tout) deviennent la solution de prédilection pour construire des interfaces efficaces et faciles à entretenir. Parmi eux…Tailwind CSS Il se distingue par sa grande flexibilité et son efficacité de développement. Il diffère des bibliothèques de composants traditionnelles (comme…) BootstrapIl ne propose pas de composants de boutons ou de cartes prêts à l’emploi, mais plutôt un ensemble de classes de haut niveau de granularité qui permettent aux développeurs de construire n’importe quel design en combinant directement ces classes dans le HTML.

La philosophie fondamentale de cette méthode consiste à déplacer les décisions relatives aux styles hors des fichiers CSS et à les réintégrer dans le langage de balisage lui-même, ce qui élimine le fardeau cognitif lié aux allers-retours constants entre les feuilles de style et le code HTML. En utilisant des outils tels que… flex、pt-4、text-center et rotate-90 Avec de tels types de classes, vous pouvez construire des interfaces de manière intuitive tout en minimisant la taille des fichiers CSS.

Pourquoi choisir Tailwind CSS ?

Parmi les nombreux frameworks CSS,Tailwind CSS Ses avantages uniques en font la première option pour de nombreux développeurs et équipes.

Lectures recommandées Déverrouiller Tailwind CSS : un guide pratique du développement front-end, du niveau débutant au niveau expert.。

Une efficacité et une flexibilité de développement exceptionnelles.

L’écriture traditionnelle de CSS nécessite de nommer des classes pour chaque élément et de définir des règles dans des fichiers de style distincts. Ce processus entraîne souvent un nombre excessif de noms de classes et des conflits de styles. Tailwind CSS En fournissant un ensemble complet d’outils à niveau de détail, il vous est possible d’appliquer des styles directement dans le HTML. Par exemple, pour créer un bouton avec un bord intérieur, un arrière-plan bleu et du texte blanc, il vous suffit d’écrire ceci :

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 →

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

Cette méthode accélère considérablement la vitesse de conception des prototypes et des itérations de développement, car vous n’avez pas besoin de passer d’un fichier à l’autre, ni de vous soucier de la manière de nommer un style qui n’est utilisé que dans ce contexte.

Système de conception hautement personnalisable

Tailwind CSS Tout est configurable. Cela se fait à partir du répertoire racine du projet. tailwind.config.js Dans le fichier de configuration, vous pouvez contrôler entièrement le système de conception du projet. Vous pouvez définir votre propre palette de couleurs, les proportions des espaces, les points de débogage, la taille des polices, etc. Par exemple, vous pouvez facilement changer la couleur thème par défaut (bleue) pour la couleur de votre marque.

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'brand-blue': '#1a73e8',
      }
    }
  }
}

Une fois la configuration effectuée, vous pourrez l’utiliser dans votre projet. bg-brand-blue Voilà le type de classe en question. Ce design permet… Tailwind CSS Capable de s’intégrer parfaitement à n’importe quelle norme de conception existante, sans vous forcer à adopter l’esthétique d’un cadre préétabli.

Optimisation pendant la construction et un volume de production extrêmement réduit

Tailwind CSS utiliser PurgeCSS(Dans les versions plus récentes, cette fonction est appelée “ balayage du contenu ”) Elle vise à optimiser la construction des projets. Elle scanne les fichiers de votre projet (HTML, JavaScript, composants Vue, React) pour identifier toutes les classes d'outils utilisées, puis supprime tout le CSS inutilisé. Le résultat est un fichier CSS qui ne contient que les styles réellement nécessaires, ce qui permet généralement de le compresser en moins de 10 KB, améliorant ainsi considérablement les performances du site.

Lectures recommandées Découvrez Tailwind CSS : un guide pratique pour passer du niveau débutant au niveau expert.。

Comment commencer à utiliser Tailwind CSS ?

Il va Tailwind CSS L’intégration dans votre projet est très simple et se fait principalement de deux manières : soit en profitant d’une expérience rapide grâce à un CDN, soit en effectuant un développement professionnel à l’aide d’outils de construction.

Découvrez l’expérience rapide grâce au CDN (Content Delivery Network).

Pour l’apprentissage, la conception de prototypes ou des présentations simples, vous pouvez intégrer ces ressources directement via des liens CDN. Il suffit d’ajouter ces liens dans le fichier HTML. <head> Ajoutez le code suivant à l’intérieur de la balise :

<script src="https://cdn.tailwindcss.com"></script>

C’est la manière la plus rapide pour commencer, mais veuillez noter que cette méthode ne peut pas être utilisée. Tailwind CSS Certaines des fonctionnalités avancées, telles que la configuration personnalisée et les instructions…@apply、@variantsDe plus, et surtout, il ne prend pas en charge l’optimisation de l’environnement de production (opération de purge, ou “Purge”). Par conséquent, il n’est pas recommandé pour les projets de production officiels.

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

Installation professionnelle à l’aide de PostCSS

Pour les projets de niveau production, il est recommandé d’utiliser la méthode d’installation de PostCSS, car cela permet d’accéder à de nombreuses fonctionnalités avancées. Tailwind CSS Utilisez npm ou yarn pour initialiser le projet et installer les dépendances.

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

Ensuite, créez… postcss.config.js Fichier, et configurez-le pour qu’il soit utilisé. Tailwind CSS et Autoprefixer：

// postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}

Ensuite, dans votre fichier CSS principal (par exemple…) src/styles.cssDans ce document, il est fait référence à l’introduction de… Tailwind CSS Les instructions :

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

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

Enfin, assurez-vous que… tailwind.config.js Le fichier contient des informations sur les chemins de contenu, ce qui permet aux outils de procéder à un balayage et à une optimisation corrects.

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

Désormais, vous pouvez utiliser librement toutes les classes d'outils dans le HTML du projet ou dans les composants. Cela est possible en exécutant la commande de compilation (par exemple…). npm run build），Tailwind CSS Un fichier de style optimisé sera généré.

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

Core tool classes and responsive design

Tailwind CSS La classe d’outils couvre presque toutes les propriétés CSS les plus courantes et intègre un système de conception réactive puissant.

Aperçu des outils les plus couramment utilisés

Les classes d’outils suivent un modèle de nommage uniforme, ce qui les rend faciles à mémoriser. Par exemple :
Aménagement :flex, grid, block, hidden
Espacement :p-4(Padding)m-2(Marge extérieure)mt-8(Marge supérieure)
– Dimensions :w-full(Largeur : 100%)h-screen(La hauteur correspond à la hauteur de la fenêtre d'affichage.)
– Couleur :bg-gray-100(Couleur d'arrière-plan),text-red-500(Couleur du texte)
Mise en page :text-xl(Taille de la police)font-bold(Champ « poids des caractères »)text-center(Ajustement du texte)

Réaliser un layout responsive.

Le design responsive est… Tailwind CSS Ses points forts résident dans son système de points de contrôle (« breakpoints ») axé sur les appareils mobiles. Les styles par défaut sont conçus pour les appareils mobiles, et les styles qui doivent s’appliquer sur des écrans plus grands sont spécifiés à l’aide de préfixes. Les préfixes utilisés pour les points de contrôle incluent :
- sm: (640 pixels)
- md: (768 pixels)
- lg: (1024 pixels)
- xl: (1280 pixels)
- 2xl: (1536 pixels)

Par exemple, pour créer un layout avec deux colonnes qui s’affichent en surimposition sur les appareils mobiles et côte à côte sur les écrans de taille moyenne :

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

Vous pouvez également contrôler facilement la visibilité (affichage ou masquage) des éléments :hidden md:block Indique que l’élément s’affiche sur les écrans de taille moyenne et supérieure, et est caché sur les appareils mobiles.

État de survol et d'ancrage de la focale

Tailwind CSS Cela inclut également des variantes de statut, ce qui vous permet d’ajouter facilement des styles aux éléments interactifs. Il suffit d’ajouter un préfixe indiquant l’état avant la classe d’outil. hover:、focus:、active:。

<button class="bg-blue-500 hover:bg-blue-700 focus:ring-2 focus:ring-blue-300 ...">
  交互按钮
</button>

Vous pouvez même le faire dans le fichier de configuration, en utilisant des directives appropriées. variants Les options permettent de personnaliser les outils qui prennent en charge chacun des états possibles.

Les fonctionnalités avancées et la personnalisation.

Une fois que vous aurez maîtrisé les utilisations de base,Tailwind CSS Les fonctionnalités avancées mises à votre disposition vous aident à écrire du code plus concis et plus facile à maintenir.

Extraction des composants et réutilisation des styles.

Bien que l’utilisation directe de classes d’outils dans le HTML soit pratique, la rédaction répétée de la même combinaison de styles complexes dans plusieurs endroits peut sembler redondante. Dans ce cas, vous pouvez utiliser… @apply Les instructions permettent d’extraire les classes des composants dans le CSS.

/* 在你的CSS文件中，例如 styles.css */
.btn-primary {
  @apply px-4 py-2 bg-blue-600 text-white font-semibold rounded-lg shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75;
}

Ensuite, il est possible d’utiliser directement cette classe personnalisée dans le HTML :<button class=“btn-primary”>Cela conserve à la fois la commodité des outils et évite la répétition du code.

Utiliser des plugins pour étendre les fonctionnalités.

Tailwind CSS Disposer d’un vaste écosystème de plugins. Vous pouvez installer des plugins officiels ou ceux développés par la communauté pour ajouter de nouvelles fonctionnalités. Par exemple,@tailwindcss/forms Les plugins offrent des styles par défaut améliorés pour les éléments de formulaire.@tailwindcss/typography Les plugins permettent d’embellir rapidement le contenu HTML aléatoire provenant d’un système de gestion de contenu (CMS), comme les articles de blog. Une fois installés, il suffit de… tailwind.config.js de plugins Il suffit de l’incorporer dans l’array.

Configuration personnalisée avancée

Presque tous les jetons de conception peuvent être utilisés. tailwind.config.js Vous pouvez personnaliser cela à votre guise. Vous avez la possibilité d’y ajouter des fonctionnalités supplémentaires (ou de l’élargir).extendThème par défaut ; il est également possible de le remplacer entièrement.themePar exemple, il est possible de personnaliser les coins arrondis, les ombres, ou même d’ajouter de nouvelles variantes de types d’outils.

module.exports = {
  theme: {
    extend: {
      animation: {
        'spin-slow': 'spin 3s linear infinite',
      }
    }
  },
  variants: {
    extend: {
      backgroundColor: ['active'], // 为背景色工具类启用 active 状态
    }
  }
}

résumés

Tailwind CSS En adoptant une approche axée sur les priorités, cet outil a complètement transformé la façon dont les développeurs rédigent leur CSS. Il ramène les décisions relatives aux styles au niveau des balises et permet une vitesse de développement et une flexibilité de conception sans égales grâce à la combinaison de classes d’outils très fines. Son système de conception hautement personnalisable s’adapte parfaitement à n’importe quelle marque ou norme de conception, tandis que les optimisations lors de la construction garantissent des performances exceptionnelles pour le produit final. Que ce soit pour des prototypes rapides ou des applications complexes au niveau de l’entreprise…Tailwind CSS Tous ces outils proposent des solutions de style puissantes, efficaces et faciles à maintenir. Maîtriser l’un d’entre eux, c’est acquérir l’outil essentiel pour créer des interfaces web modernes et réactives.

FAQ Foire aux questions

Quelle est la différence entre Tailwind CSS et Bootstrap ?

Tailwind CSS Il s’agit d’un framework CSS axé sur la praticité (« Utility-First ») qui ne propose pas de composants prêts à l’emploi dotés de styles spécifiques (tels que des barres de navigation ou des cartes). Il offre plutôt des classes de base permettant de construire soi-même des composants entièrement personnalisés en les combinant.

Bootstrap Il s’agit d’une bibliothèque de composants traditionnelle qui propose une série de composants préconçus et dont le style est fixe. Bien qu’elle offre également quelques classes d’outils, son cœur est constitué de composants prêts à l’emploi. Bootstrap Il est possible de mettre en place rapidement des interfaces présentant un style cohérent, mais une personnalisation approfondie nécessite souvent de modifier un grand nombre de styles préétablis. Tailwind CSS La personnalisation complète est encouragée et mise en œuvre dès le niveau le plus bas (c’est-à-dire dès les fondements du système).

Écrire un grand nombre de noms de classes directement dans le HTML peut-il rendre le code plus complexe et difficile à comprendre ?

C’est une préoccupation courante au début. En réalité, il est beaucoup plus simple de voir des descriptions de styles intuitives dans le HTML, plutôt que d’avoir à écrire des règles pour d’innombrables noms de classes personnalisées dans un fichier CSS. flex items-center justify-betweenCela est souvent plus clair et plus facile à maintenir. Il élimine le besoin de naviguer entre les fichiers et de s’occuper de leur nommage.

Pour les combinaisons de styles complexes et répétitives, il est possible d’utiliser… @apply Les instructions ou les éléments constitutifs d’un framework composé (comme les composants de React ou Vue) doivent être encapsulés afin de maintenir la clarté et la lisibilité du code HTML. L’équipe peut également garantir la cohérence en établissant des conventions concernant la composition des noms de classes.

Comment ajouter des couleurs ou des tailles personnalisées à Tailwind CSS ?

Toutes les personnalisations se trouvent dans le répertoire racine du projet. tailwind.config.js Le fichier a été complété. Vous pouvez maintenant… theme.extend Ajoutez de nouveaux éléments de configuration sous l’objet pour étendre le thème par défaut.

Par exemple, pour ajouter une couleur personnalisée, on peut écrire comme ceci :

module.exports = {
  theme: {
    extend: {
      colors: {
        'custom-gray': '#f5f5f5',
      },
      spacing: {
        '128': '32rem',
      }
    }
  }
}

Ensuite, vous pourrez utiliser bg-custom-gray et w-128 Voilà un tel type de classe.

Tailwind CSS peut-il affecter les performances d'un site web ?

Au contraire,Tailwind CSS Après une configuration correcte, les performances sont généralement considérablement améliorées. Le processus de construction du produit utilise la technologie PurgeCSS, qui scanne tous vos fichiers de template et ne compile que les classes CSS réellement utilisées dans le fichier de style final. Cela signifie que le fichier CSS généré est très compact (souvent inférieur à 10 KB), ce qui réduit la charge des requêtes réseau et accélère le chargement des pages.

Le mode sombre est-il pris en charge ?

Oui.Tailwind CSS Une prise en charge du mode sombre prête à l’emploi est disponible dès l’installation. Vous pouvez donc l’utiliser immédiatement. tailwind.config.js En Chine, on peut obtenir un diplôme d'ingénieur en trois ans. darkMode: ‘class’ Ou darkMode: ‘media’ Pour l’activer, suivez les instructions. Une fois activé, vous pourrez l’utiliser. dark: Utilisez un préfixe de variante pour appliquer les styles dans le mode sombre.

Par exemple.dark:bg-gray-800 Cela indique que l'application utilisera un fond de couleur gris foncé en mode sombre. Si cette option est activée… ‘class’ En utilisant ce modèle, vous devez placer le code JavaScript dans l'élément racine HTML (comme <). <html>Ajouter ou supprimer manuellement class=“dark” Pour passer en mode différent ; si vous le configurez comme suit… ‘media’L'affichage s'adaptera automatiquement en fonction des préférences de couleur du système d'exploitation de l'utilisateur.