tailwindcss-accent

Tailwind CSS 插件，它使用基于 Tailwind CSS 默认调色板的 CSS 自定义属性提供强调色实用程序。

该插件已在 Tailwind CSS v2 和 v3 中进行了测试。

安装

从 npm 安装插件：

npm install -D tailwindcss-accent

然后将插件添加到您的文件中：tailwind.config.js:

module.exports = {
  theme: {
    // ...
  },
  plugins: [
    require('tailwindcss-accent')({
      colors: ['violet', 'blue'],
      root: 'blue',
      cssVarsPrefix: 'tw-plugin', // result: --tw-plugin-accent-200
    }),
    // ...
  ],
};

插件选项

选项	说明
`colors` (必填)	包括特定颜色。查看可用颜色部分。
`root`	将颜色选项中的颜色设置为强调色。 `:root` 。
`cssVarsPrefix`	设置 css 变量名称的前缀。默认为 'tw-ta' (例如： `--tw-ta-accent-200`)

该选项有助于防止命名冲突，并使您更轻松地在样式中使用重音 CSS 变量。cssVarsPrefix

可用颜色

检查默认调色板 the Tailwind CSS v2 和 the Tailwind CSS v3.

基本用法

将 data-accent 添加到 root/html 元素中 (或简单地设置 root 插件设置)。

<html data-accent="blue">
  <!-- ... -->
</html>

现在，使用此插件，您可以编写 text-blue-600, 而不是编写 text-accent-600.

这个强调色将遵循 最近的 父元素的数据 data-accent 属性, 或 元素本身的值。

让代码说话：

<!-- default to :root -->
<p class="text-accent-600">this text has a blue (:root) accent color.</p>

<div data-accent="violet">
  <!-- based on nearest parent element: violet. -->
  <p class="text-accent-600">this text has a violet accent color.</p>

  <!-- based on nearest parent element: violet. -->
  <p class="text-accent-600">
    this text has a violet

    <!-- overrides the parent's accent color to blue. -->
    <span data-accent="blue" class="text-accent-600">and blue</span>

    accent color!
  </p>
</div>

在 Tailwind Play 上试用

例子

真实示例

本网站使用此插件。默认情况下，所有页面都使用 violet 强调色，但 work/ 路径下的页面除外，其具有 blue 强调色。

您可以在目录、标题标题、文本选择、链接等中看到差异。

请参阅配置和实现详细信息代码。

现场示例

想看一些很酷的东西吗？单击此按钮并观察此页面上的强调色发生变化。

您应该已经知道该按钮不会更改所有组件的颜色类别。这一行代码 —

document.documentElement.setAttribute('data-accent', newAccent);

—只需将 HTML 属性值更改为新的强调色 data-accent 即可发挥作用，使用该颜色的组件将遵循 -accent-* 更改。

更改网站的强调色从未如此简单 🔥

许可证

tailwindcss-accent 根据MIT许可证获得许可。

Got any feedback? open an issue / discussion here.