Tailwind CSS: Use different text sizes for different screen sizes.

Making Websites Work on All Screen Sizes (Responsiveness)

Use different text sizes for different screen sizes.

Skill ID: Responsiveness_44

Description: Make headings/text larger on desktops and smaller on mobile.

Where to apply: Main headings, important text.

Key Tailwind Classes:


       text-2xl sm:text-3xl md:text-4xl

Gotcha: Making text too small on mobile in an attempt to fit more content, harming readability. Also, ensure the jump in size between breakpoints isn't too jarring.

Example:

The following heading will change its size based on the screen width:

Responsive Heading Text

- On small screens (default): `text-2xl` (1.5rem / 24px)
- On `sm` breakpoint (640px) and up: `sm:text-3xl` (1.875rem / 30px)
- On `md` breakpoint (768px) and up: `md:text-4xl` (2.25rem / 36px)

Resize your browser window to see the effect.

Tailwind CSS Concept Explained

Making Websites Work on All Screen Sizes (Responsiveness)

Use different text sizes for different screen sizes.

Example:

Responsive Heading Text

Example 1:

Example 2:

Example 3:

Example 4:

Example 5:

Example 6:

Example 7:

Example 8: