插件

tailwindcss-accent

为 Tailwind CSS 项目提供动态、灵活的强调色。

一个 Tailwind CSS 插件，通过 CSS 自定义属性和 Tailwind 默认色板提供 accent 强调色工具类。

此插件已在 Tailwind CSS v2 和 v3 中测试。

安装

通过 npm 安装：

npm install -D tailwindcss-accent
BASH 行数：1 UTF-8

也可以使用 yarn 或 pnpm：

yarn add -D tailwindcss-accent
pnpm add -D tailwindcss-accent
BASH 行数：2 UTF-8

然后在 tailwind.config.js 中添加插件：

module.exports = {
  plugins: [
    require('tailwindcss-accent')({
      colors: ['violet', 'blue'],
      root: 'blue',
      cssVarsPrefix: 'tw-plugin',
    }),
  ],
};
JS 行数：9 UTF-8

插件选项

选项 说明
colors（必填） 要包含的颜色。
root 将色板中的一种颜色设为根强调色。
cssVarsPrefix CSS 变量前缀，默认是 tw-ta。

cssVarsPrefix 可以帮助避免样式中的变量名称冲突。

可用颜色

请参考 Tailwind CSS v2 色板 与 v3 色板。

基本用法

在根元素上添加 data-accent 属性，或设置插件的 root 选项：

<html data-accent="blue">
  <p class="text-accent-600">文字将使用蓝色强调色。</p>
</html>
HTML 行数：3 UTF-8

强调色会遵循最近父级的 data-accent 属性，元素本身也可以覆盖它：

<div data-accent="violet">
  <p class="text-accent-600">紫色文字</p>
  <span data-accent="blue" class="text-accent-600">蓝色文字</span>
</div>
HTML 行数：4 UTF-8

在 Tailwind Play 中试用

示例

本网站也使用了此插件。默认强调色为 violet，/work/ 下的页面则使用 blue。可以在目录、标题、链接等处看到差异。

点击下方按钮切换本页强调色：

document.documentElement.setAttribute('data-accent', newAccent);
JS 行数：1 UTF-8

只需改变根元素的 data-accent 属性，使用 accent-* 的组件便会自动切换颜色。

许可证

tailwindcss-accent 使用 MIT 许可证。