Typographie avec Tailwind CSS

La fonctionnalitéTypography(Typographie) de Tailwind CSS est un ensemble d'outils utilitaires qui aident les développeurs à concevoir efficacement des styles de texte. Elle inclut la définition de propriétés typographiques de base telles que la famille de polices, la graisse de police, la hauteur de ligne, l'espacement des lettres, l'alignement du texte, et prend également en charge des exigences typographiques complexes telles que les tailles de police responsives, les ombres de texte, la décoration du texte, et plus encore.

1. Famille de polices

Tailwind fournit des classes utilitaires pour définir la famille de polices, qui peuvent être facilement appliquées via les noms de classes.

Classes utilitaires courantes :

• font-sans: Définit la police sans-serif.
• font-serif: Définit la police serif.
• font-mono: Définit la police monospace.

2. Taille de police

La taille de police peut être contrôlée grâce auxtext-*classes utilitaires de Tailwind, prenant en charge plusieurs tailles detext-xsàtext-9xl, et vous pouvez même personnaliser la taille de police.

Classes utilitaires courantes :

• text-xs, text-sm, text-base, text-lg, text-xl, text-2xl, ..., text-9xl

3. Graisse de police

La graisse de police peut être contrôlée viafont-*classes utilitaires. Tailwind fournit plusieurs options de graisse allant defont-thinàfont-blackà différentes graisses.

Classes utilitaires courantes :

• font-thin: Police extra-légère
• font-light: Police légère
• font-normal: Police normale
• font-medium: Police de graisse moyenne
• font-semibold: Police semi-gras
• font-bold: Gras
• font-extrabold: Police extra-gras
• font-black: Police noire

4. Hauteur de ligne

La hauteur de ligne (interligne) peut être contrôlée vialeading-*classes utilitaires. Tailwind propose diverses options de hauteur de ligne allant deleading-noneàleading-loose, qui peuvent être ajustées selon les besoins.

Classes utilitaires courantes :

• leading-none: Hauteur de ligne de 1
• leading-tight: Hauteur de ligne compacte
• leading-snug: Hauteur de ligne légèrement compacte
• leading-normal: Hauteur de ligne par défaut
• leading-relaxed: Hauteur de ligne détendue
• leading-loose: Hauteur de ligne lâche

5. Espacement des lettres

L’espacement des lettres peut être contrôlé à l’aide detracking-*classes utilitaires. Les options courantes d’espacement des lettres incluenttracking-tight、tracking-normalettracking-wide, utilisé pour ajuster l’espace entre les lettres.

Classes utilitaires courantes :

• tracking-tight: Espacement des lettres resserré
• tracking-normal: Espacement des lettres par défaut
• tracking-wide: Espacement des lettres large
• tracking-wider: Espacement des lettres plus large
• tracking-wide: Espacement des lettres le plus large

6. Couleur du texte

Tailwind fournit diverses classes de couleur de texte qui vous permettent de définir différentes couleurs pour le texte. Vous pouvez utilisertext-*classes utilitaires pour définir les couleurs.

Classes utilitaires courantes :

• text-gray-500: Gris moyen
• text-red-500: Rouge
• text-blue-500: Bleu
• text-green-500: Vert

7. Alignement du texte

Tailwind fournit des classes utilitaires simples pour contrôler l'alignement du texte. Vous pouvez utilisertext-left、text-centeroutext-rightpour définir l'alignement du texte.

Classes utilitaires courantes :

• text-left: aligné à gauche
• text-center: centré
• text-right: aligné à droite

8. Décoration du texte

Vous pouvez utiliserunderline, line-throughetno-underlinepour contrôler le soulignement et le barré sur le texte.

Classes utilitaires courantes :

• underline: Ajouter un soulignement
• line-through: Ajouter un texte barré
• no-underline: Supprimer le soulignement

9. Transformation du texte

Tailwind fournituppercase、lowercaseetcapitalizeclasses pour contrôler la transformation de la casse du texte.

Classes utilitaires courantes :

• uppercase: Majuscules
• lowercase: Minuscules
• capitalize: Mettre une majuscule à la première lettre de chaque mot

10. Ombre de texte

Tailwind vous permet d'ajouter des effets d'ombre au texte en utilisanttext-shadowclasses utilitaires.

Classes utilitaires courantes :

• text-shadow: Définit une ombre de texte simple (cette fonctionnalité nécessite un plugin ou une extension personnalisés).

11. Taille de police adaptative

Tailwind prend en charge le design adaptatif, vous permettant de définir différentes tailles de police pour différentes tailles d'écran. En ajoutant des préfixes tels quesm:, md:, lg:, xl:pour différentes tailles d'écran, vous pouvez contrôler la taille de police.