Tailwind Letter Spacing

Letter spacing — or tracking — controls the space between characters in text. It's subtle but powerful, especially in headers, buttons, and UI with tight spacing.

Letter-spacing or tracking controls the space between characters in text. It's subtle but powerful, especially in headers, buttons, and UI with tight spacing. Tailwind gives you precise control over this with its tracking-* utilities.

How to apply Tailwind Letter Spacing

To apply Tailwind letter spacing to an element, you can use the tracking-{amount} utility class, where {amount} represents the spacing value.

• tracking-tighter: Applies tighter letter spacing.
• tracking-tight: Applies tight letter spacing.
• tracking-normal: Applies normal letter spacing.
• tracking-wide: Applies wide letter spacing.
• tracking-wider: Applies even wider letter spacing.
• tracking-widest: Applies the widest letter spacing.

<div class="tracking-tighter">Lorem ipsum dolor sit amet.</div>
<div class="tracking-widest">Lorem ipsum dolor sit amet.</div>

Preview

Responsive Tailwwind Letter Spacing

Tailwind CSS allows you to apply letter spacing classes responsively at different breakpoints. To use responsive letter spacing classes, you can append the breakpoint prefix to the utility class. For example, md:tracking-wide applies wider letter spacing starting from the medium breakpoint and above.

<p class="tracking-normal md:tracking-wide">Lorem ipsum dolor sit amet.</p>

Preview

In the above example, the letter spacing is set to normal by default (tracking-normal), but starting from the medium breakpoint and above, the letter spacing is changed to wider (md:tracking-wide).

🎯 Interaction States (hover/focus)

You can modify letter-spacing on hover, focus, or group-hover for subtle UI transitions.

<a class="tracking-normal hover:tracking-wider transition-all duration-200">
	Learn More
</a>

Preview

Perfect for interactive buttons or links where spacing adds a visual cue.

✏️Arbitrary Value Usage

Use arbitrary values when you need exact spacing, especially when matching Figma or brand specs.

<p class="tracking-[0.13em]">Custom spaced text</p>
<p class="tracking-[-0.01em]">Slightly tightened text</p>

Preview

Works great for display headers or logo typography where visual alignment matters.

⚙️Customization in tailwind.config.js

Extend the default letter-spacing scale to match your typography system.

// tailwind.config.js
module.exports = {
	theme: {
		extend: {
			letterSpacing: {
				brand: "0.18em",
				tagline: "0.15em",
			},
		},
	},
};

Now you can use:

<h4 class="tracking-brand uppercase text-sm">Brand Label</h4>

Preview

Custom values ensure consistency across typography styles.

🧩Real UI Component Examples

🔸Uppercase Navigation Bar

<nav class="flex gap-6 text-xs font-semibold tracking-widest uppercase">
	<a href="#">Home</a>
	<a href="#">Features</a>
	<a href="#">Pricing</a>
</nav>

Preview

🔸 Logo / Wordmark

<h1 class="text-3xl font-black tracking-tighter uppercase">Gridflow</h1>

Preview

Tighter spacing improves visual weight and balance in bold headlines.

🔸Call-To-Action Button

<button
	class="bg-blue-600 text-white px-6 py-2 rounded uppercase tracking-wider text-sm font-medium"
>
	Sign Up Free
</button>

Preview

Letter spacing gives buttons more polish and impact.

✅Best Practices for Devs & Designers

• Tight tracking (tracking-tight, tracking-tighter) works well with bold fonts and short headings.

• Wider tracking (tracking-wide, tracking-widest) is ideal for uppercase buttons, navigation, and labels.

• Avoid excessive letter-spacing on long body text — stick with tracking-normal or slight adjustments.

• Match tracking to font weight — lighter fonts often need wider spacing, while bold fonts can be tightened.

• Use responsive tracking when combining with responsive font sizes.

♿Accessibility Notes

• Letter spacing should support readability, not hinder it.

• Avoid ultra-tight spacing on small text — it can make letters blend and hurt legibility.

• Test combinations of font size, weight, and tracking-* on real devices for clarity.

Tailwind Letter Spacing Class Table

✨ What's Next?

• Tailwind line height

Windframe Tailwind blocks

Landing page