Tailwind v3迁移至v4：处理带主题命名空间的文本、边框及填充色

针对新版Tailwind中颜色令牌统一归至--color命名空间导致的冲突问题，你可以通过以下几种方式定义仅用于特定上下文（文本、背景、边框、填充等）的颜色，无需全部放入主colors对象：

1. 给颜色名加上下文前缀 #

直接在textColor、backgroundColor等配置中，给颜色名称添加专属前缀（比如text-、bg-、border-），让生成的CSS变量命名完全独立：

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {
      textColor: {
        'text-primary': "#1DA1F2",
        'text-secondary': "#FF9800",
      },
      backgroundColor: {
        'bg-neutral': "#f5f5f5",
      },
      borderColor: {
        'border-neutral': "#9e9e9e",
      },
      fill: {
        'fill-danger': "#e53935",
      },
    },
  },
}

使用时直接调用对应类名，比如text-text-primary、bg-bg-neutral，彻底避免命名冲突。

2. 创建自定义工具类 #

通过Tailwind的插件机制，直接生成独立的工具类，完全脱离默认颜色系统的约束：

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    // 主colors仅存放通用颜色
    colors: {
      primary: "#1DA1F2",
      secondary: "#FF9800",
    },
  },
  plugins: [
    function({ addUtilities }) {
      addUtilities({
        '.text-neutral': {
          color: '#9e9e9e',
        },
        '.border-neutral': {
          borderColor: '#9e9e9e',
        },
        '.fill-danger': {
          fill: '#e53935',
        },
      })
    }
  ],
}

这种方式生成的工具类和默认颜色类完全独立，不会产生任何命名冲突。

3. 自定义CSS变量注入 #

先在全局样式中定义专属上下文的CSS变量，再在Tailwind配置中引用，绕开默认的--color命名空间：

首先在全局CSS文件（如src/index.css）中添加：

:root {
  --text-neutral: #9e9e9e;
  --border-neutral: #9e9e9e;
  --fill-danger: #e53935;
}

然后在Tailwind配置中引用这些变量：

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {
      textColor: {
        neutral: 'var(--text-neutral)',
      },
      borderColor: {
        neutral: 'var(--border-neutral)',
      },
      fill: {
        danger: 'var(--fill-danger)',
      },
    },
  },
}

通过自定义命名的CSS变量，确保不同上下文的颜色变量完全独立，不会和默认命名空间冲突。

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