In this tutorial we will see how to use letter spacing in tailwind css. Also we will see responsive letter spacing, hover letter spacing, custom letter spacing example with Tailwind CSS.
Examples
tailwind css all letter spacing 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 Letter Spacing Example</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<div class="flex flex-col items-center justify-center h-screen">
<p class="tracking-tighter text-xl">This text is tracking-tighter</p>
<p class="tracking-tight text-xl">This text is tracking-tight</p>
<p class="tracking-normal text-xl">This text is tracking-normal</p>
<p class="tracking-wide text-xl">This text is tracking-wide</p>
<p class="tracking-wider text-xl">This text is tracking-wider</p>
<p class="tracking-widest text-xl">This text is tracking-widest</p>
</div>
</body>
</html>
tailwind css letter spacing
tailwind css responsive letter spacing
<p class="lg:tracking-widest tracking-wide">tailwind css responsive letter spacing</p>
tailwind css hover letter spacing
<p class="tracking-wider hover:tracking-normal">tailwind css hover letter spacing</p>
Tailwind CSS Custom Letter Spacing.
<p class="tracking-[.2rem] text-xl">Tailwind CSS Custom Letter Spacing</p>
tailwind custom letter spacing.
tailwind css more example Letter spacing 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 Letter Spacing Example</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<div class="flex flex-col items-center justify-center h-screen">
<p class="tracking-tight font-bold">
This text is tracking-tight and bold
</p>
<p class="tracking-wide text-blue-600 underline">
This text is tracking-wide and underlined
</p>
<p class="tracking-wide line-through">
This text is tracking-wide and have a line through it
</p>
<p class="uppercase tracking-wider">
This text font is tracking-wider and in uppercase letters
</p>
<h1 class="text-6xl tracking-widest">
This text tracking-widest with h1 Tag
</h1>
</div>
</body>
</html>
tailwind letter spacing. example
