Tailwind Font size

The Tailwind font size utility class allows you to easily adjust the size of text elements. It provides a set of classes that enable you to specify font sizes using predefined sizes or custom values, giving you control over the typography in your web applications.

Predefined Tailwind Font Sizes

Tailwind CSS provides a range of predefined font sizes that you can apply to text elements. These tailwind font sizes are denoted by a numeric scale, ranging from 1 to 9, where 1 represents the smallest font size and 9 represents the largest font size.

To apply a predefined font size, you can use the text-{size} class, where {size} is the desired font size scale. Here's an example:

<div>
  <p class="text-sm... ">The font-size is semibold</p>
  <p class="text-xl...">The font-size is extra large</p>
  <p class="text-4xl...">The font-size is 4 extra large</p>
  <p class="text-6xl...">The font-size is 6 extra large</p>
  <p class="text-8xl...">The font-size is 8 extra large</p>
</div>

Preview

Custom Tailwind Font Sizes

Tailwind CSS also allows you to define custom font sizes using the text-{size} class. Instead of using the predefined scales, you can specify your own font size value.

To apply a custom tailwind font size, you can use the text-{size} class, where {size} is a valid CSS font size value. Here's an example:

<div class="text-18">This is a paragraph with a custom font size.</div>

In the above example, the text-18 class is applied to the <p> element, setting the font size to 18 pixels.

Responsive Tailwind Font Sizes

Tailwind CSS provides responsive utility classes for font sizes, allowing you to adjust the tailwind font size at different breakpoints. To use responsive tailwind font size classes, you can append the breakpoint prefix to the font size classes. For example, md:text-2xl sets the font size to extra large starting from the medium breakpoint and above.

<p class="text-base md:text-2xl">
  This is a paragraph with a responsive font size.
</p>

Preview

In the above example, the text-base class is applied by default, setting the tailwind font size based on the base font size. However, starting from the medium breakpoint and above, the md:text-2xl class is applied, changing the tailwind font size to extra large.

Relative Tailwind Font Sizes

Tailwind CSS also provides utility classes for applying relative font sizes. You can use the text-sm, text-lg, and other similar classes to adjust the font size relative to the parent element's font size. Here's an example:

<p class="text-lg font-bold text-emerald-300">
  This is a paragraph with a font size larger than the default.
</p>

Preview

In the above example, the text-lg class is applied to the <p> element, setting the tailwind font size to be larger than the default font size.

Tailwind Font Size Class Table

✨ What's Next?

Now that you’ve mastered Tailwind font size, try experimenting with:

• Tailwind font-family

Windframe Tailwind blocks

Landing page