Gotcha: Inconsistent Text Sizes

Problem: Disorganized UI

This heading is too small and then jumps around . This body text is suddenly large then back to normal . It makes the content hard to follow and looks unprofessional.

The example above mixes `text-lg`, `text-xs`, `text-2xl`, `text-sm`, `text-xl`, and `text-base` in a single paragraph without clear purpose, illustrating the "Gotcha".

Solution: Maintain Visual Harmony

Stick to Tailwind's predefined scale and establish a clear hierarchy.

Consistent Section Title (text-xl)

This paragraph uses text-base for its main content, providing a comfortable reading experience. Key information might be bolded , but the size remains consistent.

Consistent Sub-Section Title (text-lg)

Another paragraph, also using text-base . The hierarchy is clear due to the heading sizes.

Additional notes or less critical information can use text-sm , like this.

And for very fine print or captions, text-xs can be used sparingly.