Question

我需要使用 Tailwind CSS 在 Storybook 中编写一些按钮组件（我对 Storybook 和 Tailwind 都是全新的）。我需要将某些按钮的边框颜色更改为灰色 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”时，文本也没有应用正确的颜色。

顺便说一下，编辑器也不会在鼠标悬停时显示这个类的内容。

Answer 1

您通过将颜色直接放入 theme.colors 来覆盖默认的 Tailwind 颜色。如果您想同时拥有自定义颜色和 Tailwind，您需要extend 它们

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 属性都有效，除了断点

边框颜色在 Tailwind CSS 中不起作用

1 个答案: