In this tutorial we will see how to use font size in tailwind css. Also we will see responsive font size, custom font size example with Tailwind CSS.
How to install & setup Tailwind CSS v3
Example 1
Tailwind build in font size list.
<!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 Size</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<div class="flex flex-col items-center justify-center h-screen">
<div class="text-xs">Tailwind CSS Font Size xs</div>
<div class="text-sm">Tailwind CSS Font Size sm</div>
<div class="text-base">Tailwind CSS Font Size base</div>
<div class="text-lg">Tailwind CSS Font Size lg</div>
<div class="text-xl">Tailwind CSS Font Size xl</div>
<div class="text-2xl">Tailwind CSS Font Size 2xl</div>
<div class="text-3xl">Tailwind CSS Font Size 3xl</div>
<div class="text-4xl">Tailwind CSS Font Size 4xl</div>
<div class="text-5xl">Tailwind CSS Font Size 5xl</div>
<div class="text-6xl">Tailwind CSS Font Size 6xl</div>
<div class="text-7xl">Tailwind CSS Font Size 7xl</div>
<div class="text-8xl">Tailwind CSS Font Size 8xl</div>
<div class="text-9xl">Tailwind CSS Font Size 9xl</div>
</div>
</body>
</html>
tailwind font size
Tailwind CSS responsive font size.
<div class="text-3xl lg:text-6xl">Tailwind CSS Responsive Font Size</div>
Example 2
tailwind css font size with line height.
<p class="text-base/3">Tailwind CSS Font Size with line-height </p>
<p class="text-base/4">Tailwind CSS Font Size with line-height </p>
<p class="text-base/5">Tailwind CSS Font Size with line-height </p>
<p class="text-base/6">Tailwind CSS Font Size with line-height </p>
<p class="text-base/7">Tailwind CSS Font Size with line-height </p>
<p class="text-base/8">Tailwind CSS Font Size with line-height </p>
<p class="text-base/9">Tailwind CSS Font Size with line-height </p>
<p class="text-base/10">Tailwind CSS Font Size with line-height</p>
tailwind css font size with line height
tailwind css font size custom line height.
<p class="text-base/[19px]">Tailwind CSS Font Size with custom line-height </p>
<p class="text-base/[1.1rem]">Tailwind CSS Font Size with custom line-height </p>
Example 3
tailwind css custom font size using Arbitrary values with px and rem.
<div class="text-[30px]">Tailwind CSS Custom Font Size with px </div>
<div class="text-[2.6rem]">Tailwind CSS Custom Font Size with rem </div>
tailwind css custom font size
Read Also
Tailwind CSS Use Custom Fonts Example
Tailwind CSS Font Family Example
How to Use Font Weight in Tailwind CSS
How to Use italic Font Style in Tailwind CSS
How to Use Font Smoothing in Tailwind CSS
