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

Question

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

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

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

谢谢！

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

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

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

Border color doesn't work in Tailwind CSS

reactjs

storybook

tailwind-css