How to Adjust Font Size in Tailwind CSS

When I first started learning about web design, one thing that confused me a lot was how to change the font size of text on a website. If you're just getting into coding or using Tailwind CSS for the first time, I totally get it — it can feel overwhelming. But don’t worry, in this blog, I’ll walk you through exactly how to adjust font size in Tailwind CSS in a simple and beginner-friendly way.

What is Tailwind CSS?

Before we jump into font sizes, let me quickly explain what Tailwind CSS is. It’s a special tool that helps you style your website using small utility classes. Instead of writing long lines of custom CSS, you just apply short class names directly to your HTML elements. It saves time and makes things easier to manage.

Why Font Size Matters

Font size is important because it helps people read your content easily. If the text is too small, it’s hard to read. If it’s too big, it might look messy. That’s why learning how to control font size is a good starting point.

How to Adjust Font Size in Tailwind CSS

Tailwind makes it super easy to change the size of text. You can do it by using simple classes like text-sm, text-base, text-lg, and so on.

Example:

<p class="text-sm">This is small text.</p>
<p class="text-base">This is normal (base) text.</p>
<p class="text-lg">This is large text.</p>
<p class="text-2xl">This is even larger text.</p>

What Do These Classes Mean?

And the list goes up to text-9xl!

How to make Font Big and Bold

Example:

Let’s you have a heading and you want it to stand out. You can do this:

<h1 class="text-4xl font-bold">Welcome to My Website</h1>

This class will make the heading big and bold.

How to make Responsive Font Sizes

Want your text to be small on mobile and larger on desktop? You can use responsive classes like this:

<p class="text-sm md:text-lg lg:text-xl">
  This text size changes based on screen size!
</p>

Here what class do:

• text-sm: for small screens (default)
• md:text-lg: for medium screens
• lg:text-xl: for large screens

Tips for Beginners

• Always start with text-base if you're unsure.
• Use larger sizes for headings and smaller sizes for paragraphs.
• Try out different sizes to see what looks good.
• You don’t need to know everything at once — just experiment and learn!

When I started learning Tailwind CSS, adjusting font size was one of the first things I played around with — and it really helped me understand how powerful Tailwind can be. The best part? You don’t have to write a single line of custom CSS to get started.

I hope this guide helped you understand how to adjust font size in Tailwind CSS. Just remember — practice a little every day, and soon all these classes will feel super easy to use.

Got any questions? Feel free to ask in comment. I'm here to help!