Tailwind - 自定义类与嵌套颜色托盘相结合

Question

我想编写一个自定义类，它将应用一组样式，但我希望能够将它与主题颜色一起使用。通过例子来解释可能会更容易。

例如，如果我们想将背景设置为某种颜色，我们将添加如下类：

<div class="bg-red">

我想要拥有自己的

custom

类，而不是背景，它将应用一组新的样式，但我仍然可以将其与颜色一起使用：

<div class="custom-red">

所以我开始尝试 Tailwind 插件和组件。我写了这样的插件：

function ({ matchComponents, theme }) {
  const getStyles = (color) => {
    return {
      position: 'relative',
      '&::before': {
        backgroundColor: color
        // ...
      }
    };
  };

  matchComponents({
    testbg: (value) => getStyles(value)
  }, {
    values: theme('colors')
  });
}

而且它几乎成功了。我的意思是它适用于像

red

这样的简单颜色。但我的调色板更复杂并且嵌套。

theme: {
   colors: {
      primary: {
         DEFAULT: '#....'
         5: '#....'
         10: '#....'
         50: '#....'
      },
      secondary: {
         5: '#....'
         10: '#....'
      },
      red: '#....'
   }
}

遗憾的是它并没有产生所有颜色的可能性。它只是采用了颜色的“浅”键并生成了诸如

custom-primary

、

custom-secondary

、

custom-red

之类的类。但没有

custom-primary-5

例如。

那么有没有一种简单的方法呢？我想我可以手动解析主题中的颜色并递归地遍历对象并为每个对象创建单独的组件。但这似乎是一件完全奇怪的事情，因为我正在尝试做的事情似乎是像 Tailwind 这样的工具的一个非常基本的用例。

Answer 1

Tailwind 提供了

flattenColorPalette()

功能，可以帮助您将对象结构扁平化为扁平字典。这应该适用于任何级别的颜色值嵌套。

const plugin = require("tailwindcss/plugin");
const { default: flattenColorPalette } = require("tailwindcss/lib/util/flattenColorPalette");

module.exports = {
  …
  plugins: [
    plugin(function ({ matchComponents, theme }) {
      const getStyles = (color) => {
        //  …
      };

      matchComponents({
        testbg: (value) => getStyles(value)
      }, {
        values: flattenColorPalette(theme('colors')),
      });
    }),
  ],
}