如何在Tailwind CSS中为border各边使用任意颜色值？

问题原因 #

你混淆了Tailwind CSS中边框宽度和边框颜色的类名规则：

• 前缀border-b-*属于边框宽度的类（比如border-b-[4em]是设置底部边框宽度为4em），因此border-b-[#1D1F2D]会被解析为无效的边框宽度值，自然无法生效。
• 主题颜色类border-b-primaryColor能生效，是因为Tailwind会为主题中定义的颜色预生成对应单一边框颜色的类。

解决方法 #

使用Tailwind的任意属性语法直接指定底部边框颜色，将border-b-[#1D1F2D]替换为[border-bottom-color:#1D1F2D]即可。

修改后的完整代码：

<!-- 现在可以正常生效 -->
<div class="absolute z-1 -right-[1px] -bottom-[1px] w-0 h-0 border-solid border-t-0 border-r-0 border-b-[4em] border-l-[4em] border-t-transparent border-r-transparent border-l-transparent [border-bottom-color:#1D1F2D]"></div>

<!-- 原有生效代码 -->
<div class="absolute z-1 -right-[1px] -bottom-[1px] w-0 h-0 border-solid border-t-0 border-r-0 border-b-[4em] border-l-[4em] border-t-transparent border-r-transparent border-l-transparent border-b-primaryColor"></div>

补充方案（可选） #

如果需要多次使用该颜色，也可以在Tailwind配置文件的theme.colors中添加自定义颜色，之后就能像border-b-primaryColor一样直接使用：

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        customDark: '#1D1F2D',
      },
    },
  },
}

使用时直接写border-b-customDark即可。

内容的提问来源于stack exchange，提问作者Kayhan Azadi