Text Transform

Normal Case

Use the normal-case utility to preserve the original casing. This is typically used to reset capitalization at different breakpoints.

Uppercase

Use the uppercase utility to uppercase text.

Lowercase

Use the lowercase utility to lowercase text.

Capitalize

Use the capitalize utility to capitalize text.

Responsive

To control the text transformation of an element at a specific breakpoint, add a {screen}: prefix to any existing text transformation utility. For example, use md:uppercase to apply the uppercase utility at only medium screen sizes and above.

<p class="capitalize md:uppercase ...">
  The quick brown fox jumps over the lazy dog.
</p>

For more information about Tailwind’s responsive design features, check out the Responsive Design documentation.

Customizing

Variants

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

在 tailwind.config.js 的 variants 區塊中變更 textTransform 屬性來決定有哪些變化模式會生成。

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

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

Disabling

如果你不打算在專案中使用 text transformation 功能，可以在你的設定檔裡的 corePlugins 屬性中將 textTransform 設定為 false 來停用功能：

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