Tailwind Letter Spacing
Tailwind letter spacing allows you to adjust the spacing between letters in text. In this article, we will explore Tailwind’s letter spacing with examples.
The letter spacing classes allow you to adjust the spacing between characters within an element.
This can be helpful in enhancing readability or achieving a specific visual effect.
Tailwind offers predefined classes to adjust letter spacing.
What is Letter Spacing?
Letter spacing, also known as tracking, refers to the amount of space between characters in a text block.
This spacing can be adjusted to create various effects, such as improving readability, emphasizing text, or creating a unique design style. In traditional CSS, letter spacing is defined using the letter-spacing property, which takes a value in pixels, ems, or other units.
Tailwind Letter Spacing Classes
| Classes | Overview |
| tracking-tighter | This class decreases the spacing between characters in an element by setting the letter-spacing to -0.05em. |
| tracking-tight | By setting the letter-spacing to -0.025em, this class decreases the space between characters in an element. |
| tracking-normal | The letter-spacing using this class is set to 0em. This is the default value. |
| tracking-wide | This class sets a value of 0.025em to the letter-spacing property, which increases the spacing between characters within an element. |
| tracking-wider | It increases the spacing between characters within an element by defining the letter-spacing property as 0.05em. |
| tracking-widest | The letter-spacing property is set to 0.1em, which increases the spacing between characters. |
Syntax
<element class="tracking-{size}">...</element>A brief example related to tracking-tighter, tracking-normal and tracking-wider classes is present below:
