Tailwind CSS Text Underline Offset

The text underline offset defines the spacing between a text underline and the text itself, providing greater control over how the underline aligns with your typography. Tailwind CSS provides a set of utilities for applying and customizing text underline offsets efficiently in your projects. Whether you're working with standard configurations, dynamic states, breakpoints, or custom values, Tailwind has you covered.

To help you utilize text underline offset utilities effectively, this guide will walk you through all the essential facets, including core concepts and custom implementations.

Class	Properties	Example
`underline-offset-auto`	`text-underline-offset: auto;`	`<div className="underline-offset-auto"></div>`
`underline-offset-0`	`text-underline-offset: 0px;`	`<div className="underline-offset-0"></div>`
`underline-offset-1`	`text-underline-offset: 1px;`	`<div className="underline-offset-1"></div>`
`underline-offset-2`	`text-underline-offset: 2px;`	`<div className="underline-offset-2"></div>`
`underline-offset-4`	`text-underline-offset: 4px;`	`<div className="underline-offset-4"></div>`
`underline-offset-8`	`text-underline-offset: 8px;`	`<div className="underline-offset-8"></div>`

Overview of Text Underline Offset

Adding the Text Underline Offset

To use text underline offset utilities in Tailwind, simply apply them to your desired elements. Here's an example:

This is a live editor. Play around with it!

export default function TextUnderlineOffsetDemo() {
  return (
    <div 
      className="w-screen h-screen text-center flex items-center justify-center bg-gray-100"
    >
      <p className="underline underline-offset-8 text-lg text-gray-800">
        Tailwind CSS Text Underline Offset
      </p>
    </div>
  );
}
/* 
  underline: Enables text underline
  underline-offset-8: Sets underline offset to '8px'
*/

In this example:

The underline class places an underline beneath the text.
The underline-offset-8 property specifies a 8px distance between the text and its underline.

States and Responsiveness

Tailwind allows you to conditionally apply underline offsets based on interaction states (e.g., hover, focus) and responsive breakpoints. This is especially useful when designing responsive and interactive typography.

Hover and Focus States

Tailwind's state-driven utilities make it easy for developers to modify text styling during user interactions. Here's an example showing a dynamic underline offset adjustment:

This is a live editor. Play around with it!

export default function HoverFocusOffsetDemo() {
  return (
    <div 
      className="w-screen h-screen flex items-center justify-center bg-gray-300"
    >
      <p className="underline underline-offset-4 hover:underline-offset-8 text-xl text-blue-600">
        Hover over this text to see the underline offset change!
      </p>
    </div>
  );
}
/*
  underline-offset-4: Sets initial offset to '4px'
  hover:underline-offset-8: Adjusts offset to '8px' on hover
*/

In this interactive setup:

A 4px underline offset is set initially.
The hover:underline-offset-8 class dynamically increases the distance to 8px during a hover event.

Leverage state modifiers like hover, focus, or others for creating interactive and engaging text designs.

Breakpoint Modifiers

You can also apply responsive breakpoints for conditional underline offsetting based on screen size. This ensures that your underline aligns seamlessly, irrespective of the device type.

This is a live editor. Play around with it!

export default function ResponsiveOffsetDemo() {
  return (
    <div className="w-screen h-screen flex flex-col items-center justify-center bg-white">
      <p className="underline underline-offset-2 sm:underline-offset-4 lg:underline-offset-8 text-lg">
        Adjusting offset across screen sizes
      </p>
      <img 
        className="mt-4 w-1/3" 
        src="https://images.unsplash.com/photo-1705909237050-7a7625b47fac"
        alt="Demo"
      />
    </div>
  );
}
/*
  underline-offset-2: Default '2px' offset
  sm:underline-offset-4: Applies '4px' offset on small screens
  lg:underline-offset-8: Sets '8px' offset on large screens
*/

This workflow demonstrates:

A 2px offset for default configurations.
Incremental underline offsets at different breakpoints (sm for small and lg for large screens).

Custom Text Underline Offset

If the default values offered by Tailwind CSS don’t suffice for your project, you can introduce custom configurations or directly specify arbitrary values.

Extending the Theme

Tailwind allows developers to extend its theme via the Tailwind configuration file (tailwind.config.js). Below is the process for adding custom underline offset values. After making the below configurations, you can leverage the new utility classes in your code like this:

This is a live editor. Play around with it!

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

export default function ExtendedThemeOffsetDemo() {
  return (
    <div
      className="w-screen h-screen flex flex-col gap-4 items-center justify-center bg-blue-50"
    >
      <p className="underline underline-offset-12 text-xl text-red-500">
        Custom underline offset of 12px
      </p>
      <p className="underline underline-offset-20 text-lg text-green-500">
        Custom underline offset of 20px
      </p>
    </div>
  );
}

Using Arbitrary Values

For projects requiring on-the-fly value customization, Tailwind's arbitrary values feature lets you specify non-standard utilities directly in your markup:

This is a live editor. Play around with it!

export default function ArbitraryValueOffsetDemo() {
  return (
    <div 
      className="w-screen h-screen flex items-center justify-center bg-gray-100"
    >
      <p className="underline underline-offset-[10px] text-lg text-purple-600">
        Arbitrary value: underline-offset at 10px
      </p>
    </div>
  );
}
/* 
  [text-underline-offset:10px]: Directly applies 10px underline offset.
*/

Real World Examples

This example shows a modern navigation menu where links have a smooth underline offset transition on hover.

This is a live editor. Play around with it!

export default function NavigationMenu() {
  const menuItems = [
    { id: 1, label: 'Home', path: '/' },
    { id: 2, label: 'Products', path: '/products' },
    { id: 3, label: 'Services', path: '/services' },
    { id: 4, label: 'Portfolio', path: '/portfolio' },
    { id: 5, label: 'About Us', path: '/about' },
    { id: 6, label: 'Contact', path: '/contact' }
  ];

  return (
    <nav className="bg-gray-900 p-6">
      <ul className="flex justify-center space-x-8">
        {menuItems.map((item) => (
          <li key={item.id}>
            <a
              href={item.path}
              className="text-white text-lg underline decoration-2 underline-offset-8 hover:underline-offset-4 transition-all duration-300"
            >
              {item.label}
            </a>
          </li>
        ))}
      </ul>
    </nav>
  );
}

Book Collection Cards

A responsive grid of book cards with underlined titles that adjust their offset on hover.

This is a live editor. Play around with it!

export default function BookCollection() {
  const books = [
    { id: 1, title: 'The Digital Age', author: 'John Smith', cover: 'https://images.unsplash.com/photo-1544947950-fa07a98d237f', price: '$29.99' },
    { id: 2, title: 'Future of AI', author: 'Sarah Johnson', cover: 'https://images.unsplash.com/photo-1532012197267-da84d127e765', price: '$34.99' },
    { id: 3, title: 'Web Development', author: 'Mike Wilson', cover: 'https://images.unsplash.com/photo-1589998059171-988d887df646', price: '$24.99' },
    { id: 4, title: 'Design Patterns', author: 'Emma Davis', cover: 'https://images.unsplash.com/photo-1497633762265-9d179a990aa6', price: '$39.99' },
    { id: 5, title: 'Cloud Computing', author: 'Alex Turner', cover: 'https://images.unsplash.com/photo-1532012197267-da84d127e765', price: '$27.99' },
    { id: 6, title: 'Cybersecurity', author: 'Lisa Anderson', cover: 'https://images.unsplash.com/photo-1532012197267-da84d127e765', price: '$31.99' }
  ];

  return (
    <div className="grid grid-cols-1 md:grid-cols-3 gap-6 p-8">
      {books.map((book) => (
        <div key={book.id} className="bg-white rounded-lg shadow-lg p-4">
          <img src={book.cover} alt={book.title} className="w-full h-48 object-cover rounded-t-lg" />
          <h3 className="text-xl font-semibold mt-4 underline decoration-blue-500 underline-offset-4 hover:underline-offset-8 transition-all duration-300">
            {book.title}
          </h3>
          <p className="text-gray-600">{book.author}</p>
          <p className="text-blue-600 font-bold mt-2">{book.price}</p>
        </div>
      ))}
    </div>
  );
}

Feature List with Decorative Underlines

A feature list where each item has a custom underline offset and animation.

This is a live editor. Play around with it!

export default function FeatureList() {
  const features = [
    { id: 1, title: 'Cloud Storage', description: 'Secure and scalable storage solutions', icon: 'https://images.unsplash.com/photo-1590859808308-3d2d9c515b1a' },
    { id: 2, title: 'Real-time Analytics', description: 'Advanced data insights', icon: 'https://images.unsplash.com/photo-1551288049-bebda4e38f71' },
    { id: 3, title: 'API Integration', description: 'Seamless third-party connections', icon: 'https://images.unsplash.com/photo-1558494949-ef010cbdcc31' },
    { id: 4, title: 'Multi-platform Support', description: 'Works on all devices', icon: 'https://images.unsplash.com/photo-1526374965328-7f61d4dc18c5' },
    { id: 5, title: 'Advanced Security', description: 'Enterprise-grade protection', icon: 'https://images.unsplash.com/photo-1563986768609-322da13575f3' },
    { id: 6, title: '24/7 Support', description: 'Round-the-clock assistance', icon: 'https://images.unsplash.com/photo-1560264280-88b68371db39' }
  ];

  return (
    <div className="bg-gray-100 p-8">
      <div className="max-w-4xl mx-auto">
        {features.map((feature) => (
          <div key={feature.id} className="mb-8 flex items-center group">
            <img src={feature.icon} alt={feature.title} className="w-12 h-12 object-cover rounded-full" />
            <div className="ml-4">
              <h3 className="text-xl font-bold underline decoration-indigo-500 underline-offset-2 group-hover:underline-offset-8 transition-all duration-500">
                {feature.title}
              </h3>
              <p className="text-gray-600">{feature.description}</p>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

Team Member Profile Cards

Profile cards with underlined sections that respond to user interaction.

This is a live editor. Play around with it!

export default function TeamProfiles() {
  const team = [
    { id: 1, name: 'Emma Wilson', role: 'CEO', image: 'https://images.unsplash.com/photo-1438761681033-6461ffad8d80', linkedin: '#' },
    { id: 2, name: 'James Cooper', role: 'CTO', image: 'https://images.unsplash.com/photo-1500648767791-00dcc994a43e', linkedin: '#' },
    { id: 3, name: 'Sophie Turner', role: 'Design Lead', image: 'https://images.unsplash.com/photo-1534528741775-53994a69daeb', linkedin: '#' },
    { id: 4, name: 'Michael Chen', role: 'Developer', image: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d', linkedin: '#' },
    { id: 5, name: 'Laura Smith', role: 'Marketing', image: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330', linkedin: '#' },
    { id: 6, name: 'David Kim', role: 'Product Manager', image: 'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e', linkedin: '#' }
  ];

  return (
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 p-8 bg-gray-50">
      {team.map((member) => (
        <div key={member.id} className="bg-white rounded-xl p-6 shadow-lg">
          <img src={member.image} alt={member.name} className="w-32 h-32 rounded-full mx-auto mb-4" />
          <h3 className="text-xl font-bold text-center underline decoration-pink-500 underline-offset-4 hover:underline-offset-8 transition-all duration-300">
            {member.name}
          </h3>
          <p className="text-gray-600 text-center mt-2">{member.role}</p>
          <a
            href={member.linkedin}
            className="block text-center mt-4 text-blue-600 underline underline-offset-2 hover:underline-offset-4 transition-all"
          >
            View Profile
          </a>
        </div>
      ))}
    </div>
  );
}

Article Preview Cards

Blog article previews with dynamic underline effects on headings.

This is a live editor. Play around with it!

export default function ArticlePreviews() {
  const articles = [
    { id: 1, title: 'The Future of Web Development', category: 'Technology', image: 'https://images.unsplash.com/photo-1498050108023-c5249f4df085', readTime: '5 min' },
    { id: 2, title: 'Understanding Machine Learning', category: 'AI', image: 'https://images.unsplash.com/photo-1555949963-ff9fe0c870eb', readTime: '7 min' },
    { id: 3, title: 'Design Systems in 2024', category: 'Design', image: 'https://images.unsplash.com/photo-1561736778-92e52a7769ef', readTime: '4 min' },
    { id: 4, title: 'Optimizing React Performance', category: 'Development', image: 'https://images.unsplash.com/photo-1533929736458-ca588d08c8be', readTime: '6 min' },
    { id: 5, title: 'CSS Best Practices', category: 'Frontend', image: 'https://images.unsplash.com/photo-1523437113738-bbd3cc89fb19', readTime: '3 min' },
    { id: 6, title: 'Modern JavaScript Features', category: 'Programming', image: 'https://images.unsplash.com/photo-1555066931-4365d14bab8c', readTime: '8 min' }
  ];

  return (
    <div className="bg-gray-100 p-8">
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        {articles.map((article) => (
          <div key={article.id} className="bg-white rounded-lg overflow-hidden shadow-md">
            <img src={article.image} alt={article.title} className="w-full h-48 object-cover" />
            <div className="p-6">
              <span className="text-sm text-blue-600 font-semibold">{article.category}</span>
              <h3 className="text-xl font-bold mt-2 group">
                <a href="#" className="underline decoration-2 underline-offset-2 group-hover:underline-offset-8 transition-all duration-300">
                  {article.title}
                </a>
              </h3>
              <p className="text-gray-500 mt-2">{article.readTime} read</p>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

Customization Examples

Create a navigation menu where menu items feature a custom underline offset that matches your brand's design system. The underline appears on hover with a smooth transition.

This is a live editor. Play around with it!

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

// App.js
export default function BrandNavigation() {
  const menuItems = ['Products', 'About', 'Contact'];
  
  return (
    <nav className="bg-slate-900 p-6">
      <div className="max-w-6xl mx-auto flex justify-between items-center">
        <div className="flex gap-8">
          {menuItems.map((item) => (
            <a
              key={item}
              href={`#${item.toLowerCase()}`}
              className="text-white text-lg font-medium decoration-2 underline-offset-brand hover:underline hover:decoration-blue-400 transition-all duration-300"
            >
              {item}
            </a>
          ))}
        </div>
      </div>
    </nav>
  );
}

Article Header with Dynamic Underline Offset

Implement an article header where the title and subtitle have different underline offsets that adjust based on screen size.

This is a live editor. Play around with it!

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

// App.js
export default function ArticleHeader() {
  return (
    <header className="max-w-4xl mx-auto px-4 py-12">
      <h1 className="text-4xl md:text-6xl font-bold mb-6 underline decoration-emerald-500 
        decoration-[3px] underline-offset-mobile md:underline-offset-title">
        The Future of Web Development
      </h1>
      <div className="flex items-center gap-4 mb-8">
        <p className="text-lg text-gray-600 underline underline-offset-subtitle">
          Written by Sarah Johnson
        </p>
      </div>
    </header>
  );
}

3. Product Card with Interactive Price Tag

Design a product card featuring a price tag with a custom underline offset that changes on hover to create a floating effect.

This is a live editor. Play around with it!

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

// App.js
export default function ProductCard() {
  return (
    <div className="max-w-sm rounded-xl overflow-hidden shadow-lg bg-white">
      <div className="relative">
        <img
          src="https://images.unsplash.com/photo-1505740420928-5e560c06d30e"
          alt="Product"
          className="w-full h-64 object-cover"
        />
        <span className="absolute top-4 right-4 bg-white px-4 py-2 rounded-full
          text-xl font-bold text-emerald-600 underline decoration-2 
          underline-offset-price hover:underline-offset-price-hover
          transition-all duration-300 cursor-pointer">
          $299
        </span>
      </div>
      <div className="p-6">
        <h2 className="text-2xl font-bold mb-3">Premium Wireless Headphones</h2>
        <p className="text-gray-600 mb-4">
          Experience crystal-clear audio with our latest noise-cancelling technology
        </p>
        <button className="w-full bg-black text-white py-3 rounded-lg
          hover:bg-gray-800 transition-colors duration-300">
          Add to Cart
        </button>
      </div>
    </div>
  );
}

Best Practices

Maintain Design Consistency

A consistent design system is key to creating aesthetically pleasing and highly functional UIs. When using Text Underline Offset in Tailwind CSS, ensure uniformity across typographic elements like headings, links, and buttons. Defining specific values for underline offsets in your tailwind.config.js file can help maintain a professional look and feel throughout your project. For instance, you might establish fixed values for offset sizes for use across primary and secondary text styles.

In addition, avoid arbitrary mixing of underline offsets unless there’s a deliberate reason tied to branding or functionality. Consistency reinforces a polished look and improves usability, making it easier for users to understand visual patterns across the UI.

Leverage Utility Combinations

Tailwind CSS thrives on the composability of utility classes, enabling you to combine underline offsets with other utilities to craft more complex, elegant visuals. For instance, pairing text-decoration-color, text-decoration-style with underline offset yields visually appealing and functional text decorations.

This is a live editor. Play around with it!

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

export default function CombinedUtilities() {
  return (
    <div className="w-screen h-screen flex flex-col items-center justify-center bg-gray-100 space-y-4">
      <a
        href="#"
        className="text-2xl underline decoration-blue-500 decoration-dotted underline-offset-4 hover:decoration-solid hover:underline-offset-8 transition-all duration-300"
      >
        Hover to see changes
      </a>
      <a
        href="#"
        className="text-xl underline decoration-pink-400 decoration-wavy underline-offset-6 hover:decoration-double hover:underline-offset-10 transition-all duration-300"
      >
        Discover more styles
      </a>
    </div>
  );
}

Add variations in decoration colors, underline styles, and offsets to create sophisticated interactions and designs. For interactive components, such as navigation links, combining underline offsets with hover or focus states ensures a visually engaging experience.

Combining utilities also allows you to balance clarity and functionality without sacrificing maintainability. Keep class names granular and avoid creating excessive unique styles that clutter your codebase.

Accessibility Considerations

Enhance Readability and Navigability

Text underlines, when properly configured, play a critical role in improving readability and navigability for all users, especially those with visual impairments or cognitive challenges. Tailwind CSS allows you to set underline offsets that improve the visual relationship between text and its decoration, reducing visual clutter and enhancing legibility.

For example, setting larger underline offsets on hover states for interactive links can help users identify focusable elements more easily, particularly on dense pages with multiple navigation links.

This is a live editor. Play around with it!

export default function AccessibleLinks() {
  return (
    <div className="w-screen h-screen flex flex-col items-center justify-center space-y-8 bg-blue-50">
      <a
        href="#"
        className="text-xl text-blue-600 underline underline-offset-4 hover:underline-offset-8 transition-all duration-300"
      >
        Focusable Link 1
      </a>
      <a
        href="#"
        className="text-xl text-blue-600 underline underline-offset-4 hover:underline-offset-8 transition-all duration-300"
      >
        Focusable Link 2
      </a>
    </div>
  );
}

Appropriately offset underlines can also assist screen readers by reinforcing visual contrast without compromising the natural flow of text. Always test for clarity by zooming and performing visual checks when designing underline offsets for web applications.

Focus on High Contrast

Underlines have to be easily distinguishable from the text itself to ensure clear content comprehension, especially for users with low vision. By combining larger offsets with clear color contrast ratios, you can ensure text remains visually legible and adheres to accessibility standards.

This is a live editor. Play around with it!

export default function HighContrastUnderlines() {
  return (
    <div className="w-screen h-screen flex flex-col items-center justify-center bg-gray-100 space-y-6">
      <p className="text-lg underline underline-offset-4 decoration-black">
        High-contrast underlines for readability
      </p>
      <p className="text-lg underline underline-offset-4 decoration-red-700">
        Accessibility-focused text decoration
      </p>
    </div>
  );
}

Testing underline readability with tools such as Chrome’s Lighthouse or dedicated contrast-checking features is strongly recommended to ensure designs pass WCAG compliance.

For best practices, aim for a contrast ratio of 4.5:1 for foreground and decoration colors when pairing underline offsets with text-based content, minimizing visual strain across diverse user groups.

Text Decoration Style Font Family

Tailwind CSS Text Underline Offset

Overview of Text Underline Offset

Adding the Text Underline Offset

States and Responsiveness

Hover and Focus States

Breakpoint Modifiers

Custom Text Underline Offset

Extending the Theme

Using Arbitrary Values

Real World Examples

Navigation Menu with Hover Underline Effect

Book Collection Cards

Feature List with Decorative Underlines

Team Member Profile Cards

Article Preview Cards

Customization Examples

Custom Navigation Menu with Brand-Specific Underline Offset

Article Header with Dynamic Underline Offset

3. Product Card with Interactive Price Tag

Best Practices

Maintain Design Consistency

Leverage Utility Combinations

Accessibility Considerations

Enhance Readability and Navigability

Focus on High Contrast