如何用TailwindCSS生成带var()语法的任意边框宽度工具类？

问题场景 #

• 使用固定值的任意边框宽度工具类可正常生效：
  写法：border-x-[20px]
  生成的CSS：

  .border-x-\[20px\] {
      border-left-width: 20px;
      border-right-width: 20px;
  }
  

• 但使用CSS变量作为值时，Tailwind会错误识别为颜色工具类：
  写法：border-x-[var(--tri-base)]
  错误生成的CSS：

  .border-x-\[var\(--tri-base\)\] {
      border-left-color: var(--tri-base);
      border-right-color: var(--tri-base);
  }
  

解决方案 #

Tailwind的任意值语法会根据括号内的内容推断目标CSS属性，var()被误判为颜色值，只需明确指定宽度属性后缀即可解决：

使用写法：border-x-width-[var(--tri-base)]

此时Tailwind会正确生成边框宽度工具类，对应的CSS为：

.border-x-width-\[var\(--tri-base\)\] {
    border-left-width: var(--tri-base);
    border-right-width: var(--tri-base);
}

这种写法也能被VS Code的Tailwind插件正常识别，无需依赖@apply指令。

内容的提问来源于stack exchange，提问作者the thinker