Concepts de base de Tailwind CSS

Tailwind CSS est un framework CSS hautement personnalisable qui fournit un ensemble de classes utilitaires prédéfinies, permettant aux développeurs de créer et concevoir rapidement des interfaces utilisateur.

Voici quelques concepts et usages de base de Tailwind CSS :

Concept	Description
Classes utilitaires (Utility-First)	Le cœur de Tailwind CSS est constitué de classes utilitaires, utilisées pour définir rapidement des styles et les appliquer directement à des éléments HTML.
Préfixes responsives	Utilisez par exemple`sm:`, `md:`, `lg:`, `xl:`les préfixes pour contrôler les styles selon les différentes tailles d'écran.
Couleurs et tailles	Fournit des couleurs prédéfinies (telles que`bg-red-500`) et des tailles (telles que`text-lg`) pour définir rapidement des styles.
Espacement	Via`p-`, `m-`, `pt-`, `pr-`et d'autres classes pour contrôler le padding et la marge.
Layout	Fournit`flex`, `grid`, `float`et d'autres classes pour contrôler la mise en page.
Styles de texte	Inclut des classes utilitaires pour l'alignement du texte, les styles de police, les couleurs et les transformations, comme`text-center`, `font-bold`, `uppercase`。
Arrière-plans et bordures	Fournit des classes utilitaires pour les couleurs d'arrière-plan, les images d'arrière-plan, les styles de bordure et les couleurs, comme`bg-gray-200`, `border-red-500`。
Survol et états	Utiliser`hover:`, `focus:`, `active:`et d'autres préfixes pour définir des styles pour les états interactifs.
Dimensionnement	Utiliser`w-`, `h-`classes pour contrôler la largeur et la hauteur, comme`w-64`, `h-screen`。
Visibilité	Utiliser`visible`, `invisible`et d'autres classes pour contrôler la visibilité des éléments.
Système de grille	Fournit des classes utilitaires basées sur CSS Grid, comme`grid`, `grid-cols-3`, `col-span-2`, pour mettre en œuvre des mises en page de grille responsives.
Configuration personnalisée	Via`tailwind.config.js`personnaliser les couleurs, l'espacement, les tailles de police, etc., pour répondre aux besoins du projet.
Mode sombre	Prend en charge le mode sombre, en utilisant`dark:`préfixe pour définir des styles, et le mode sombre peut être activé dans la configuration.
Plugins	Étendre les fonctionnalités via des plugins, en ajoutant des classes utilitaires personnalisées ou des fonctionnalités personnalisées.
Directives	Utilisation dans les fichiers CSS`@tailwind`directives pour importer différentes couches de styles, telles que`base`, `components`, `utilities`。

Détails du concept

1. Classes utilitaires (Utility-First)

Les classes utilitaires de Tailwind permettent aux développeurs de définir rapidement des styles sans écrire manuellement du CSS.

Exemple

<div class="text-center text-blue-500 font-bold">
Classes utilitaires de Tailwind
</div>

Essayez-le »

Explication :

text-center: Alignement centré.
text-blue-500: Texte bleu.
font-bold: Police en gras.

2. Préfixes responsives

Utilisez des préfixes pour définir des styles à différentes tailles d'écran.

Exemple

<div class="bg-red-500 sm:bg-green-500 md:bg-blue-500 lg:bg-yellow-500">
Exemple responsive
</div>

Essayez-le »

Explication :

Par défaut : fond rouge.
Petits écrans (≥640px) : fond vert.
Écrans moyens (≥768px) : fond bleu.
Grands écrans (≥1024px) : fond jaune.

3. Couleurs et tailles

Tailwind fournit un ensemble riche de couleurs et de tailles prédéfinies pour une utilisation rapide.

Exemple

<p class="text-lg text-gray-600">
Texte avec une taille et une couleur prédéfinies
</p>

Essayez-le »

Explication :

text-lg: Taille de police.
text-gray-600: Texte gris.

4. Espacement

Définissez le padding et les marges d’un élément à l’aide de classes utilitaires d’espacement.

Exemple

<div class="p-4 m-8">
Exemple de padding et de marge
</div>

Essayez-le »

Explication :

p-4: Le padding est de 1rem.
m-8: La marge est de 2rem.

5. Layout

Les classes fournies permettent de mettre en œuvre rapidement des méthodes de mise en page flexibles, telles que Flexbox et Grid.

Exemple

<div class="flex justify-between items-center">
<div>Élément 1</div>
<div>Élément 2</div>
</div>

Essayez-le »

Exemple de Grid :

Exemple

Essayez-le »

6. Styles de texte

Contrôlez l'alignement du texte, la couleur, la taille et d'autres styles.

Exemple

<p class="text-center font-semibold text-red-500">
Texte en gras centré
</p>

Essayez-le »

7. Arrière-plans et bordures

Utilisez les classes utilitaires pour définir les couleurs d'arrière-plan, les images et les styles de bordure.

Exemple

<div class="bg-yellow-200 border border-gray-400">
Exemple d'arrière-plan et de bordure
</div>

Essayez-le »

8. Survol et états

Définir les styles d'état pour les éléments interactifs.

Exemple

<button class="bg-blue-500 hover:bg-blue-700 text-white">
Survolez-moi
</button>

Essayez-le »

9. Dimensionnement

Définir la largeur et la hauteur des éléments.

Exemple

<div class="w-64 h-32 bg-gray-300">
Largeur et hauteur
</div>

Essayez-le »

10. Visibilité

Contrôler l'affichage et le masquage des éléments.

Exemple

<div class="invisible sm:visible">
Visible uniquement sur les petits écrans
</div>

Essayez-le »

11. Système de grille

Utilisez les classes utilitaires Grid de Tailwind pour créer des mises en page en grille.

Exemple

Essayez-le »

12. Configuration personnalisée

Personnalisez le système de design via des fichiers de configuration.

Exemple

// tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
primary: '#1D4ED8',
},
},
},
}

Essayez-le »

13. Mode sombre

Activez le mode sombre et définissez les styles.

Exemple

<div class="bg-white dark:bg-black text-black dark:text-white">
Exemple de mode sombre
</div>

Essayez-le »

14. Plugins

Étendez les fonctionnalités de Tailwind via des plugins.

Exemple

// tailwind.config.js
const plugin = require('tailwindcss/plugin')
module.exports = {
plugins: [
plugin(function({ addUtilities }) {
addUtilities({
'.rotate-45': {
transform: 'rotate(45deg)',
},
})
}),
],
}

15. Directives

Via@tailwinddirectives pour charger différentes couches de Tailwind.

Exemple

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

Autres extensions