Tailwind v4中如何分别自定义文字色与背景色工具类？

不需要手动创建工具类，有两种方案可以实现你要的效果：

方案一：直接扩展主题配置（和v3用法一致） #

在tailwind.config.js里直接扩展textColor和backgroundColor，Tailwind会自动生成对应的工具类，且各自使用独立值：

/** @type {import('tailwindcss').Config} */
export default {
  theme: {
    extend: {
      textColor: {
        card: '#FFF',
      },
      backgroundColor: {
        card: '#000',
      },
    },
  },
}

生成的类和v3完全一致：

.text-card {
  color: #FFF;
}
.bg-card {
  background-color: #000;
}

方案二：结合@theme CSS变量实现 #

如果你想用CSS变量来管理颜色，可先定义两个独立变量，再映射到主题配置：

1. 在你的CSS文件中用@theme定义变量：

@theme {
  --color-card-text: #FFF;
  --color-card-bg: #000;
}

2. 然后在tailwind.config.js里扩展对应主题项：

export default {
  theme: {
    extend: {
      textColor: {
        card: 'var(--color-card-text)',
      },
      backgroundColor: {
        card: 'var(--color-card-bg)',
      },
    },
  },
}

这种方式既保留了CSS变量的灵活性，也能继续使用.text-card和.bg-card的命名习惯。

备选：手动创建工具类（不推荐） #

如果只是临时需求，也可以用@layer utilities手动写类，但这种方式无法自动支持响应式、hover等变体，不符合Tailwind的设计规范：

@layer utilities {
  .text-card {
    color: #FFF;
  }
  .bg-card {
    background-color: #000;
  }
}

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