Tailwind CSS on GitHub

文本颜色

用于控制元素的文字颜色的功能类。

Default class reference

Class
Preview 
text-transparent
Aa
text-current
Aa
text-black
Aa
text-white
Aa
text-gray-50
Aa
text-gray-100
Aa
text-gray-200
Aa
text-gray-300
Aa
text-gray-400
Aa
text-gray-500
Aa
text-gray-600
Aa
text-gray-700
Aa
text-gray-800
Aa
text-gray-900
Aa
text-red-50
Aa
text-red-100
Aa
text-red-200
Aa
text-red-300
Aa
text-red-400
Aa
text-red-500
Aa
text-red-600
Aa
text-red-700
Aa
text-red-800
Aa
text-red-900
Aa
text-yellow-50
Aa
text-yellow-100
Aa
text-yellow-200
Aa
text-yellow-300
Aa
text-yellow-400
Aa
text-yellow-500
Aa
text-yellow-600
Aa
text-yellow-700
Aa
text-yellow-800
Aa
text-yellow-900
Aa
text-green-50
Aa
text-green-100
Aa
text-green-200
Aa
text-green-300
Aa
text-green-400
Aa
text-green-500
Aa
text-green-600
Aa
text-green-700
Aa
text-green-800
Aa
text-green-900
Aa
text-blue-50
Aa
text-blue-100
Aa
text-blue-200
Aa
text-blue-300
Aa
text-blue-400
Aa
text-blue-500
Aa
text-blue-600
Aa
text-blue-700
Aa
text-blue-800
Aa
text-blue-900
Aa
text-indigo-50
Aa
text-indigo-100
Aa
text-indigo-200
Aa
text-indigo-300
Aa
text-indigo-400
Aa
text-indigo-500
Aa
text-indigo-600
Aa
text-indigo-700
Aa
text-indigo-800
Aa
text-indigo-900
Aa
text-purple-50
Aa
text-purple-100
Aa
text-purple-200
Aa
text-purple-300
Aa
text-purple-400
Aa
text-purple-500
Aa
text-purple-600
Aa
text-purple-700
Aa
text-purple-800
Aa
text-purple-900
Aa
text-pink-50
Aa
text-pink-100
Aa
text-pink-200
Aa
text-pink-300
Aa
text-pink-400
Aa
text-pink-500
Aa
text-pink-600
Aa
text-pink-700
Aa
text-pink-800
Aa
text-pink-900
Aa

使用

使用 text-{color} 功能类控制元素的文字颜色。

The quick brown fox jumped over the lazy dog.

<p class="text-purple-600 ..."></p>

改变不透明度

使用 text-opacity-{amount} 功能类控制元素的文字颜色的不透明度。

The quick brown fox jumped over the lazy dog.

The quick brown fox jumped over the lazy dog.

The quick brown fox jumped over the lazy dog.

The quick brown fox jumped over the lazy dog.

The quick brown fox jumped over the lazy dog.

<p class="text-purple-700 text-opacity-100 ...">The quick brown fox ...</p>
<p class="text-purple-700 text-opacity-75 ...">The quick brown fox ...</p>
<p class="text-purple-700 text-opacity-50 ...">The quick brown fox ...</p>
<p class="text-purple-700 text-opacity-25 ...">The quick brown fox ...</p>
<p class="text-purple-700 text-opacity-0 ...">The quick brown fox ...</p>

文本不透明度文档中了解更多。

响应式

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

<p class="text-blue-600 md:text-green-600 ...">
  The quick brown fox...
</p>

For more information about Tailwind's responsive design features, check out the Responsive Design documentation. 关于 Tailwind 的响应式设计功能的更多信息,请查看响应式设计文档。

Hover

要在悬停时控制一个元素的文本颜色,请在任何现有的文本颜色功能类中添加 hover: 前缀。例如,使用 hover:text-blue-600 在悬停时应用 text-blue-600 功能类。

<button class="text-white hover:text-red-500 ...">
  Hover me
</button>

悬停功能类也可以通过在 hover: 前缀前添加响应的 {screen}: 前缀来与响应的功能类组合使用。

<button class="... md:text-blue-500 md:hover:text-blue-600 ...">Button</button>

Focus

要在焦点上控制元素的文本颜色,请在任何现有的文本颜色功能类中添加 focus: 前缀。例如,使用 focus:text-blue-600 在焦点上应用 text-blue-600 功能类。

<input class="text-green-900 focus:text-red-600 ...">

通过在 focus: 前缀之前添加响应的 {screen}: 前缀,焦点功能类也可以与响应的功能类组合使用。

<input class="... md:text-gray-900 md:focus:text-red-600 ...">

自定义

文字颜色

默认情况下,Tailwind 将整个默认调色板作为文本颜色。

您可以通过编辑 tailwind.config.js 文件中的 theme.colors#customizing自定义您的调色板,或者在 theme.textColor 部分只自定义您的文本颜色。

  // tailwind.config.js
  module.exports = {
    theme: {
-     textColor: theme => theme('colors'),
+     textColor: {
+       'primary': '#3490dc',
+       'secondary': '#ffed4a',
+       'danger': '#e3342f',
+     }
    }
  }

变体

默认情况下, 针对 text color 功能类,只生成 responsive, dark mode (if enabled), group-hover, focus-within, hover and focus 变体。

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

例如,这个配置将生成 active 变体:

  // tailwind.config.js
  module.exports = {
    variants: {
      extend: {
        // ...
+       textColor: ['active'],
      }
    }
  }

禁用

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

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