Browser Support
Flex Direction
Flex Wrap
Justify Items
Justify Self
Menu

Tailwind CSS Text Indent

Text indentation plays a key role in enhancing text readability within your application. In CSS, text-indent is a property used to adjust the starting horizontal space of the first line in a block of text. It is especially useful for creating aesthetically aligned paragraphs.

This guide dives into how you can work with Text Indent utilities in Tailwind CSS. You’ll learn how to implement them in real-world scenarios, use conditional logic, set breakpoints, and customize values for tailor-fit behavior.

ClassPropertiesExample
indent-0text-indent: 0px;<div className="indent-0"></div>
indent-pxtext-indent: 1px;<div className="indent-px"></div>
indent-0.5text-indent: 0.125rem; <div className="indent-0.5"></div>
indent-1text-indent: 0.25rem; <div className="indent-1"></div>
indent-1.5text-indent: 0.375rem; <div className="indent-1.5"></div>
indent-2text-indent: 0.5rem; <div className="indent-2"></div>
indent-2.5text-indent: 0.625rem; <div className="indent-2.5"></div>
indent-3text-indent: 0.75rem; <div className="indent-3"></div>
indent-3.5text-indent: 0.875rem; <div className="indent-3.5"></div>
indent-4text-indent: 1rem; <div className="indent-4"></div>
indent-5text-indent: 1.25rem; <div className="indent-5"></div>
indent-6text-indent: 1.5rem; <div className="indent-6"></div>
indent-7text-indent: 1.75rem; <div className="indent-7"></div>
indent-8text-indent: 2rem; <div className="indent-8"></div>
indent-9text-indent: 2.25rem; <div className="indent-9"></div>
indent-10text-indent: 2.5rem; <div className="indent-10"></div>
indent-11text-indent: 2.75rem; <div className="indent-11"></div>
indent-12text-indent: 3rem; <div className="indent-12"></div>
indent-14text-indent: 3.5rem; <div className="indent-14"></div>
indent-16text-indent: 4rem; <div className="indent-16"></div>
indent-20text-indent: 5rem; <div className="indent-20"></div>
indent-24text-indent: 6rem; <div className="indent-24"></div>
indent-28text-indent: 7rem; <div className="indent-28"></div>
indent-32text-indent: 8rem; <div className="indent-32"></div>
indent-36text-indent: 9rem; <div className="indent-36"></div>
indent-40text-indent: 10rem; <div className="indent-40"></div>
indent-44text-indent: 11rem; <div className="indent-44"></div>
indent-48text-indent: 12rem; <div className="indent-48"></div>
indent-52text-indent: 13rem; <div className="indent-52"></div>
indent-56text-indent: 14rem; <div className="indent-56"></div>
indent-60text-indent: 15rem; <div className="indent-60"></div>
indent-64text-indent: 16rem; <div className="indent-64"></div>
indent-72text-indent: 18rem; <div className="indent-72"></div>
indent-80text-indent: 20rem; <div className="indent-80"></div>
indent-96text-indent: 24rem; <div className="indent-96"></div>

Overview of Text Indent

Adding the Text Indent

In Tailwind CSS, the text indenting utilities provide a seamless way to manage your text indentation for the first line of a paragraph. You can specify positive indentation values to shift text away from the edge.

This is a live editor. Play around with it!
import React from "react";

export default function PositiveIndent() {
  return (
    <div className="w-screen h-screen bg-gray-50 flex justify-center items-center">
      <div className="text-gray-700 text-xl indent-10">
        {/* text-indent: 2.5rem; */}
        <p>
          The **text-indent** property allows you to define horizontal spacing 
          between the first line of text and its block container.
        </p>
      </div>
    </div>
  );
}

Here, the utility indent-10 corresponds to an indentation of 2.5rem. Feel free to swap out 10 as needed from the available spacing scale in Tailwind.

Negative Text Indent

Negative offsets work inversely to bring text closer to its container edge or move it even further left into the container's negative space boundary.

This is a live editor. Play around with it!
import React from "react";

export default function NegativeIndent() {
  return (
    <div className="w-screen h-screen bg-gray-50 flex justify-center items-center">
      <div className="text-gray-700 text-xl -indent-4">
        {/* text-indent: -1rem; */}
        <p>
          Negative values can shift text in the opposite direction, breaking conventional formatting patterns creatively.
        </p>
      </div>
    </div>
  );
}

Above, the indent utility -indent-4 applies a -1rem value to text.

States and Responsiveness

Hover and Focus States

Do you need dynamic text-indent adjustments based on hover, focus, or other states? Tailwind's state mechanism allows you to customize the indent during user interactions, creating a more interactive UI design.

This is a live editor. Play around with it!
import React from "react";

export default function HoverIndent() {
  return (
    <div className="w-screen h-screen bg-gray-50 flex justify-center items-center">
      <div className="text-gray-700 text-xl indent-6 hover:indent-16">
        {/* Default: text-indent: 1.5rem; On Hover: text-indent: 4rem; */}
        <p>
          Hover over this paragraph to experience test-indent being increased interactively.
        </p>
      </div>
    </div>
  );
}

With hover:indent-16, you increase text spacing when a user hovers over the element.

Breakpoint Modifiers

Responsive design is crucial in the modern web. You can easily implement breakpoints with Tailwind's responsive utilities to conditionally modify text indentation across devices.

This is a live editor. Play around with it!
import React from "react";

export default function ResponsiveIndent() {
  return (
    <div className="w-screen h-screen bg-gray-50 flex justify-center items-center">
      <div className="text-gray-700 text-xl sm:indent-4 md:indent-12 lg:indent-20">
        {/* Small: 1rem | Medium: 3rem | Large: 5rem */}
        <p>
          Indent spacing gracefully scales for smaller and larger devices, catering to diverse viewports efficiently.
        </p>
      </div>
    </div>
  );
}

In this JSX snippet, from sm:indent-4 to lg:indent-20, the indentation grows as the screen size increases.

Custom Text Indent

Extending the Theme

Tailwind's configuration file in tailwind.config.js is where you define custom values for personalization. To extend the default text-indent utility:

With this update, you can use the new utilities indent-extra and indent-negative directly in your classes.

This is a live editor. Play around with it!
import tailwindConfig from "./tailwind.config.js";
tailwind.config = tailwindConfig;

import React from "react";

export default function CustomThemeIndent() {
  return (
    <div className="w-screen h-screen bg-gray-50 flex justify-center items-center">
      <div className="text-gray-700 text-xl indent-extra">
        {/* text-indent: 8rem; */}
        Custom configurations ensure unique text spacing tailored to your design requirements.
      </div>
    </div>
  );
}

These custom utilities directly apply values defined in your theme extension.

Using Arbitrary Values

Sometimes, predefined values aren’t sufficient. Tailwind allows you to use arbitrary values for maximum flexibility via square brackets:

This is a live editor. Play around with it!
import React from "react";

export default function ArbitraryIndent() {
  return (
    <div className="w-screen h-screen bg-gray-50 flex justify-center items-center">
      <div className="text-gray-700 text-xl indent-[5rem]">
        {/* Arbitrary value: text-indent: 5rem; */}
        Arbitrary values empower developers to handle one-off cases without editing themes directly.
      </div>
    </div>
  );
}

Using text-indent-[5rem], you apply a custom indent value inline without the need to extend the config file.

Real World Examples

Book Chapter Preview Component

This component displays a list of book chapters with indented preview text, creating a professional reading experience.

This is a live editor. Play around with it!
export default function BookChapterPreview() {
  const chapters = [
    {
      title: "The Beginning of Time",
      preview: "In the vast expanse of the cosmos, where stars were born and galaxies collided, our story begins with an extraordinary event that would shape the universe forever.",
      chapterNumber: 1
    },
    {
      title: "Ancient Civilizations",
      preview: "Deep beneath the desert sands lay the remnants of a forgotten empire, its secrets preserved in hieroglyphs and buried treasures.",
      chapterNumber: 2
    },
    {
      title: "The Medieval Quest",
      preview: "Knights and nobles gathered in the great hall, their armor gleaming in the torchlight as they prepared for the greatest adventure of their lives.",
      chapterNumber: 3
    },
    {
      title: "Industrial Revolution",
      preview: "Steam engines roared to life, transforming quiet countryside into bustling metropolises as humanity entered a new age of innovation.",
      chapterNumber: 4
    },
    {
      title: "Modern Marvels",
      preview: "Skyscrapers reached toward the heavens, their steel and glass facades reflecting the dreams and ambitions of a new generation.",
      chapterNumber: 5
    },
    {
      title: "Future Horizons",
      preview: "As humanity stood on the brink of interstellar travel, the possibilities seemed endless, limited only by imagination and courage.",
      chapterNumber: 6
    }
  ];

  return (
    <div className="max-w-3xl mx-auto p-6 bg-gray-50">
      {chapters.map((chapter) => (
        <div key={chapter.chapterNumber} className="mb-8">
          <h4 className="text-xl font-semibold mb-2">
            Chapter {chapter.chapterNumber}: {chapter.title}
          </h4>
          <p className="indent-8 text-gray-600 leading-relaxed">
            {chapter.preview}
          </p>
        </div>
      ))}
    </div>
  );
}

Academic Citation Component

A component that displays academic citations with proper indentation for better readability.

This is a live editor. Play around with it!
export default function AcademicCitations() {
  const citations = [
    {
      author: "Smith, J. & Johnson, M.",
      year: 2023,
      title: "Understanding Quantum Computing",
      journal: "Science Today",
      volume: 45,
      pages: "123-145"
    },
    {
      author: "Williams, R.",
      year: 2022,
      title: "Artificial Intelligence in Modern Society",
      journal: "Tech Review",
      volume: 32,
      pages: "78-92"
    },
    {
      author: "Brown, A. et al.",
      year: 2023,
      title: "Climate Change Effects on Biodiversity",
      journal: "Environmental Studies",
      volume: 28,
      pages: "234-256"
    },
    {
      author: "Davis, K. & Miller, P.",
      year: 2021,
      title: "Neural Networks in Medicine",
      journal: "Medical Innovation",
      volume: 15,
      pages: "45-67"
    },
    {
      author: "Anderson, L.",
      year: 2023,
      title: "Space Exploration Technologies",
      journal: "Astronomy Today",
      volume: 52,
      pages: "178-195"
    },
    {
      author: "Taylor, S. & White, R.",
      year: 2022,
      title: "Renewable Energy Solutions",
      journal: "Green Technology",
      volume: 19,
      pages: "89-112"
    }
  ];

  return (
    <div className="max-w-4xl mx-auto p-8 bg-white">
      <h2 className="text-2xl font-bold mb-6">References</h2>
      <div className="space-y-4">
        {citations.map((citation, index) => (
          <p key={index} className="indent-[-2rem] pl-8 text-sm">
            {citation.author} ({citation.year}). {citation.title}. 
            <em>{citation.journal}</em>, {citation.volume}, {citation.pages}.
          </p>
        ))}
      </div>
    </div>
  );
}

Product Description Card Component

A component that displays product descriptions with indented paragraphs for better content structure.

This is a live editor. Play around with it!
export default function ProductDescriptionCards() {
  const products = [
    {
      name: "Ergonomic Office Chair",
      price: "$299.99",
      description: "Experience ultimate comfort with our premium ergonomic office chair. Designed with advanced lumbar support and adjustable features, this chair ensures proper posture during long working hours.",
      image: "https://images.unsplash.com/photo-1505740420928-5e560c06d30e",
      alt: "Premium ergonomic office chair"
    },
    {
      name: "Smart Desk Lamp",
      price: "$89.99",
      description: "Illuminate your workspace with this intelligent LED desk lamp. Features include adjustable brightness levels, color temperature control, and smart home integration capabilities.",
      image: "https://images.unsplash.com/photo-1507473885765-e6ed057f782c",
      alt: "Modern smart desk lamp"
    },
    {
      name: "Wireless Keyboard",
      price: "$129.99",
      description: "Type with precision on this premium wireless keyboard. Featuring mechanical switches, customizable backlighting, and extended battery life for uninterrupted productivity.",
      image: "https://images.unsplash.com/photo-1587829741301-dc798b83add3",
      alt: "Wireless mechanical keyboard"
    },
    {
      name: "4K Monitor",
      price: "$499.99",
      description: "Enhance your visual experience with this 4K ultra-HD monitor. Offering true-to-life colors, minimal bezels, and eye-care technology for comfortable viewing.",
      image: "https://images.unsplash.com/photo-1527443154391-507e9dc6c5cc",
      alt: "4K ultra-HD monitor"
    },
    {
      name: "Noise-Canceling Headphones",
      price: "$249.99",
      description: "Immerse yourself in crystal-clear audio with these premium noise-canceling headphones. Features include wireless connectivity, long battery life, and comfortable ear cushions.",
      image: "https://images.unsplash.com/photo-1505740420928-5e560c06d30e",
      alt: "Wireless noise-canceling headphones"
    },
    {
      name: "Laptop Stand",
      price: "$79.99",
      description: "Improve your posture and laptop cooling with this adjustable aluminum stand. Designed for optimal viewing angles and enhanced airflow for better performance.",
      image: "https://images.unsplash.com/photo-1527443154391-507e9dc6c5cc",
      alt: "Adjustable laptop stand"
    }
  ];

  return (
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 p-6">
      {products.map((product, index) => (
        <div key={index} className="bg-white rounded-lg shadow-md overflow-hidden">
          <img 
            src={product.image} 
            alt={product.alt}
            className="w-full h-48 object-cover"
          />
          <div className="p-4">
            <h3 className="text-xl font-semibold mb-2">{product.name}</h3>
            <p className="text-lg font-bold text-blue-600 mb-2">{product.price}</p>
            <p className="indent-4 text-gray-600 leading-relaxed">
              {product.description}
            </p>
          </div>
        </div>
      ))}
    </div>
  );
}

Legal Document Component

A component that displays legal text with proper paragraph indentation for formal documents.

This is a live editor. Play around with it!
export default function LegalDocument() {
  const sections = [
    {
      title: "Terms of Service",
      content: "This agreement sets forth the legally binding terms and conditions for your use of our services. By accessing or using our services, you agree to be bound by these terms and conditions."
    },
    {
      title: "Privacy Policy",
      content: "We are committed to protecting your privacy and maintaining the security of your personal information. This policy describes how we collect, use, and share your data."
    },
    {
      title: "Intellectual Property Rights",
      content: "All content, features, and functionality of our services are owned by us and are protected by international copyright, trademark, and other intellectual property laws."
    },
    {
      title: "User Responsibilities",
      content: "You are responsible for maintaining the confidentiality of your account information and for all activities that occur under your account."
    },
    {
      title: "Limitation of Liability",
      content: "We shall not be liable for any indirect, incidental, special, consequential, or punitive damages resulting from your use of our services."
    },
    {
      title: "Governing Law",
      content: "These terms shall be governed by and construed in accordance with the laws of the jurisdiction in which our company is registered."
    }
  ];

  return (
    <div className="max-w-4xl mx-auto p-8 bg-gray-50">
      <h1 className="text-3xl font-bold mb-8">Legal Documentation</h1>
      {sections.map((section, index) => (
        <div key={index} className="mb-6">
          <h2 className="text-xl font-semibold mb-3">{section.title}</h2>
          <p className="indent-12 text-gray-700 leading-relaxed bg-white p-4 rounded-lg shadow-sm">
            {section.content}
          </p>
        </div>
      ))}
    </div>
  );
}

Blog Post Preview Component

A component that displays blog post previews with indented paragraphs for better readability.

This is a live editor. Play around with it!
export default function BlogPostPreviews() {
  const blogPosts = [
    {
      title: "The Future of Web Development",
      author: "Jane Smith",
      date: "2023-08-15",
      preview: "As we move into a new era of web development, the landscape continues to evolve at an unprecedented pace. From WebAssembly to Edge Computing, developers must adapt to stay relevant.",
      image: "https://images.unsplash.com/photo-1498050108023-c5249f4df085",
      alt: "Computer code on screen"
    },
    {
      title: "Sustainable Architecture",
      author: "Michael Johnson",
      date: "2023-08-14",
      preview: "Green building practices are revolutionizing the construction industry. Learn how architects are incorporating sustainable materials and energy-efficient designs.",
      image: "https://images.unsplash.com/photo-1518005020951-eccb494ad742",
      alt: "Modern sustainable building"
    },
    {
      title: "AI in Healthcare",
      author: "Sarah Williams",
      date: "2023-08-13",
      preview: "Artificial Intelligence is transforming healthcare delivery and patient outcomes. Discover how machine learning algorithms are improving diagnostic accuracy.",
      image: "https://images.unsplash.com/photo-1576091160399-112ba8d25d1d",
      alt: "Medical technology"
    },
    {
      title: "Space Exploration Updates",
      author: "Robert Chen",
      date: "2023-08-12",
      preview: "Recent developments in space technology are bringing us closer to becoming a multi-planetary species. Learn about the latest missions and discoveries.",
      image: "https://images.unsplash.com/photo-1446776877081-d282a0f896e2",
      alt: "Space rocket launch"
    },
    {
      title: "Renewable Energy Innovation",
      author: "Lisa Anderson",
      date: "2023-08-11",
      preview: "Breakthrough technologies in renewable energy are making clean power more accessible and efficient. Explore the latest developments in solar and wind energy.",
      image: "https://images.unsplash.com/photo-1466611653911-95081537e5b7",
      alt: "Solar panels"
    },
    {
      title: "Digital Privacy Matters",
      author: "Tom Wilson",
      date: "2023-08-10",
      preview: "In an increasingly connected world, protecting your digital privacy has never been more important. Learn essential strategies for safeguarding your online presence.",
      image: "https://images.unsplash.com/photo-1563986768609-322da13575f3",
      alt: "Digital security concept"
    }
  ];

  return (
    <div className="max-w-6xl mx-auto p-6">
      <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
        {blogPosts.map((post, index) => (
          <div key={index} className="bg-white rounded-xl shadow-md overflow-hidden">
            <img 
              src={post.image} 
              alt={post.alt}
              className="w-full h-48 object-cover"
            />
            <div className="p-6">
              <h3 className="text-xl font-bold mb-2">{post.title}</h3>
              <div className="text-sm text-gray-500 mb-3">
                By {post.author} | {post.date}
              </div>
              <p className="indent-6 text-gray-600 leading-relaxed">
                {post.preview}
              </p>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

Customization Examples

Blog Post with Custom First Paragraph Indent

This example demonstrates how to create a blog post layout with a customized first paragraph indent for better readability.

This is a live editor. Play around with it!
import tailwindConfig from "./tailwind.config.js";
tailwind.config = tailwindConfig;

// App.js
export default function BlogPost() {
  return (
    <article className="max-w-3xl mx-auto p-8 bg-gray-50">
      <h1 className="text-4xl font-serif mb-6">The Art of Typography</h1>
      <img 
        src="https://images.unsplash.com/photo-1555421689-491a97ff2040"
        alt="Typography"
        className="w-full h-64 object-cover mb-8 rounded-lg"
      />
      <p className="indent-blog text-lg leading-relaxed mb-6 text-gray-800">
        Typography is the art and technique of arranging type to make written
        language legible, readable, and appealing when displayed. The arrangement
        of type involves selecting typefaces, point sizes, line lengths, line-spacing,
        and letter-spacing.
      </p>
      <p className="text-lg leading-relaxed text-gray-800">
        In contemporary use, the practice and study of typography include a broad
        range of disciplines, including graphic design, type design, digital
        typography, and more.
      </p>
    </article>
  )
}

Poetry Collection with Variable Indentation

This example shows how to create a poetry layout with different indentation levels for creative formatting.

This is a live editor. Play around with it!
import tailwindConfig from "./tailwind.config.js";
tailwind.config = tailwindConfig;

// App.js
export default function PoemDisplay() {
  return (
    <div className="min-h-screen bg-indigo-50 p-12">
      <div className="max-w-2xl mx-auto bg-white p-10 rounded-xl shadow-lg">
        <h2 className="text-3xl font-serif mb-8 text-center text-indigo-900">
          Seasons of Change
        </h2>
        <div className="space-y-6 font-serif text-lg text-indigo-800">
          <p className="indent-verse-1">
            Autumn leaves falling slow,
          </p>
          <p className="indent-verse-2">
            Dancing in the gentle breeze,
          </p>
          <p className="indent-verse-3">
            Nature's final show.
          </p>
          <p className="indent-verse-1">
            Winter frost appears,
          </p>
          <p className="indent-verse-2">
            Covering earth's tired frame,
          </p>
          <p className="indent-verse-3">
            Until spring draws near.
          </p>
        </div>
      </div>
    </div>
  )
}

Legal Document with Hierarchical Indentation

This example creates a legal document layout with different indentation levels for sections and subsections.

This is a live editor. Play around with it!
import tailwindConfig from "./tailwind.config.js";
tailwind.config = tailwindConfig;

// App.js
export default function LegalDocument() {
  return (
    <div className="max-w-4xl mx-auto p-10 bg-slate-50">
      <div className="bg-white p-8 rounded-lg shadow-md">
        <header className="mb-8">
          <h1 className="text-3xl font-bold text-slate-800 mb-4">
            Terms of Service
          </h1>
          <div className="flex items-center gap-2 text-slate-600">
            <img 
              src="https://images.unsplash.com/photo-1589829085413-56de8ae18c73"
              alt="Legal document"
              className="w-6 h-6 rounded-full"
            />
            <span>Last updated: {new Date().toLocaleDateString()}</span>
          </div>
        </header>

        <div className="space-y-6 text-slate-700">
          <p className="indent-section">
            1. These Terms of Service ("Terms") govern your access to and use of
            our services, including our website, APIs, email notifications, and
            applications.
          </p>
          
          <p className="indent-subsection">
            1.1 By accessing or using our Services, you agree to be bound by these
            Terms. If you do not agree to these Terms, do not access or use our
            Services.
          </p>
          
          <p className="indent-clause">
            1.1.1 Our Services are provided "as is" and "as available" without
            warranties of any kind, either express or implied.
          </p>
          
          <p className="indent-section">
            2. We reserve the right to modify these Terms at any time. Your
            continued use of our Services after such modifications constitutes
            your acceptance of the modified Terms.
          </p>
        </div>
      </div>
    </div>
  )
}

Best Practices

Maintain Design Consistency

When working with text-indent utilities in Tailwind CSS, maintaining consistency in design is paramount. Align text indentation values across components to establish a cohesive visual appearance. For instance, when designing a form or an article layout, ensure the indentation levels are standardized. This avoids visual distractions and creates a uniform look throughout your user interface.

Consider creating a theme extension in tailwind.config.js to store commonly-used text-indent values, ensuring these are reused across your application. This improves readability and simplifies future updates. Additionally, naming your custom utilities descriptively (e.g., indent-article, indent-paragraph) makes it easier for team members to understand and utilize them in other parts of the project.

This is a live editor. Play around with it!
import tailwindConfig from "./tailwind.config.js";
tailwind.config = tailwindConfig;

// Consistent Article Component
export default function ArticleLayout() {
  return (
    <div className="max-w-3xl mx-auto p-6">
      <h1 className="text-4xl font-semibold mb-4">Achieving Design Consistency</h1>
      <p className="indent-article mb-6 leading-relaxed">
        Consistency in text indentation promotes a cohesive and professional interface. Whether you are building blog posts, legal documents, or product descriptions, consistent spacing ensures that your users enjoy a polished experience.
      </p>
      <p className="indent-paragraph">
        Tailwind CSS enables you to extend your theme to define indentation values used across multiple components. This practice should be emphasized in all team coding guidelines for better maintainability.
      </p>
    </div>
  );
}

Combine Utilities Thoughtfully

Effective design often arises from combining complementary utilities rather than overloading individual elements. Pairing text-indent with other utilities such as line-height, font-size, and padding ensures content is visually structured and professional. For instance, an indented paragraph looks better when combined with ample line spacing (leading-relaxed) and moderate padding to create appropriate spacing between blocks of text.

Additionally, leverage conditional utilities (such as hover: and focus:) to introduce visual interactivity alongside indentation. For example, incorporating state-driven styles can emphasize important text only when it needs user attention — without cluttering the initial design.

This is a live editor. Play around with it!
// Interactive Component with Combined Utilities
export default function CombinedUtilities() {
  return (
    <div className="p-8 bg-gray-100 min-h-screen flex justify-center items-center">
      <div className="bg-white p-6 rounded-xl shadow-lg max-w-xl">
        <h2 className="text-2xl font-bold mb-4">Elevate Readability</h2>
        <p className="text-lg indent-8 leading-relaxed mb-4">
          Combining utilities allows you to maximize the aesthetics of your content. Be it adjusting line heights, diverse font weights, or text indentation, Tailwind CSS provides tools that help create clean layouts.
        </p>
        <p className="text-lg indent-8 hover:indent-16 leading-relaxed cursor-pointer">
          Hover over this paragraph to see how interactive utilities transform standard text styles into visually engaging experiences.
        </p>
      </div>
    </div>
  );
}

Accessibility Considerations

Enhance Readability and Navigation Efficiency

Indentation is a subtle yet effective tool for improving readability, especially for users relying on assistive tools like screen readers. By appropriately indenting paragraphs or blocks of text, you guide a user's focus, enabling better comprehension during reading. Tailwind’s utilities ensure these adjustments are quick without negatively affecting your design.

Include logical grouping when using indentation for multi-line structures, such as long legal articles or FAQs. This structure creates a clear navigation path for users who depend on keyboard navigation or alternative input methods.

This is a live editor. Play around with it!
// Readability-Enhanced Legal Paragraph
export default function AccessibleLegalText() {
  return (
    <div className="max-w-4xl mx-auto p-6">
      <h1 className="text-2xl font-bold mb-4">Your Data Rights</h1>
      <p className="indent-16 leading-relaxed text-md">
        Under legal provisions, you have complete rights to how your data is collected and managed. These rights include access to, correction of, and deletion of personal information stored under our policies.
      </p>
      <p className="indent-12 text-blue-600 underline">
        Refer to further terms <a href="#terms">here</a>.
      </p>
    </div>
  );
}

Enhance Keyboard-Dependent Interactions

Tailwind utilities can improve keyboard-focused interactions alongside decent text spacing. For example, providing better visual alignment for active states like focus:ring or focus:indent-20 helps users relying on keyboards navigate effortlessly. Apply logical indents to dropdown menus or modal dialogs to prioritize content hierarchy, avoiding visual confusion.

By using indentation and focus states together, you enhance accessibility tools like tabbing or focus traversal for users with mobility impairments.

Text ColorText Align

Resources

DocsBlogEmail Templates

Legal Stuff

Terms & ConditionsPrivacy PolicyAcceptable Use Policy