Question

我有一个 Tailwind 和双宏设置，如下所示：

主题：

module.exports = {
  theme: {
    extend: {
      colors: {
        blue: {
          ...colors.blue,
          1:'#6610f2',
          2: '#2792bc',
        },
      },
...

和这样的 UI 组件：

export const ButtonTw = styled.button(() => [
  tw`  
    font-body font-bold text-button uppercase text-white
    bg-blue-1 hover:bg-blue-1  
    py-2 leading-10 h-18
    border-blue-2 hover:border-blue-2`,

  css`
    padding-left: 8px;
    padding-right: 8px;
    border-bottom-width: 3px;
    border-radius: 6px;
  `,
]);

当我在本地运行我的故事书时，bg-blue-1 仍然指向旧颜色，而应该是 #6610f2。

奇怪的是，如果我重新调整 export const ButtonTw = styled.button(() => [ 中某些类的顺序，有时会从主题中提取颜色。

这是我在 storybook 目录下的 postcss.config.js：

module.exports = {
  plugins: [
      require("postcss-import")(),
      require("tailwindcss")("../tailwind.config.js"),
      require("autoprefixer"),
  ],
}

相关 package.json 包：

"tailwindcss": "^2.1.4",
"twin.macro": "^2.5.0"
"autoprefixer": "^10.2.6",
"@emotion/css": "^11.1.3",
"@emotion/react": "^11.4.0",
"@emotion/server": "^11.4.0",
"@emotion/styled": "^11.3.0",

我还导入了我在随机页面中创建的按钮，但它仍然指向旧颜色（与故事书中的问题相同）。好像是 css 没有被编译？

Tailwind 主题自定义颜色无法通过

0 个答案: