Tailwind CSS Font size

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>

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">
  This is a paragraph with a font size larger than the default.
</p>

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

Windframe Tailwind blocks

Landing page

Build modern projects using Bootstrap 5 and Contrast

Trying to create components and pages for a web app or website from scratch while maintaining a modern User interface can be very tedious. This is why we created Contrast, to help drastically reduce the amount of time we spend doing that. so we can focus on building some other aspects of the project.

Contrast Bootstrap PRO consists of a Premium UI Kit Library featuring over 10000+ component variants. Which even comes bundled together with its own admin template comprising of 5 admin dashboards and 23+ additional admin and multipurpose pages for building almost any type of website or web app.
See a demo and learn more about Contrast Bootstrap Pro by clicking here.