This class accepts lots of value in tailwind CSS in which all the properties are covered as in class form. It is the alternative to the CSS letter-spacing property. This class is used to set the spacing behavior between text characters i.e, increasing or decreasing the space between characters in a text.
Letter Spacing classes:
- tracking-tighter: The tracking-tighter letter spacing for the zero space between characters, the value will be -0.05em.
- tracking-tight: The tracking-tight letter spacing for the little space between characters, the value will be -0.025em.
- tracking-normal: The tracking-normal letter spacing for the current font i.e no extra space between characters. This is the default value.
- tracking-wide: The tracking-wide letter spacing for a little more space between characters compared to normal, the value will be 0.025em.
- tracking-wider: The tracking-wider letter spacing for a little more space between characters compared to wide, the value will be 0.05em.
- tracking-widest: The tracking-widest letter spacing for a little more space between characters compared to wider, the value will be 0.1em.
Syntax:
<element class="tracking-{size}">...</element>Example:
HTML
<!DOCTYPE html> <head>
<link href=
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
</head>
<body class="text-center mx-4 space-y-2">
<h1 class="text-green-600 text-5xl font-bold">
GeeksforGeeks
</h1>
<b>Tailwind CSS Letter Spacing Class</b>
<div class="mx-24 bg-green-200 text-justify">
<p class="p-2">tracking-tighter:<br>
<span class="tracking-tighter">
A Computer Science portal for Geeks
</span>
</p>
<p class="p-2">tracking-tight:<br>
<span class="tracking-tight">
A Computer Science portal for Geeks
</span>
</p>
<p class="p-2">tracking-normal:<br>
<span class="tracking-normal">
A Computer Science portal for Geeks
</span>
</p>
<p class="p-2">tracking-wide:<br>
<span class="tracking-wide">
A Computer Science portal for Geeks
</span>
</p>
<p class="p-2">tracking-wider:<br>
<span class="tracking-wider">
A Computer Science portal for Geeks
</span>
</p>
<p class="p-2">tracking-widest:<br>
<span class="tracking-widest">
A Computer Science portal for Geeks
</span>
</p>
</div>
</body>
</html>
|
Output:
tracking size classes