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.
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
