Tailwind CSS Font Weight
Tailwind Font Weight
The tailwind font-weight utility class allows you to easily set the font weight for text elements. With Tailwind's font weight classes, you can quickly apply different font weights to your text without writing custom CSS.
Applying 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>
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>
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.
Tailwind Font Weight Class Table
Class | Properties |
---|---|
font-thin | font-weight: 100; |
font-extralight | font-weight: 200; |
font-light | font-weight: 300; |
font-normal | font-weight: 400; |
font-medium | font-weight: 500; |
font-semibold | font-weight: 600; |
font-bold | font-weight: 700; |
font-extrabold | font-weight: 800; |
font-black | font-weight: 900; |
Windframe Tailwind blocks
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.