1

我需要使用 Tailwind CSS 在 Storybook 中编写一些按钮组件（而且我对 Storybook 和 Tailwind 都是全新的）。我需要将某些按钮的边框颜色更改为 gray-800。我有border和border-gray-800类，但仍然得到rgb(0,0,0)元素的计算样式。

这是按钮的完整类名："inline-flex justify-between items-center h-10 w-max p-1 pl-4 border border-gray-800 rounded-full"。任何其他样式都可以完美应用。可能是什么问题？

也许我必须首先在顺风配置中以某种方式启用这种颜色或类似的东西？

谢谢！

更新：我还注意到，当我使用“text-gray-800”时，文本也没有应用正确的颜色。

顺便说一句，编辑器也不会在悬停时显示此类的内容。

4

1 回答 1

1

通过将颜色直接放入theme.colors. 如果您想同时拥有自定义颜色和 Tailwind，则需要扩展它们

module.exports = { 
  purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'], 
  darkMode: false, // or 'media' or 'class', 
  theme: {
    extend: {
       colors: { 'rhombus-green': { DEFAULT: '#24D5D6', dark: '#00A1A7' } }, 
    },
  }, 
}

该方法对每个 Tailwind 属性都有效，可能断点除外

于 2021-07-09T17:20:44.717 回答