In this tutorial we will see how to use font weight in tailwind css. Also we will see responsive font weight, hover font weight, custom font weight example with Tailwind CSS.
How to install & setup Tailwind CSS v3
Examples
tailwind css all font weight class.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Tailwind CSS Font Weight</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<div class="flex flex-col items-center justify-center h-screen">
<p class="font-thin">This text is font-thin</p>
<p class="font-font-extralight">This text is font-extralight</p>
<p class="font-light">This text is font-light</p>
<p class="font-normal">This text is font-normal</p>
<p class="font-medium">This text is font-medium</p>
<p class="font-semibold">This text is font-semibold</p>
<p class="font-bold">This text is font-bold</p>
<p class="font-extrabold">This text is font-extrabold</p>
<p class="font-black">This text is font-black</p>
</div>
</body>
</html>
tailwind css all font weight class
tailwind css responsive font weight.
<p class="font-thin lg:font-bold">tailwind css responsive Font Weight</p>
tailwind css on hover font weight.
<p class="font-bold hover:font-normal">tailwind css hover Font Weight</p>
tailwind css custom font weight
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Tailwind CSS custom Font Weight</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<div class="flex flex-col items-center justify-center h-screen">
<p class="font-[550]">tailwind css custom font Weight</p>
<p class="font-[1000]">tailwind css custom font Weight</p>
</div>
</body>
</html>
tailwind css custom font weight
tailwind css more example font weight text.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Tailwind CSS Font Weight</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<div class="flex flex-col items-center justify-center h-screen">
<p class="italic font-bold">This text is italicized and bold</p>
<p class="font-semibold text-blue-600 underline">
This text is font-semibold and underlined
</p>
<p class="font-semibold line-through">
This text is font-semibold and have a line through it
</p>
<p class="uppercase extrabold">
This text font is extrabold and in uppercase letters
</p>
<p class="font-light tracking-wide">
This text font is light and have increased letter spacing
</p>
<h1 class="text-6xl font-bold"> This text font bold with h1 Tag </h1>
</div>
</body>
</html>
tailwind css font bold
Read Also
Tailwind CSS Use Custom Fonts Example
Tailwind CSS Font Family Example
Tailwind CSS Font Size Example
How to Use italic Font Style in Tailwind CSS
How to Use Font Smoothing in Tailwind CSS
