如何在Tailwind中配置带语义化名称的自定义颜色？

完全可以实现，这里提供两种常用方案，按需选择：

方案一：颜色分组定义（适合同一语义下多深浅场景） #

在tailwind.config.js的theme.colors中扩展语义化颜色组：

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      colors: {
        success: {
          bg: '#F6FFED',
          border: '#B7EB8F',
          text: '#135200'
        }
      }
    }
  }
}

使用时对应工具类：

• bg-success-bg → 背景色为#F6FFED
• border-success-border → 边框色为#B7EB8F
• text-success-text → 文字色为#135200

方案二：自定义工具类（完全匹配你想要的简洁命名） #

如果希望直接用bg-success、border-success这类命名，可通过Tailwind插件自定义工具类：

/** @type {import('tailwindcss').Config} */
module.exports = {
  plugins: [
    function({ addUtilities }) {
      addUtilities({
        '.bg-success': { backgroundColor: '#F6FFED' },
        '.border-success': { borderColor: '#B7EB8F' },
        '.text-success': { color: '#135200' },
        // 按需添加其他相关工具类，比如.fill-success、.stroke-success等
      })
    }
  ]
}

配置完成后，就能直接使用你预期的语义化工具类，完全符合需求。

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