Tailwind CSS - 文本缩进

Tailwind CSS 提供了 indent-* 工具类来控制文本块首行的缩进。这是排版中一种常见的做法，用于提高长篇内容的易读性。

用法与尺寸

将 indent-{size} 类应用于元素，以设置其 text-indent 属性。大小对应于 Tailwind 全面的间距比例。通过在类前添加破折号（例如 -indent-4）也支持负值。

类	CSS 属性
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 */
…（依此类推）	…

响应式和任意缩进

对于现代响应式设计，你可以在不同的断点处应用缩进工具类，或使用任意值进行自定义尺寸设置。

响应式设计：使用屏幕尺寸前缀变体来在不同屏幕尺寸上更改缩进。例如，md:indent-8 将在中等屏幕及以上应用 8 单元的缩进。
任意值：对于主题间距比例未涵盖的精确控制，请使用方括号表示法。你可以使用任何有效的 CSS 值，包括用于比例尺寸的 em：indent-[2.5em]。

实际示例：博客文章样式设计

此示例演示了如何为博客文章摘要设置样式。第一个段落在所有屏幕尺寸上都有标准缩进，而随后的段落仅在较大屏幕上获得缩进，以提高可读性。

<!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>

最佳实践

文本缩进最适合用于文本主体中段落的首行。对于缩进整个内容块，例如引用块（blockquote）或代码示例，应使用 pl-4 或 ps-4（用于逻辑属性）等内边距工具类。另一个常见的做法是，不缩进章节或小节的第一段。