Dans le domaine du front-end, où l'on recherche aujourd'hui l'efficacité du développement et la cohérence de la conception,Tailwind CSS Il se distingue par sa philosophie unique axée sur l'utilité. Ce n'est pas un framework traditionnel proposant des boutons prédéfinis ou des composants de cartes, mais plutôt une collection de classes utilitaires. Les développeurs peuvent rapidement créer n'importe quel design personnalisé directement dans le HTML en combinant ces classes granulaires, sans avoir à basculer constamment entre les fichiers CSS et HTML, ce qui accélère considérablement le développement et la création de prototypes. Ses principaux avantages résident dans sa grande personnalisabilité, la facilité de mise en œuvre de la conception réactive et l'utilisation de PurgeCSS (maintenant appelé Tailwind CSS). @tailwindcss/jit Ou une fonction de nettoyage intégrée qui supprime automatiquement les styles non utilisés, pour générer un fichier CSS extrêmement réduit pour l'environnement de production.
Les concepts de base et l'installation et la configuration.
Pour comprendre Tailwind CSSTout d’abord, il est nécessaire de maîtriser sa philosophie de “ priorité à l’utilité ”. Cela signifie que le style est appliqué par une série de classes à responsabilité unique, par exemple. text-blue-500 Pour mettre du texte en bleu,p-4 Pour définir les marges intérieures,flex Il est utilisé pour activer la disposition Flexbox. En combinant ces classes, vous pouvez réaliser des conceptions visuelles complexes.
Initiation et installation du projet.
commencer à utiliser Tailwind CSS Il existe plusieurs façons de le faire. La plus recommandée consiste à l’installer en tant que plug-in PostCSS via npm ou yarn, ce qui permet d’accéder à toutes ses fonctionnalités de personnalisation. Tout d’abord, initialisez le projet et installez les dépendances à l’aide de la ligne de commande.
Lectures recommandées Créer une page Web moderne et réactive : maîtriser le framework Tailwind CSS à partir de zéro.。
npm init -y
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss initCette commande va créer un tailwind.config.js Le fichier de configuration et un postcss.config.js Le fichier (si nécessaire). Ensuite, dans votre fichier CSS principal (par exemple <). src/styles.cssNous allons maintenant introduire les directives de Tailwind dans le code.
@tailwind base;
@tailwind components;
@tailwind utilities;Enfin, configurez PostCSS dans le processus de construction pour traiter ce fichier, ou utilisez-le. npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch Ordonnez une compilation en temps réel.
Pratique du design pratique et réactif
Tailwind CSS Il fournit des classes pratiques couvrant presque toutes les propriétés CSS. Ses règles de nommage sont intuitives et sont généralement associées aux valeurs des propriétés CSS, ce qui facilite l’apprentissage.
Les styles et la mise en page de base.
En combinant les noms de classes, vous pouvez rapidement créer un composant de carte. Par exemple, le code suivant crée un conteneur avec une ombre, des coins arrondis, des marges internes et une disposition flexible.
<div class="bg-white shadow-md rounded-lg p-6 flex items-center">
<img class="w-16 h-16 rounded-full mr-4" src="avatar.jpg" alt="Avatar">
<div>
<h2 class="text-xl font-bold text-gray-800">Zhang San</h2>
<p class="text-gray-600">Développeur front-end</p>
</div>
</div>Ici,bg-white Définissez la couleur d'arrière-plan.shadow-md Ajoutez une ombre moyenne.rounded-lg Définissez les grands coins arrondis.p-6 Définissez une marge intérieure de 1,5 rem.flex et items-center La mise en page verticalement centrée de Flexbox a été réalisée.
Lectures recommandées Déverrouiller Tailwind CSS : un guide pratique du développement front-end, du niveau débutant au niveau expert.。
Réaliser un point de rupture réactif.
Le design responsive est… Tailwind CSS C'est l'un des points forts de Chrome. Il fournit par défaut cinq préfixes de points d'arrêt :sm:, md:, lg:, xl:, 2xl:Vous pouvez facilement définir des styles pour différentes tailles d'écran.
<div class="text-center p-4 bg-blue-100 md:bg-green-100 lg:bg-yellow-100">
<h1 class="text-2xl sm:text-3xl md:text-4xl font-bold">Des titres réactifs.</h1>
<p class="mt-2 text-gray-700">Sur les appareils mobiles, l'arrière-plan est bleu clair, sur les écrans de taille moyenne, il est vert clair, et sur les grands écrans, il est jaune clair.</p>
</div>Cela signifie que, par défaut (sur mobile), l'arrière-plan est bleu clair.bg-blue-100; Lorsque la largeur de l'écran atteint md Lorsque la largeur de l'écran atteint 768 pixels, l'arrière-plan devient vert clair. lg Lorsque la largeur de l'écran atteint 1024 pixels, l'arrière-plan devient jaune clair. La taille de la police du titre augmente également au fur et à mesure que la taille de l'écran augmente.
Des stratégies de personnalisation et d'optimisation avancées.
même si Tailwind CSS Il est prêt à l’emploi, mais sa véritable force réside dans sa grande personnalisabilité. Vous pouvez l’adapter à votre système de design en utilisant des fichiers de configuration.
Des jetons conçus sur mesure.
tailwind.config.js Les fichiers sont au cœur de la personnalisation. Vous pouvez ici modifier ou remplacer les couleurs, les polices, les espacements, les points de rupture, etc. du thème.
module.exports = {
content: ['./src/**/*.{html,js}'],
theme: {
extend: {
colors: {
'brand-blue': '#1992d4',
},
spacing: {
'72': '18rem',
'84': '21rem',
}
},
},
plugins: [],
}Après la définition, vous pourrez l'utiliser dans votre projet. text-brand-blue Ou p-84 C'est une classe personnalisée comme celle-là. Dans le fichier de configuration, content Les champs sont extrêmement importants, car ils indiquent... Tailwind CSS Quels fichiers doivent être scannés pour effectuer un nettoyage de style ?
Extraction des composants et utilisation des plug-ins.
Afin d'éviter de répéter des listes de classes longues et répétitives dans le HTML, vous pouvez utiliser
pour insérer une ligne vide. @apply L'instruction consiste à extraire les styles communs dans CSS et à créer une classe de composant personnalisée.
Lectures recommandées Découvrez Tailwind CSS : un guide pratique pour passer du niveau débutant au niveau expert.。
.btn-primary {
@apply py-2 px-4 bg-brand-blue 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;
}En outre, il existe une multitude de plugins officiels et communautaires (tels que...). @tailwindcss/forms, @tailwindcss/typographyIl peut vous fournir des collections de classes pratiques supplémentaires, prêtes à l'emploi, pour étendre encore les fonctionnalités.
Les meilleures pratiques pour la construction d'un environnement de production.
Dans l'environnement de développement,Tailwind CSS Cela générera un fichier CSS volumineux qui contiendra toutes les classes possibles. Pour obtenir les meilleures performances en production, il est indispensable de supprimer les styles inutilisés.
Configurez l'option Purge.
Dans les versions modernes de Tailwind CSS En Chine, la fonction de nettoyage est activée via un fichier de configuration. content Le champ est activé automatiquement. Assurez-vous que ce champ indique correctement le chemin des fichiers de modèle contenant les noms de classes.
module.exports = {
content: [
'./public/**/*.html',
'./src/**/*.{js,jsx,ts,tsx,vue}',
],
// ... 其他配置
}Lors de la construction de la version de production,Tailwind CSS Nous analysons ces fichiers de manière statique et n’incluons que les noms de classes qui apparaissent dans le fichier CSS final. Cela permet généralement de réduire la taille du fichier de plusieurs méga-octets à quelques kilo-octets.
Des conseils pour optimiser les performances.
En plus du nettoyage des styles, vous pouvez envisager les optimisations suivantes : activer la compression CSS (par exemple, en utilisant cssnano), utiliser un CDN pour charger les polices et les icônes, et exploiter les fonctionnalités de superposition et d'héritage des navigateurs pour réduire l'imbrication inutile des noms de classes. Pour les projets utilisant des frameworks JavaScript (tels que React ou Vue), veillez à ce que les chaînes de noms de classes créées dynamiquement (par exemple, <) soient correctement construites. text-${color}-500content Dans le chemin, ou utilisez l'option de liste de sécurité (safelist) pour empêcher que ces classes dynamiques soient supprimées par erreur.
résumés
Tailwind CSS Grâce à son approche axée sur la praticité, il a complètement changé la façon dont les développeurs écrivent du CSS. Il a déplacé les décisions de style des feuilles de style vers la couche de balisage, permettant une vitesse de développement incroyable, un langage de conception cohérent et une taille de package de production minimale. Du prototypage rapide à l'interface réactive complexe, en passant par de puissants outils de personnalisation et d'optimisation,Tailwind CSS Il est devenu l'un des outils privilégiés pour créer des interfaces frontales modernes, efficaces et maintenables. Maîtriser cet outil signifie que vous avez la capacité de fournir rapidement une interface utilisateur de haute qualité.
FAQ Foire aux questions
Est-ce que Tailwind CSS rend le code HTML trop lourd ?
En effet, l'utilisation de Tailwind CSS De nombreux noms de classes sont ajoutés aux éléments HTML, ce qui peut rendre le HTML plus complexe. Cependant, ce “ gonflement ” permet d’améliorer considérablement l’efficacité du développement et de réduire considérablement la taille des fichiers CSS. Cela peut être réalisé par la modularisation (dans des frameworks tels que React, Vue, etc.) ou en utilisant . @apply L'instruction permet d'extraire les modèles de style répétés, ce qui permet de gérer et de réduire efficacement la liste des classes répétées, tout en maintenant la lisibilité du code.
Dans les projets d'équipe, comment garantir une utilisation cohérente de Tailwind CSS ?
Afin d’assurer la cohérence, l’équipe doit maintenir et respecter ensemble ces règles. tailwind.config.js Le design défini dans le style guide (couleurs, espacement, taille de police, etc.) permet d'établir des règles de codage et de convenir d'un mode d'extraction des styles courants (par exemple, quand utiliser <). @apply (Créer une classe de composant). En même temps, l’utilisation de l’插件 de suggestions intelligentes Tailwind CSS de l’éditeur et des outils de formatage de code (tels que le plug-in Tailwind de Prettier) permet d’ordonner automatiquement les noms de classe, d’uniformiser le style d’écriture et de réduire les divergences.
Est-ce que Tailwind CSS est compatible avec les frameworks CSS ou d’interface utilisateur existants ?
C'est compatible.Tailwind CSS La conception est non intrusive. Vous pouvez utiliser à la fois les classes utilitaires de Tailwind et votre propre CSS traditionnel ou les styles d'autres frameworks d'interface utilisateur (tels que Bootstrap) dans votre projet. Pour éviter les conflits de styles, vous devez faire attention à l'ordre de chargement du CSS et à la spécificité des sélecteurs. Il est généralement recommandé d'utiliser les classes de Tailwind en premier. base La couche est placée en avant, car elle contient le style de réinitialisation. Dans la pratique, il est plus courant de migrer progressivement les projets existants vers Tailwind, plutôt que d'utiliser plusieurs frameworks en même temps.
Comment ajouter des classes utilitaires personnalisées à Tailwind CSS ?
Il existe deux méthodes principales pour ajouter des classes utilitaires personnalisées. La première consiste à le faire dans le cadre de la configuration du projet. tailwind.config.js Les documents de theme.extend Vous pouvez effectuer des extensions partielles, telles que l'ajout de couleurs ou d'espacements personnalisés, ce qui générera automatiquement les noms de classes correspondants. La deuxième méthode consiste à rédiger votre propre fichier CSS et à l'utiliser. @layer L'instruction va injecter le style dans Tailwind. utilities Ainsi, votre classe personnalisée pourra également bénéficier des points de rupture réactifs et des variantes d'état de Tailwind, telles que @media. hover:Le système.
Quelle est la suite, quelle est la suite ?
Lecture approfondie et connaissances pratiques
Les articles suivants sont liés au sujet de cet article et peuvent faire l'objet d'une lecture plus approfondie. Il est souvent préférable de commencer par l'article qui se rapproche le plus de votre problème actuel, puis d'étendre progressivement la lecture aux sujets environnants.
- Construire un site web : Guide technique complet pour créer un site professionnel de zéro à un
- Pour créer un site WordPress à la fois esthétique et fonctionnel, le thème
- Guide complet sur la création de sites web : Analyse détaillée des étapes pour passer d'un niveau débutant à une mise en ligne professionnelle
- Maîtriser les fondamentaux de Tailwind CSS : Un guide de développement front-end moderne allant des classes pratiques à la conception responsive
- Guide technique et meilleures pratiques pour maîtriser l'ensemble du processus de création de sites web : de zéro à la mise en ligne
Français