Letter spacing

Tailwind CSS Letter Spacing

letter spacing in Tailwind CSS utility class adjusts the spacing between characters (letters) in text elements. This utility class allows you to control the amount of space between each character, Which provides good control over typography.

Setting the letter spacing

To apply tailwind css paragraph spacing, you can use the tracking-{value} utility class, where {value} represents the amount of spacing to be added between characters(letters). You can specify values various length units such as px, rem, em, or percentage(%).

This is the text with .tracking-tighter class

This is the text with .tracking-tight class

This is the text with .tracking-normal class

This is the text with .tracking-wide class

This is the text with .tracking-wider class

This is the text with .tracking-widest class

HTML

<div class="flex flex-col gap-4">
<p class="text-base font-medium text-gray-900 tracking-tighter">This is the text with <span class="text-red-500">.tracking-tighter</span> class</p>
<p class="text-base font-medium text-gray-900 tracking-tight">This is the text with <span class="text-red-500">.tracking-tight</span> class</p>
<p class="text-base font-medium text-gray-900 tracking-normal">This is the text with <span class="text-red-500">.tracking-normal</span> class</p>
<p class="text-base font-medium text-gray-900 tracking-wide">This is the text with <span class="text-red-500">.tracking-wide</span> class</p>
<p class="text-base font-medium text-gray-900 tracking-wider">This is the text with <span class="text-red-500">.tracking-wider</span> class</p>
<p class="text-base font-medium text-gray-900 tracking-widest">This is the text with <span class="text-red-500">.tracking-widest</span> class</p>
</div>

Using negative values

To use a tailwind css negative text spacing value, prefix the class name with a dash to convert it to a negative value. Negative letter spacing adjusts the spacing between characters by bringing them closer together.

This is the text with .-tracking-tighter class

This is the text with .-tracking-tight class

This is the text with .-tracking-normal class

This is the text with .-tracking-wide class

This is the text with .-tracking-wider class

This is the text with .-tracking-widest class

HTML

<div class="flex flex-col gap-4">
<p class="text-base font-medium text-gray-900 -tracking-tighter">This is the text with <span class="text-red-500">.-tracking-tighter</span> class</p>
<p class="text-base font-medium text-gray-900 -tracking-tight">This is the text with <span class="text-red-500">.-tracking-tight</span> class</p>
<p class="text-base font-medium text-gray-900 -tracking-normal">This is the text with <span class="text-red-500">.-tracking-normal</span> class</p>
<p class="text-base font-medium text-gray-900 -tracking-wide">This is the text with <span class="text-red-500">.-tracking-wide</span> class</p>
<p class="text-base font-medium text-gray-900 -tracking-wider">This is the text with <span class="text-red-500">.-tracking-wider</span> class</p>
<p class="text-base font-medium text-gray-900 -tracking-widest">This is the text with <span class="text-red-500">.-tracking-widest</span> class</p>
</div>