Au cours des dernières années,Tailwind CSS Cela a complètement changé le flux de travail des développeurs front-end. Ce n’est pas un framework d’interface utilisateur traditionnel, mais un framework CSS axé sur l’utilisabilité, qui permet aux développeurs de créer directement des designs en combinant des classes utilitaires prédéfinies et granulaires. Cette approche élimine la nécessité de basculer fréquemment entre les fichiers HTML et CSS, améliorant considérablement l’efficacité du développement et la cohérence du design.
Contrairement à des frameworks tels que Bootstrap qui fournissent des composants prédéfinis (comme des boutons, des cartes, etc.),Tailwind CSS Ce qui est proposé ici, ce sont des éléments de base. Il ne vous oblige pas à utiliser un design spécifique, mais vous donne la possibilité de mettre en œuvre n’importe quel design personnalisé. La philosophie centrale est “ des styles en ligne, mais sans perdre le contrôle ”, ce qui signifie que vous pouvez appliquer rapidement des styles au HTML tout en bénéficiant de tous les avantages du design réactif, des variations d’état (comme le survol et la mise en évidence) et des contraintes du système de design (comme la palette de couleurs et les proportions d’espacement).
Concepts clés et principe de fonctionnement
Pour utiliser efficacement… Tailwind CSSIl est nécessaire de comprendre ses différents concepts fondamentaux. Ces concepts constituent la base de son flux de travail.
Lectures recommandées Le guide ultime de Tailwind CSS : de l’initiation à la maîtrise, pour créer des sites web modernes et réactifs。
Les classes pratiques et le mode de composition.
Tailwind CSS Le cœur du système réside dans des milliers de classes pratiques. Chaque classe est généralement responsable d'un seul attribut CSS. Par exemple,text-center Correspondant text-align: center;，bg-blue-500 Correspondant background-color: #3b82f6;，p-4 Correspondant padding: 1rem;。
En combinant ces classes d’atomes, vous pouvez créer directement des composants complexes en HTML sans avoir à écrire de CSS personnalisé. Ce modèle lie étroitement les définitions de style aux scénarios d’utilisation, réduit l’accumulation de code de style inutilisé et rend la source du style plus transparente.
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
点击我
</button>La conception réactive et les préfixes de variantes.
Tailwind CSS Adoptez une stratégie réactive axée sur les appareils mobiles. Par défaut, toutes les classes utiles sont destinées aux appareils mobiles, puis des préfixes sont utilisés pour s'adapter aux écrans plus grands. Par exemple,md:text-lg Indique l'utilisation sur des écrans de taille moyenne et supérieure. font-size: 1.125rem;。
En plus des préfixes réactifs, le framework fournit également une multitude de préfixes pour les variantes d'état, telles que : hover:、focus:、active:、disabled: etc., utilisés pour gérer les différents états d'interaction des éléments.
<div class="text-sm md:text-base lg:text-lg">
<a href="#" class="text-gray-800 hover:text-blue-600 underline">lien</a>
</div>Configuration et personnalisation du projet
même si Tailwind CSS Il est prêt à l’emploi, mais sa véritable force réside dans sa grande personnalisabilité. Tout cela est possible grâce aux fichiers de configuration situés dans le répertoire racine du projet. tailwind.config.js Pour le réaliser.
Lectures recommandées Comment utiliser Tailwind CSS pour construire des interfaces utilisateur modernes et réactives ?。
Système de conception personnalisé.
Dans le fichier de configuration, vous pouvez remplacer ou étendre le thème par défaut du framework. Cela inclut les couleurs, les polices, les marges, le rayon des bordures, les points d’arrêt, etc. Cela garantit que votre projet respecte un ensemble de règles de conception uniformes.
// tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
'brand-primary': '#1d4ed8',
'brand-secondary': '#7c3aed',
},
spacing: {
'128': '32rem',
}
},
},
}Une fois défini, vous pouvez l’utiliser directement. bg-brand-primary Ou mt-128 Un nom de classe de ce type.
Optimisation de la production et utilisation de PurgeCSS
Tailwind CSS Cela générera un énorme fichier CSS contenant toutes les classes potentiellement utiles. Pour supprimer les styles non utilisés dans l'environnement de production, il faut le configurer. purge Options. Le framework analyse vos fichiers de modèle (tels que HTML, JSX, Vue) et ne conserve que les classes réellement utilisées.
// tailwind.config.js
module.exports = {
purge: ['./src/**/*.{html,js,jsx,ts,tsx,vue}'],
// ... 其他配置
}Des pratiques et des modèles de développement efficaces.
Après avoir maîtrisé les bases, suivre certaines bonnes pratiques vous permettra d’utiliser [quelque chose] de manière plus efficace et plus facile à maintenir. Tailwind CSS。
Extraction de composants et utilisation de @apply
Lorsqu'un ensemble de classes utilitaires apparaît à plusieurs endroits (par exemple, un bouton d'un style particulier), afin d'éviter les répétitions, on peut utiliser ... @apply Dans CSS, les instructions permettent d’extraire ces classes pour en créer une nouvelle personnalisée. Cela permet de garder le code HTML simple et de faciliter l’application d’une logique de style complexe lorsque cela est nécessaire.
/* 在你的 CSS 文件中 */
.btn-primary {
@apply py-2 px-4 bg-blue-500 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, utilisez-le directement dans le HTML. class="btn-primary" Cela suffit. Cependant, il faut faire attention à ne pas en abuser. @apply Cela pourrait entraîner le retour des inconvénients du CSS traditionnel, et il convient donc de l'utiliser avec prudence dans les véritables modèles réutilisables.
Lectures recommandées Guide d’initiation à Tailwind CSS en chinois : De zéro à la maîtrise, pour créer des sites web modernes et réactifs。
Gérer des noms de classes dynamiques
Dans les frameworks frontaux modernes tels que React et Vue, il est fréquent de devoir concaténer des noms de classes dynamiquement en fonction de conditions. La concaténation manuelle de chaînes de caractères est sujette à des erreurs et manque d’élégance. Il est recommandé d’utiliser des bibliothèques d’assistance pour cela. clsx Ou classnamesPour gérer les classes dynamiques de manière sûre et pratique.
import clsx from 'clsx';
function Button({ isActive, children }) {
const className = clsx(
'px-4 py-2 rounded transition-colors',
{
'bg-blue-500 text-white': isActive,
'bg-gray-200 text-gray-800': !isActive,
'hover:bg-blue-600': isActive,
'hover:bg-gray-300': !isActive,
}
);
return <button className={className}>{children}</button>;
}Intégration approfondie avec les frameworks front-end
Tailwind CSS Sa compatibilité avec les frameworks frontaux modernes est parfaite, offrant une expérience optimale en matière de développement modulaire.
Des applications dans React et Next.js.
Dans l'écosystème React,Tailwind CSS C'est un excellent choix pour créer des composants stylés. En combinaison avec des outils comme... Next.js Un tel cadre élémentaire permet un processus d'intégration très fluide. Grâce à cela, PostCSS Les plugins et les styles peuvent être intégrés sans aucun problème dans le processus de développement.
Pour ceux qui ont besoin de rendu côté serveur (SSR). Next.js Projet, assurez-vous qu'il est correctement configuré. purge En utilisant la numérisation. .tsx Ou .jsx Les documents sont très importants. De plus, ils peuvent être utilisés pour... Tailwind CSS Le mode JIT (en temps réel) permet d'obtenir une vitesse de compilation plus rapide pendant le développement.
L'utilisation de Vue et de Nuxt.js.
La syntaxe des composants de fichier unique (SFC) de Vue est similaire à celle de React. Tailwind CSS Leur utilité se complète mutuellement. Les classes de style peuvent être écrites directement dans le modèle. class Dans les attributs, c'est clair et intuitif.
Dans Nuxt.js Dans le projet, cela peut être fait via des modules officiels. @nuxtjs/tailwindcss Réalisez une intégration en un clic. Ce module gère automatiquement la configuration, l’intégration de PostCSS et l’optimisation de la construction, vous permettant de vous concentrer sur le développement.
résumés
Tailwind CSS Il ne s'agit pas seulement d'un ensemble d'outils CSS, mais d'un nouveau paradigme de programmation de styles centré sur la praticité et l'efficacité du développement. En fournissant un ensemble complet d'outils sous-jacents personnalisables et réactifs, il libère les développeurs du fardeau de la nomenclature et des pertes liées au changement de contexte, leur permettant de se concentrer davantage sur la construction de fonctionnalités et la conception visuelle elle-même. De la compréhension de la philosophie de la combinaison de classes atomiques à la configuration et à l'optimisation expertes des projets, en passant par l'intégration approfondie avec divers frameworks front-end, la maîtrise de ces compétences est indispensable. Tailwind CSS Cela améliorera sans aucun doute votre capacité à créer des interfaces utilisateur modernes, cohérentes et performantes. À mesure que son écosystème continue de se développer et que de nouvelles fonctionnalités telles que le moteur JIT sont ajoutées, il devient la solution CSS de choix pour de plus en plus d’équipes et de projets.
FAQ Foire aux questions
Les fichiers CSS générés par Tailwind CSS sont-ils très volumineux ?
Dans un environnement de développement, afin de fournir toutes les classes possibles, les fichiers générés sont effectivement assez volumineux (généralement plusieurs Mo). Cela est fait pour offrir la meilleure expérience de développement possible, vous permettant d'utiliser n'importe quelle classe instantanément.
Mais dans un environnement de production, en effectuant une configuration correcte, purge Avec cette option (ou en utilisant le mode JIT), l'outil d'assemblage analyse statiquement les fichiers de votre projet et n'emballe que les classes CSS réellement utilisées. La taille du fichier CSS du package de production final peut être considérablement réduite, devenant même inférieure à celle de nombreux fichiers CSS écrits à la main.
Les éléments pratiques rendent le HTML très encombrant. Que faire ?
C'est une préoccupation courante chez les débutants. En effet, la liste des classes dans le HTML peut devenir longue. Cependant, il faut considérer que vous supprimez un fichier CSS séparé et que la portée des styles est très claire, sans avoir besoin de passer d'un fichier à l'autre pour les trouver.
Pour les motifs de style qui se répètent réellement, il est possible de les utiliser. @apply Les instructions sont extraites en tant que composants CSS ou sont abstraites en tant que composants de code réutilisables dans les frameworks frontaux (tels que React et Vue). Cela permet de maintenir la relative simplicité du HTML/JSX tout en bénéficiant de la flexibilité de développement offerte par les classes pratiques.
Est-ce que Tailwind CSS est adapté pour les nouveaux projets dont le système de design n’est pas encore mature ?
C'est très approprié. En fait,Tailwind CSS La configuration par défaut est en soi un point de départ raisonnable et esthétique. Ses valeurs de conception (couleurs, espacement, taille de police, etc.) sont basées sur de bonnes pratiques de conception et peuvent vous aider à créer rapidement un prototype avec un bel aspect visuel.
En même temps, son système de thèmes hautement personnalisable signifie que lorsque votre système de design de marque se perfectionne, vous pouvez très facilement l'adapter. tailwind.config.js En ajustant ces jetons de design de manière centralisée, le style de l'ensemble du projet sera automatiquement et uniformément mis à jour.
Comment masquer ou réinitialiser le style des composants tiers ?
Lorsque vous utilisez une bibliothèque de composants tiers qui possède ses propres styles, vous pouvez… Tailwind CSS Pour couvrir leur style avec des classes utiles, on utilise généralement une méthode consistant à augmenter la spécificité des CSS. Par exemple, on ajoute une classe spécifique à l’élément englobant, puis on utilise les sélecteurs de descendance de cette classe pour appliquer les classes utiles souhaitées.
Une manière plus directe serait de transmettre les paramètres si les composants tiers le permettaient. className En ce qui concerne les attributs, vous pouvez les ajouter directement. Tailwind CSS La classe correspondante est transmise à cet élément. Si son style entre en conflit avec celui de votre classe pratique, vous pouvez utiliser… !important Des variantes, telles que : bg-red-500!Mais cela ne devrait être utilisé qu'en dernier recours.
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