Font weight is one of those things you probably adjust all the time without thinking much about it. Making headings bolder. Lightening up some secondary text. It's part of creating visual hierarchy and guiding your users through content.

The great thing about Tailwind CSS is how simple it makes this. You get nine ready-to-use font weight utilities that cover pretty much every weight you'll ever need, from super thin to heavy black text. No more remembering numeric values or writing custom CSS classes.

I've been working with Tailwind for years and I still appreciate how quick it is to just add font-bold or font-light to an element. Let me show you exactly how these utilities work and how you can use them to make your typography stand out.

The nine font weight utilities

Tailwind gives you nine built-in classes for controlling font weight. Each one maps to a specific numeric value, just like in regular CSS.

Here's the complete list:

Let me show you how these look in action:

You can see the progression clearly. The difference between each weight creates that visual hierarchy I mentioned earlier.

One thing to keep in mind though - not every font includes all nine weights. If you're using a custom font that only has regular and bold, classes like font-thin or font-black might not render differently. The browser will do its best to fake the weight but it won't look as good as a font that actually includes those weights.

Here's a practical example showing how you might use different weights in a real card component:

See how each element uses a different weight to create clear distinction? The badge is semibold, the heading is bold, body text stays normal, the price goes black for impact, and the lighter "per month" text provides balance. That's the power of having all these options at your fingertips.

Going beyond the defaults with arbitrary values

Sometimes the nine standard weights aren't enough. Maybe you're working with a variable font that supports any weight from 100 to 1000, or you need a specific weight that falls between the defaults.

That's where Tailwind's arbitrary value syntax comes in handy.

You can use font-[value] to set any weight you want. Just put the numeric value in square brackets and Tailwind will generate the CSS for you on the fly.

This is especially useful when you're working with variable fonts. These modern fonts can smoothly transition between any weight value, giving you way more control than traditional fonts.

You can also use CSS variables with the syntax font-(<custom-property>). Tailwind will automatically wrap it in the var() function for you:

This approach is perfect for design systems where you want to define weights once in CSS variables and reference them throughout your components. Change the variable value in one place and it updates everywhere.

Making weights responsive with breakpoints

One of the coolest things about Tailwind is how easy it is to adjust font weights at different screen sizes. Just add a breakpoint prefix and you're done.

The pattern is simple: {breakpoint}:font-{weight}.

This comes in handy all the time. Maybe you want bolder headings on desktop where there's more space, or lighter text on mobile to improve readability on small screens.

The responsive approach works great for mobile-first design. Start with lighter weights for small screens where space is limited, then progressively add more weight as screens get bigger.

Here's a real-world example of a hero section that adapts its typography:

See how everything scales up together? The heading gets progressively bolder, the description text gains more weight for better readability, and even the button becomes more prominent on larger screens. It all works together to create a cohesive experience across devices.

Adding interactivity with hover and focus states

Font weight isn't just for static text. You can combine it with Tailwind's state variants like hover:, focus:, and active: to create interactive typography that responds to user actions.

This technique works really well for links, buttons, navigation items, and anywhere you want to provide visual feedback when users interact with your content.

Notice how I added transition-all to smooth out the weight changes? Without it, the shift can feel jarring. The transition makes everything feel more polished and intentional.

Here's a more complex example with a card that responds to hover:

The group utility is doing the heavy lifting here. When you hover over the card, all the child elements with group-hover: modifiers respond together. The badge, heading, and call-to-action all get bolder simultaneously, creating a cohesive interactive experience.

This subtle weight change combined with the shadow increase makes the whole card feel more engaging without being over the top.

That's pretty much everything you need to know about controlling font weight in Tailwind CSS.

You've got nine solid utilities for everyday use, arbitrary values when you need something specific, responsive variants for different screen sizes, and interactive states to make your typography come alive.

The beauty of Tailwind's approach is how it keeps everything in your HTML. No jumping between files, no hunting through stylesheets to find where that font weight is defined. It's all right there where you need it.

Start with the basics - font-normal for body text, font-semibold or font-bold for headings. Then experiment with the responsive and interactive features as you get more comfortable. You'll be surprised how much visual interest you can create just by adjusting weight at the right moments.