How to Use Letter Spacing in TailwindCSS – [Complete Guide]

In CSS, letter-spacing is used to add spacing between characters. TailwindCSS doesn’t provide a class starting with letter-spacing and it hard to remember the class name. Here is a complete guide to use letter spacing in TailwindCSS.

Using Letter Spacing Classes in TailwindCSS

TailwindCSS gives you different classes to add letter-spacing on text elements. There are 6 different classes tailwind provides by default. Here are all the default classes for letter-spacing in TailwindCSS.

Here the the working code example and you can see the output below in screenshot.

how to use letter spacing in TailwindCSS

Using Arbitrary Values for Letter Spacing in TailwindCSS

Sometimes, you might need to use a custom value for letter-spacing in TailwindCSS. As there are only 6 classes by default, these may not be what you want. So, in this case, you can use a arbitrary value for letter spacing in TailwindCSS. Here is the example of using arbitrary value.

Custom Classes for Letter Spacing in TailwindCSS

When following a design system, you might want to use different value everywhere in the project. If that is the case, you might need to extend the default tailwind classes for letter-spacing. You can go to the tailwind.config.js file and add extend the letterSpacing object. Here is an example of adding custom classes for letter-spacing in TailwindCSS. You can check the working code example on tailwind playground.

And then in your HTML file, you can use these classes.

Adding Letter Spacing by Default in Text Elements

You can also add the letter spacing to text elements by default. For this purpose, you need to edit the @base layer in tailwind input file. Here is an example of adding letter-spacing by default to text elements.


There are 3 ways to use letter-spacing in TailwindCSS. The first method is to use the default classes provided by tailwind. In the second method, you can use the arbitrary value to add letter-spacing. The third method is useful when you want to add your own classes for letter-spacing according to your design. Please read the official documentation for more information.


Latest articles

Related articles