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

【问题标题】：Border color doesn't work in Tailwind CSS边框颜色在 Tailwind CSS 中不起作用
【发布时间】：2021-09-20 00:29:14
【问题描述】：

我需要使用 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”时，文本也没有应用正确的颜色。

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

【问题讨论】：

您是否在浏览器检查器中检查过它？是否可能被覆盖？
在检查器中，我看到了所有这些类，例如 .inline-flex、.justify-between、.h-10 等。但是 .border-gray-800 尽管存在，但并没有出现在那里如您在此页面上所见，顺风顺风：tailwind.build/classes/border-color/border-gray-800
请告诉我们您的tailwind.config.js，因为您可能会覆盖默认颜色
module.exports = { purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'], darkMode: false, // or 'media' or 'class', theme: { colors: { 'rhombus-green': { DEFAULT: '#24D5D6', dark: '#00A1A7' }, }, }, } 对不起，我不知道不知道如何让这段代码在这里格式化
好的，在我从配置中删除 colors {...} 之后，我看到顺风颜色确实有效。所以现在的问题是如何在不破坏默认样式的情况下配置我的自定义颜色。

标签： reactjs tailwind-css storybook

【解决方案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 属性都有效，断点除外

【讨论】：