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

Text Transform

Utilities for controlling the transformation of text.

Default class reference

Class
屬性
uppercasetext-transform: uppercase;
lowercasetext-transform: lowercase;
capitalizetext-transform: capitalize;
normal-casetext-transform: none;

Normal Case

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

The quick brown fox jumps over the lazy dog.

<p class="normal-case ...">The quick brown fox ...</p>

Uppercase

Use the uppercase utility to uppercase text.

The quick brown fox jumps over the lazy dog.

<p class="uppercase ...">The quick brown fox ...</p>

Lowercase

Use the lowercase utility to lowercase text.

The quick brown fox jumps over the lazy dog.

<p class="lowercase ...">The quick brown fox ...</p>

Capitalize

Use the capitalize utility to capitalize text.

The quick brown fox jumps over the lazy dog.

<p class="capitalize ...">The quick brown fox ...</p>

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.jsvariants 區塊中變更 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,
    }
  }