「及時」模式:全新世代的 Tailwind CSS
Tailwind CSS on GitHub

Text Alignment (文字對齊)

控制文字對齊的功能

Default class reference

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

Usage

使用 .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>

Responsive

如要讓元素的文字對齊有響應式的效果,可在現有文字對齊功能前加上前綴詞 {screen}:。例如:中型或以上的螢幕尺寸使用 md:text-center 以套用 text-center 功能。

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

更多有關 Tailwind 響應式設計功能的資訊,可參考 響應式設計 文件。

Customizing

Variants

默認情況下, 只有 響應式 的 text alignment 變化模式 (variants) 會產生。

tailwind.config.jsvariants 區塊中變更 textAlign 屬性來決定有哪些變化模式會生成。

舉個例子來說,這個設定將會生成 響應式 和 hover 的變化模式。

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

Disabling

如果你不打算在專案中使用 text alignment 功能,可以在你的設定檔裡的 corePlugins 屬性中將 textAlign 設定為 false 來停用功能:

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