Tailwind CSS - Text Indent

Tailwind CSS - Text Indent

Tailwind CSS provides indent-* utilities to control the indentation of the first line of a block of text. This is a common typographic practice for improving the readability of long-form content.

Usage and Scale

Apply an indent-{size} class to an element to set its text-indent property. The size corresponds to Tailwind’s comprehensive spacing scale. Negative values are also supported by prefixing the class with a dash (e.g., -indent-4).

Class	CSS Properties
indent-0	text-indent: 0px;
indent-px	text-indent: 1px;
indent-0.5	text-indent: 0.125rem; /* 2px */
indent-4	text-indent: 1rem; /* 16px */
indent-16	text-indent: 4rem; /* 64px */
… (and so on)	…

Responsive and Arbitrary Indentation

For a modern, responsive design, you can apply indentation utilities at different breakpoints or use arbitrary values for custom sizing.

• Responsive Design: Use screen prefix variants to change indentation on different screen sizes. For example, md:indent-8 will apply an 8-unit indent on medium screens and up.
• Arbitrary Values: For precise control that isn’t covered by the theme’s spacing scale, use square bracket notation. You can use any valid CSS value, including em for proportional sizing: indent-[2.5em].

Practical Example: Styling a Blog Post

This example demonstrates how to style a blog post excerpt. The first paragraph has a standard indent on all screen sizes, while subsequent paragraphs only get an indent on larger screens for better readability.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Tailwind Text Indent</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-white font-serif text-slate-700">

  <article class="max-w-prose mx-auto p-8">
    <h1 class="text-4xl font-bold text-slate-900 mb-4">The Art of Spacing</h1>
    <p class="text-lg leading-relaxed indent-8">
      Proper typography is a cornerstone of good design. The practice of indenting the first line of a paragraph is a centuries-old technique used to signal the start of a new thought, providing a visual cue that guides the reader's eye through the text. It creates a rhythm and flow that makes reading more comfortable and engaging.
    </p>
    <p class="text-lg leading-relaxed mt-4 md:indent-8">
      In modern web design, we have fine-grained control over this and other typographic details. Using a framework like Tailwind CSS, we can apply indentation responsively. We might choose to have no indent on small mobile screens where space is at a premium, and introduce it on larger screens where the layout is more expansive. This adaptability ensures the best reading experience across all devices.
    </p>
    <p class="text-lg leading-relaxed mt-4 md:indent-8">
      While padding and margins control the space around an entire element, text indentation specifically targets the first line. This distinction is key for creating classic, book-like text layouts without affecting the element's overall block alignment.
    </p>
  </article>

</body>
</html>

Best Practices

Text indentation is best used for the first line of paragraphs within a body of text. For indenting entire blocks of content, such as blockquotes or code samples, use padding utilities like pl-4 or ps-4 (for logical properties) instead. It’s also common practice to not indent the very first paragraph of a chapter or section.