Tailwind CSS Typography

Tailwind CSS'sTypography(Typography) feature is a set of utility tools that help developers efficiently design text styles. It includes setting basic typography properties such as font family, font weight, line height, letter spacing, text alignment, and also supports complex typography requirements such as responsive font sizes, text shadows, text decoration, and more.

1. Font Family

Tailwind provides utility classes to set the font family, which can be easily applied via class names.

Common utility classes:

• font-sans: Sets sans-serif font.
• font-serif: Sets serif font.
• font-mono: Sets monospace font.

2. Font Size

Font size can be controlled through Tailwind'stext-*utility classes, supporting multiple sizes fromtext-xstotext-9xl, and you can even customize the font size.

Common utility classes:

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

3. Font Weight

Font weight can be controlled throughfont-*utility classes. Tailwind provides multiple weight options fromfont-thintofont-blackto various weights.

Common utility classes:

• font-thin: Extra-light font
• font-light: Light font
• font-normal: Normal font
• font-medium: Medium weight font
• font-semibold: Semi-bold font
• font-bold: Bold
• font-extrabold: Extra-bold font
• font-black: Black font

4. Line Height

Line height (line spacing) can be controlled throughleading-*utility classes. Tailwind provides various line height options fromleading-nonetoleading-loose, which can be adjusted as needed.

Common utility classes:

• leading-none: Line height of 1
• leading-tight: Compact line height
• leading-snug: Slightly compact line height
• leading-normal: Default line height
• leading-relaxed: Relaxed line height
• leading-loose: Loose line height

5. Letter Spacing

Letter spacing can be controlled throughtracking-*utility classes. Common letter spacing options includetracking-tight、tracking-normalandtracking-wide, used to adjust the space between letters.

Common utility classes:

• tracking-tight: Tight letter spacing
• tracking-normal: Default letter spacing
• tracking-wide: Wide letter spacing
• tracking-wider: Wider letter spacing
• tracking-wide: Widest letter spacing

6. Text Color

Tailwind provides various text color classes that allow you to set different colors for text. You can usetext-*utility classes to set colors.

Common utility classes:

• text-gray-500: Medium gray
• text-red-500: Red
• text-blue-500: Blue
• text-green-500: Green

7. Text Alignment

Tailwind provides simple utility classes to control text alignment. You can usetext-left、text-centerortext-rightto set the text alignment.

Common utility classes:

• text-left: Left-aligned
• text-center: Center-aligned
• text-right: Right-aligned

8. Text Decoration

You can useunderline, line-throughandno-underlineto control underline and strikethrough on text.

Common utility classes:

• underline: Add underline
• line-through: Add strikethrough
• no-underline: Remove underline

9. Text Transform

Tailwind providesuppercase、lowercaseandcapitalizeclasses to control the case transformation of text.

Common utility classes:

• uppercase: Uppercase
• lowercase: Lowercase
• capitalize: Capitalize the first letter of each word

10. Text Shadow

Tailwind allows you to add shadow effects to text usingtext-shadowutility classes.

Common utility classes:

• text-shadow: Sets a simple text shadow (this feature requires a custom plugin or extension).

11. Responsive Font Size

Tailwind supports responsive design, allowing you to set different font sizes for different screen sizes. By adding prefixes such assm:, md:, lg:, xl:to different screen sizes, you can control the font size.