This example focuses on the common pitfalls related to text sizing and how to avoid them.
text-xl
)
Section Introduction (using
text-lg
)
This is the main content of our section, using
text-base
.
It's important to understand that
text-base
typically corresponds to the browser's default font size (e.g., 16px).
It serves as the baseline for the typographic scale. Using sizes like
text-sm
for supporting text
and
text-lg
or
text-xl
for headings creates a clear visual hierarchy.
This is a supporting detail or a caption (using
text-sm
). It's noticeably smaller than
text-base
but still very readable for less critical information.
Additional minor note or fine print (using
text-xs
).
Key Takeaway (Addressing the Gotcha):
text-xs
,
text-sm
,
text-base
,
text-lg
,
text-xl
) in a logical way (e.g., larger for headings, smaller for captions) prevents a disorganized UI.
text-base
:
It's your foundational size, reflecting the browser's default. Other text sizes are relative to this concept within Tailwind's scale. It's not an arbitrary "medium".
If we were to use
text-xl
for a minor detail and
text-xs
for a main title, the visual hierarchy would be broken, leading to a confusing user experience.
Tailwind provides the tools; thoughtful application ensures harmony.
The goal is to use the provided text scale (
text-xs
to
text-xl
and beyond) to build a clear, readable, and aesthetically pleasing interface.