Tailwind Font Weight

The tailwind font-weight utility class controls the thickness (or boldness) of a text. With Tailwind's font weight classes, you can quickly apply different font weights to your text without writing custom CSS.

How to apply Tailwind Font Weight

To apply a font weight to an element, you can use the font-{weight} utility class, where {weight}represents the desired font weight. Tailwind CSS provides a set of default font weights that you can use out of the box.

<div class="font-thin">This text has a thin font weight.</div>
<div class="font-normal">This text has a normal font weight.</div>
<div class="font-semibold">This text has a semi-bold font weight.</div>
<div class="font-bold">This text has a bold font weight.</div>
<div class="font-extrabold">This text has a extra-bold font weight.</div>

Preview

Default Tailwind Font Weights

Tailwind CSS includes a set of default font weights that you can use. Some of the commonly used ones include:

• font-thin: Sets the font weight to thin.

• font-normal: Sets the font weight to normal.

• font-bold: Sets the font weight to bold.

• font-extrabold: Sets the font weight to extra bold.

You can choose the font weight that best suits your design and apply the corresponding utility class to your elements.

Numeric Tailwind Font Weights

In addition to the default font weights, Tailwind CSS also supports numeric font weights. You can specify font weights using numeric values from 100 to 900. For example, you can use font-300 for a lighter font weight and font-700 for a heavier font weight.

<div class="font-300">This text has a lighter font weight.</div>

<div class="font-700">This text has a heavier font weight.</div>

Preview

Tailwind Hover Font Weight

Hover Font weight is an interactive font weight that changes when an action is performed. In this case, when you hover over a text. To achieve this, you can use the pseudo-class variant hover before the font weight class. For example, here is how you can make a text bold when you hover over it.

<p class="font-normal hover:font-bold">Hover over me!</p>

Preview

Tailwind Focus Font Weight

Focus Font weight is an interactive font weight that changes when an action is performed. In this case, when you focus on a text. To achieve this, use the pseudo-class variant focus before the font-weight class. For example,

<input class="font-normal focus:font-bold" placeholder="Focus me" />

Preview

Responsive Font Weight

Tailwind CSS allows you to apply font weights responsively at different breakpoints. To use responsive tailwind font weight classes, you can append the breakpoint prefix to the font weight class. For example, md:font-bold applies the bold font weight starting from the medium breakpoint and above.

<div class="font-normal md:font-bold">
	This text has a normal font weight by default, but becomes bold starting from
	the medium breakpoint.
</div>

Preview

In the above example, the font-normal class is applied by default, setting the font weight to normal. However, starting from the medium breakpoint and above (md:font-bold), the font weight changes to bold.

Customizing Tailwind Font Weight

Tailwind CSS is highly customizable. If the default font weights don’t meet your needs, you can customize them in your tailwind.config.js file. Here’s an example of how to add a custom font weight:

module.exports = {
	theme: {
		extend: {
			fontWeight: {
				"extra-light": 50,
			},
		},
	},
};

Now, you can use font-custom in your project:

<p class="font-extra-light">This is custom weight text.</p>

Preview

Real UI Component Example

Blog Post Title Card with Different Font Weights

<div class="max-w-sm p-6 bg-white rounded-xl shadow">
	<h2 class="font-black text-2xl mb-2">The Future of Frontend</h2>
	<p class="font-light text-gray-600">
		Understanding modern frameworks and best practices in UI development.
	</p>
	<a
		href="#"
		class="font-medium text-blue-600 hover:font-bold mt-3 inline-block"
	>
		Read More →
	</a>
</div>

Preview

Best Practices for Devs/Designers

• Hierarchy: Use heavier weights for titles/headings, lighter for body text.

• Readability: Avoid very thin weights on small text — they can be hard to read.

• Contrast: Combine font weight with color and size for better visual structure.

• Consistency: Stick to 2–3 weights across a project to maintain design harmony.

Tailwind Font Weight Class Table

📚 Ready to Keep Going?

• Tailwind Letter spacing

• Tailwind Text-color

Windframe Tailwind blocks

Landing page