🏠

Tailwind CSS Concept Explained

Working with Text

Make text bold, normal, or light (font weight).

Skill ID: WorkingWithText_26

Description: Adjust the thickness of the characters in your text.

Where to apply: Emphasizing key words, making headings stand out.

Key Tailwind Classes:

font-light , font-normal , font-semibold , font-bold

Gotcha: Not all fonts support all weights. If the font you're using doesn't have a "light" or "extra-bold" variant, applying font-light or font-extrabold won't have any visual effect. Ensure the loaded font family actually includes those weights.

Example 1:

Example 2:

Example 3:

Example 4:

Example 5:

Example 6:

🏠