🏠

Tailwind CSS Concept Explained

Working with Text

Control how big or small text is.

Skill ID: WorkingWithText_24

Description: Set different sizes for headings, paragraphs, and captions.

Where to apply: All text on the page.

Key Tailwind Classes:

text-xs , text-sm , text-base , text-lg , text-xl

Gotcha: Inconsistent use of text sizes can make the UI look disorganized. Sticking to Tailwind's predefined scale helps maintain visual harmony. Also, text-base refers to the browser's default font size (usually 16px), not necessarily a "medium" in the context of all Tailwind sizes.

Example:

This is extra small text using text-xs .

This is small text using text-sm .

This is base text using text-base (typically 16px).

This is large text using text-lg .

This is extra large text using text-xl .

This is 2XL text using text-2xl (example, not in key classes above).

This is 5XL text using text-5xl .

Example 1:

Example 2:

Example 3:

Example 4:

Example 5:

Example 6:

Example 7:

🏠