Tailwind CSS Letter Spacing

Letter spacing, often referred to as "tracking" in typography, defines the horizontal space between characters in text. It can significantly impact the readability and design of your website. In CSS, this is controlled by the letter-spacing property.

This guide will explore how to use letter-spacing utilities in Tailwind CSS. We will cover setting up basic letter spacing, applying conditional styles with states and breakpoints, and even introducing custom values to your project. By the end of this document, you’ll be proficient in tailoring text for your design needs, from headers to paragraphs or special text components.

Class	Properties	Example
`tracking-tighter`	`letter-spacing: -0.05em;`	`<div className="tracking-tighter"></div>`
`tracking-tight`	`letter-spacing: -0.025em;`	`<div className="tracking-tight"></div>`
`tracking-normal`	`letter-spacing: 0em;`	`<div className="tracking-normal"></div>`
`tracking-wide`	`letter-spacing: 0.025em;`	`<div className="tracking-wide"></div>`
`tracking-wider`	`letter-spacing: 0.05em;`	`<div className="tracking-wider"></div>`
`tracking-widest`	`letter-spacing: 0.1em;`	`<div className="tracking-widest"></div>`

Overview of Letter Spacing

Tailwind CSS includes pre-configured utilities for common letter-spacing values. These classes are intuitive and simple to use, making adjustments quick and uniform across your project.

Adding Letter Spacing

With Tailwind, you can set letter spacing on text elements with utilities like tracking-tighter, tracking-wide, and more.

In the tracking-tighter class, characters squeeze together, perfect for situations demanding compact text. Conversely, tracking-wide spreads them apart, providing a clean and elegant touch.

Below, you'll learn to apply them directly in your projects.

This is a live editor. Play around with it!

export default function LetterSpacingBasic() {
  return (
    <div className="w-screen h-screen flex items-center justify-center">
      <div className="text-center text-lg">
        <p className="tracking-tighter">
          {/* letter-spacing: -0.05em */}
          This text has tighter spacing
        </p>
        <p className="tracking-wide mt-4">
          {/* letter-spacing: 0.05em */}
          This text has wide spacing
        </p>
      </div>
    </div>
  );
}

Adding Negative Letter Spacing

Letter spacing isn’t always about increasing space—it can be reduced as well using negative values. Negative spacing creates dramatic design effects and adds attention to text. Tailwind allows you to do this efficiently via negative tracking utilities.

This is a live editor. Play around with it!

import tailwindConfig from "./tailwind.config.js";
tailwind.config = tailwindConfig;

export default function NegativeSpacing() {
  return (
    <div className="w-screen h-screen flex items-center justify-center">
      <div className="text-center">
        <p className="-tracking-1 p-4 mt-6">
          {/* letter-spacing: -0.11rem */}
          This text has negative letter spacing
        </p>
      </div>
    </div>
  );
}

State and Responsiveness

Letter spacing doesn’t have to remain static. You can apply conditional letter-spacing utilities built for interactivity, such as hover or focus. These allow you to create dynamic and immersive user experiences.

Hover and Focus States

Text spacing can change as users engage with page elements using a mouse or keyboard focus. Here, spacing increases to provide emphasis or visual feedback on hover. Perfect for buttons, links, or CTAs.

This is a live editor. Play around with it!

export default function ConditionalOnHover() {
  return (
    <div className="w-screen h-screen flex items-center justify-center">
      <p className="text-lg tracking-normal hover:tracking-widest px-10 text-center">
        {/* Default: letter-spacing: 0em */}
        {/* On Hover: letter-spacing: 0.25em */}
        Hover to increase the letter spacing of this text.  
      </p>
    </div>
  );
}

Breakpoint Modifiers

Breakpoints also let you fine-tune spacing under varying conditions, like screen size. Tailwind’s responsive utilities simplify this. It automatically handles distinctions, such as smaller spacing for compact screens and wider spacing for larger ones.

This is a live editor. Play around with it!

export default function BreakpointsExample() {
  return (
    <div className="w-screen h-screen flex items-center justify-center">
      <div className="text-center">
        <p className="text-sm sm:text-lg sm:tracking-normal md:text-3xl md:tracking-widest px-20">
          {/* Small Screens: letter-spacing: 0em */}
          {/* Medium Screens: letter-spacing: 0.05em */}
          The letter spacing of this text will change according to the screen.
        </p>
      </div>
    </div>
  );
}

Custom Letter Spacing

By default, Tailwind comes with a predefined range of tracking options. However, situations arise when these aren’t enough, especially for unique branding or design. Tailwind allows extensive customization within your tailwind.config.js.

Extending the Theme

To add unique spacing values, update the theme extension—ideal when creating custom styles for headers, logos, or creative typography.

Once added, simply reference these new classes:

This is a live editor. Play around with it!

import tailwindConfig from "./tailwind.config.js";
tailwind.config = tailwindConfig;

export default function CustomSpacing() {
  return (
    <div className="w-screen h-screen flex flex-col items-center justify-center text-center">
      <p className="text-lg tracking-extraTight px-10">
        {/* Custom letter-spacing: -0.1em */}
        This text is using extraTight letter spacing. 
      </p>
      <p className="mt-6 tracking-superWide px-10">
        {/* Custom letter-spacing: 0.3em */}
        This text is using a superWide letter spacing.  
      </p>
    </div>
  );
}

Using Arbitrary Values

Tailwind also supports arbitrary values. If you need a one-off implementation without extending your theme, add a value inline with square brackets syntax. This approach is flexible, allowing you to experiment without editing theme files:

This is a live editor. Play around with it!

export default function ArbitraryValues() {
  return (
    <div className="w-screen h-screen flex items-center justify-center">
      <div className="text-center">
        <p className="text-2xl tracking-[0.15em] mb-4 px-10">
          {/* Inline letter-spacing: 0.15em */}
         This text is using an arbitrary spacing of '0.15' em.
        </p>
      </div>
    </div>
  );
}

Real World Examples

Product Category Headers with Dynamic Spacing

This example demonstrates how to create elegant category headers with different letter spacing based on text size.

This is a live editor. Play around with it!

export default function CategoryHeaders() {
  const categories = [
    { id: 1, name: "ELECTRONICS", items: 245 },
    { id: 2, name: "FASHION", items: 189 },
    { id: 3, name: "HOME DECOR", items: 167 },
    { id: 4, name: "BOOKS", items: 432 },
    { id: 5, name: "SPORTS", items: 156 },
    { id: 6, name: "AUTOMOTIVE", items: 98 }
  ];

  return (
    <div className="grid gap-6 p-8 bg-gray-50">
      {categories.map((category) => (
        <div key={category.id} className="flex justify-between items-center border-b pb-4">
          <h2 className="text-2xl font-bold tracking-widest text-gray-800">
            {category.name}
          </h2>
          <span className="text-sm tracking-tight text-gray-600">
            {category.items} items
          </span>
        </div>
      ))}
    </div>
  );
}

Article Headlines with Progressive Spacing

This component shows how to implement progressive letter spacing for article headlines.

This is a live editor. Play around with it!

export default function NewsHeadlines() {
  const articles = [
    {
      id: 1,
      title: "The Future of AI",
      category: "Technology",
      image: "https://images.unsplash.com/photo-1625314868143-20e93ce3ff33",
      alt: "AI visualization"
    },
    {
      id: 2,
      title: "Sustainable Living",
      category: "Lifestyle",
      image: "https://images.unsplash.com/photo-1557687790-902ede7ab58c",
      alt: "Eco-friendly home"
    },
    // ... more articles
  ];

  return (
    <div className="space-y-8 p-6">
      {articles.map((article) => (
        <div key={article.id} className="relative">
          <img 
            src={article.image} 
            alt={article.alt}
            className="w-full h-64 object-cover rounded-lg"
          />
          <div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black p-6">
            <span className="text-xs tracking-[0.3em] text-yellow-400 uppercase">
              {article.category}
            </span>
            <h3 className="text-3xl font-bold tracking-wide text-white mt-2">
              {article.title}
            </h3>
          </div>
        </div>
      ))}
    </div>
  );
}

This example shows a navigation menu with letter spacing transitions on hover.

This is a live editor. Play around with it!

export default function NavigationMenu() {
  const menuItems = [
    { id: 1, name: "HOME", path: "/" },
    { id: 2, name: "ABOUT", path: "/about" },
    { id: 3, name: "SERVICES", path: "/services" },
    { id: 4, name: "PORTFOLIO", path: "/portfolio" },
    { id: 5, name: "BLOG", path: "/blog" },
    { id: 6, name: "CONTACT", path: "/contact" }
  ];

  return (
    <nav className="bg-black py-4 pl-6">
      <ul className="flex justify-center space-x-8">
        {menuItems.map((item) => (
          <li key={item.id}>
            <a
              href={item.path}
              className="text-sm text-white tracking-normal hover:tracking-widest transition-all duration-300"
            >
              {item.name}
            </a>
          </li>
        ))}
      </ul>
    </nav>
  );
}

Team Member Cards with Varied Typography

This component displays team member cards with different letter spacing for various text elements.

This is a live editor. Play around with it!

export default function TeamGrid() {
  const team = [
    {
      id: 1,
      name: "Sarah Johnson",
      role: "LEAD DESIGNER",
      image: "https://images.unsplash.com/photo-1494790108377-be9c29b29330",
      alt: "Sarah Johnson profile"
    },
    // ... more team members
  ];

  return (
    <div className="grid gap-8 p-10">
      {team.map((member) => (
        <div key={member.id} className="bg-white rounded-xl shadow-lg overflow-hidden">
          <img
            src={member.image}
            alt={member.alt}
            className="w-full h-64 object-cover"
          />
          <div className="p-6 text-center">
            <h3 className="text-2xl font-semibold tracking-tight text-gray-800">
              {member.name}
            </h3>
            <p className="mt-2 text-sm tracking-[0.25em] text-gray-600">
              {member.role}
            </p>
          </div>
        </div>
      ))}
    </div>
  );
}

Price Cards with Emphasized Typography

This example shows pricing cards with strategic letter spacing for better readability.

This is a live editor. Play around with it!

export default function PricingCards() {
  const plans = [
    {
      id: 1,
      name: "STARTER",
      price: 29,
      features: ["5 Projects", "10GB Storage", "Basic Support"],
      popular: false
    },
    {
      id: 2,
      name: "PROFESSIONAL",
      price: 99,
      features: ["15 Projects", "50GB Storage", "Priority Support"],
      popular: true
    },
    // ... more pricing plans
  ];

  return (
    <div className="flex flex-wrap gap-4 justify-center p-10">
      {plans.map((plan) => (
        <div
          key={plan.id}
          className={`p-8 w-60 rounded-2xl ${
            plan.popular ? 'bg-indigo-900 text-white' : 'bg-white text-gray-800'
          } shadow-xl`}
        >
          <h3 className="text-sm tracking-[0.4em] font-medium">
            {plan.name}
          </h3>
          <div className="mt-4">
            <span className="text-5xl font-bold tracking-tight">
              ${plan.price}
            </span>
            <span className="text-sm tracking-wide">/month</span>
          </div>
          <ul className="mt-6 space-y-4">
            {plan.features.map((feature, index) => (
              <li key={index} className="text-sm tracking-normal">
                {feature}
              </li>
            ))}
          </ul>
        </div>
      ))}
    </div>
  );
}

Customization Examples

Dynamic Letter Spacing for Article Headlines

This example demonstrates how to create dynamic letter spacing for article headlines based on viewport size.

This is a live editor. Play around with it!

import tailwindConfig from "./tailwind.config.js";
tailwind.config = tailwindConfig;

export default function ArticleHeader() {
  return (
    <div className="max-w-4xl mx-auto p-8 bg-gray-50 h-screen">
      <h1 className="text-4xl font-bold tracking-headline-sm md:tracking-headline lg:tracking-headline-lg 
        text-gray-800 uppercase transition-all duration-300">
        Breaking Technology News
      </h1>
      <p className="mt-4 text-lg text-gray-600">
        Latest updates from the tech world
      </p>
    </div>
  );
}

Brand Identity Typography System

This example shows how to implement a consistent brand typography system with custom letter spacing.

This is a live editor. Play around with it!

import tailwindConfig from "./tailwind.config.js";
tailwind.config = tailwindConfig;

export default function BrandingComponent() {
  return (
    <div className="bg-indigo-900 text-white p-12 h-screen">
      <div className="space-y-8">
        <h1 className="text-5xl font-bold tracking-brand-tight">
          INNOVATE
        </h1>
        <h2 className="text-3xl tracking-brand-normal">
          DESIGN SYSTEM
        </h2>
        <p className="text-xl tracking-brand-wide uppercase">
          Brand Guidelines
        </p>
        <span className="text-sm tracking-brand-ultra uppercase">
          Version 2.0
        </span>
      </div>
    </div>
  );
}

Product Card with Variable Letter Spacing

This example demonstrates how to create an elegant product card with different letter spacing for various text elements.

This is a live editor. Play around with it!

import tailwindConfig from "./tailwind.config.js";
tailwind.config = tailwindConfig;

export default function ProductCard() {
  return (
    <div className="max-w-sm mx-auto bg-white rounded-xl shadow-lg overflow-hidden">
      <div className="relative">
        <img 
          src="https://images.unsplash.com/photo-1523275335684-37898b6baf30"
          alt="Premium Watch"
          className="w-full h-64 object-cover"
        />
        <span className="absolute top-4 right-4 bg-black text-white px-4 py-1 
          tracking-product-category uppercase text-xs">
          Premium
        </span>
      </div>
      
      <div className="p-6 space-y-4">
        <h2 className="text-2xl font-bold tracking-product-title uppercase">
          Chronograph Watch
        </h2>
        
        <p className="text-gray-600 tracking-product-price">
          Limited Edition Series
        </p>
        
        <div className="flex justify-between items-center">
          <span className="text-xl font-bold tracking-product-price">
            $599.99
          </span>
          <button className="bg-black text-white px-6 py-2 rounded-full 
            tracking-product-cta uppercase text-sm hover:bg-gray-800 
            transition-colors duration-300">
            Add to Cart
          </button>
        </div>
      </div>
    </div>
  );
}

Best Practices

Maintain Design Consistency

Maintain proportional balance between letter spacing and other typography-related properties such as font size, weight, and line height. Headers might benefit from tighter spacing (tracking-tight) for a bold statement, while body text typically thrives with more neutral spacing (tracking-normal) to prioritize readability. Define clear spacing rules for titles, subtitles, captions, and links in your design system to enforce this alignment.

You can also create custom letterSpacing classes in your tailwind.config.js file. If your brand typography calls for slightly tighter spacing overall, you can extend the default theme to meet those unique requirements. This allows you to establish project-wide consistency without having to rethink spacing for every individual element.

Balance with Other Layout Properties

Letter spacing works best when integrated into a complete layout design. To avoid disjointed interfaces, complement your spacing utilities with alignment utilities such as text-center, margin classes like mt-4, or padding utilities like px-6. This ensures text spacing harmonizes with other layout components rather than feeling isolated.

For example, a centered header with balanced letter spacing feels more intentional when padded evenly and paired with Tailwind's margin spacing utilities:

This is a live editor. Play around with it!

export default function CenteredHeader() {
  return (
    <div className="flex flex-col items-center justify-center h-screen p-6 bg-gray-100">
      <h1 className="text-3xl tracking-wider font-extrabold text-gray-900">
        Welcome to Tailwind Framework  
      </h1>
      <p className="text-base tracking-normal mt-4 text-gray-600">
        Learn how to balance layout and spacing effectively in any design.
      </p>
    </div>
  );
}

Balance can also be visualized in hierarchical text systems, where headers, subheaders, and body content are spaced in a way that naturally conveys their importance. A header with tracking-tight might be emphasized by subheaders using tracking-wide, with body content relying on neutral spacing for better readability. Striking this balance ensures your layout is functional and appealing.

Accessibility Considerations

Enhance Readability and Navigability

Letter spacing plays a vital role in making your designs readable for all users, including those with cognitive or visual impairments. Proper spacing helps mitigate issues with letter recognition, reducing fatigue and improving comprehension. For body text, it’s advisable to avoid overly tight (tracking-tight) configurations, as compressed characters can impact readability.

Use utilities like tracking-normal or custom tracking-[value] tailored to content. For example, if you're designing interfaces for educational or legal contexts where clarity is paramount, slightly increased spacing can help users absorb dense content more efficiently:

This is a live editor. Play around with it!

export default function ReadableText() {
  return (
    <div className="p-8 bg-white">
      <p className="text-lg leading-loose tracking-wide text-gray-800">
        Tailwind CSS ensures a balance between clean design and practical readability, making it an ideal framework for large-scale projects.
      </p>
    </div>
  );
}

Readable and navigable text benefits from proper letter spacing, so pair this with carefully considered line heights (leading-) and font choices (font-sans/font-serif) for consistent accessibility improvements.

Support Accessible Interactive Elements

Interactive elements, such as links, buttons, and CTAs, need sufficient spacing to clearly differentiate individual characters. Overly condensed (tracking-tighter) or excessively spaced text (tracking-widest) can confuse users relying on screen readers or magnification tools. Strike a balance that ensures text remains legible at varying zoom levels and across customizable accessibility settings.

Enhance these interactive elements with outlined or underlined text states when focusing via keyboard or mouse. For instance, you can apply a combination of focus:outline along with hover:tracking-wide for a polished interaction design:

This is a live editor. Play around with it!

export default function InteractiveNavigation() {
  return (
    <div className="flex items-center justify-center h-screen bg-slate-100">
      <a
        href="#"
        className="text-lg tracking-normal text-blue-500 hover:tracking-wide focus:outline focus:outline-2 
          focus:outline-blue-300 transition-all">
        Learn More  
      </a>
    </div>
  );
}

Font Weight Line Height

Tailwind CSS Letter Spacing

Overview of Letter Spacing

Adding Letter Spacing

Adding Negative Letter Spacing

State and Responsiveness

Hover and Focus States

Breakpoint Modifiers

Custom Letter Spacing

Extending the Theme

Using Arbitrary Values

Real World Examples

Product Category Headers with Dynamic Spacing

Article Headlines with Progressive Spacing

Navigation Menu with Hover Effects

Team Member Cards with Varied Typography

Price Cards with Emphasized Typography

Customization Examples

Dynamic Letter Spacing for Article Headlines

Brand Identity Typography System

Product Card with Variable Letter Spacing

Best Practices

Maintain Design Consistency

Balance with Other Layout Properties

Accessibility Considerations

Enhance Readability and Navigability

Support Accessible Interactive Elements