Tailwind CSS on GitHub

文本对齐

用来控制文本对齐的功能类。

Default class reference

Class
Properties
text-lefttext-align: left;
text-centertext-align: center;
text-righttext-align: right;
text-justifytext-align: justify;

使用方法

使用 .text-left.text-center.text-right.text-justify 功能类来控制元素的文本对齐方式。

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis fugit, enim molestiae praesentium eveniet, recusandae et error beatae facilis ex harum consequuntur, quia pariatur non. Doloribus illo, ullam blanditiis ab.

<p class="text-left ...">Lorem ipsum dolor sit amet ...</p>

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis fugit, enim molestiae praesentium eveniet, recusandae et error beatae facilis ex harum consequuntur, quia pariatur non. Doloribus illo, ullam blanditiis ab.

<p class="text-center ...">Lorem ipsum dolor sit amet ...</p>

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis fugit, enim molestiae praesentium eveniet, recusandae et error beatae facilis ex harum consequuntur, quia pariatur non. Doloribus illo, ullam blanditiis ab.

<p class="text-right ...">Lorem ipsum dolor sit amet ...</p>

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis fugit, enim molestiae praesentium eveniet, recusandae et error beatae facilis ex harum consequuntur, quia pariatur non. Doloribus illo, ullam blanditiis ab.

<p class="text-justify ...">Lorem ipsum dolor sit amet ...</p>

响应式

要在特定的断点处控制元素的文本对齐,请在任何现有的文本对齐功能类前添加 {screen}: 前缀。例如,使用 md:text-center 来仅在中等大小及以上的屏幕应用 text-center 功能类。

<p class="text-left md:text-center ...">Lorem ipsum dolor sit amet ...</p>

关于 Tailwind 的响应式设计功能的更多信息,请查看 响应式设计 文档。

定制

变体

默认情况下, 针对 text alignment 功能类,只生成 responsive 变体。

您可以通过修改您的 tailwind.config.js 文件中的 variants 部分中的 textAlign 属性来控制为 text alignment 功能生成哪些变体。

例如,这个配置将生成 hover and focus 变体:

  // tailwind.config.js
  module.exports = {
    variants: {
      extend: {
        // ...
+       textAlign: ['hover', 'focus'],
      }
    }
  }

禁用

如果您不打算在您的项目中使用 text alignment 功能,您可以通过在配置文件的 corePlugins 部分将 textAlign 属性设置为 false 来完全禁用它们:

  // tailwind.config.js
  module.exports = {
    corePlugins: {
      // ...
+     textAlign: false,
    }
  }