如何用TailwindCSS实现父容器控制标题颜色的工具类？

你的代码存在三个根本性问题，导致编译后无法生成预期样式：

1. 类名前缀不匹配
   代码生成的工具类前缀是h2s（比如.h2s\:text-green-500），但你实际使用的是headings前缀（headings:text-green-500），两者完全不对应，自然无法生效。

2. @apply语法错误
   你用了'@apply text': colorShades[shade]这种错误写法，@apply是Tailwind的指令，需要作为CSS属性的完整值来写，不能拆成键值对。而且这里没必要用@apply，直接设置color属性更高效。

3. 选择器逻辑错误
   你的需求是「父元素加工具类后，子标题元素变色」，但原代码是给工具类本身设置样式，而非针对父元素下的子标题。需要用后代选择器（比如.headings\:text-green-500 h2）来匹配父元素内的标题。

修正后的插件代码 #

下面是修复后的代码，支持所有标题标签（h1-h6），并匹配你使用的headings:前缀：

module.exports = function ({ addUtilities, theme }) {
  const colors = theme('colors');
  const headingTags = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6']; // 覆盖所有标题标签

  const headingColorUtilities = Object.keys(colors).reduce((utilities, color) => {
    const colorShades = colors[color];

    if (typeof colorShades === 'object') {
      Object.keys(colorShades).forEach(shade => {
        // 为每个标题标签生成后代选择器
        headingTags.forEach(tag => {
          utilities[`.headings\\:text-${color}-${shade} ${tag}`] = {
            color: colorShades[shade]
          };
        });
      });
    }

    return utilities;
  }, {});

  addUtilities(headingColorUtilities);
};

更简洁的实现方式（推荐） #

Tailwind提供了matchUtilities方法，无需手动遍历颜色，就能自动生成符合主题的工具类，逻辑更清晰：

module.exports = function ({ matchUtilities, theme }) {
  matchUtilities(
    {
      'headings:text': (value) => ({
        'h1, h2, h3, h4, h5, h6': {
          color: value,
        },
      }),
    },
    { values: theme('colors') }
  );
};

验证效果 #

用你原来的HTML示例测试：

<div class="text-black headings:text-green-500">
  <h2>This would be green</h2>
  <p>This would be black</p>
</div>

编译后会生成如下CSS：

.headings\:text-green-500 h1, .headings\:text-green-500 h2, .headings\:text-green-500 h3, .headings\:text-green-500 h4, .headings\:text-green-500 h5, .headings\:text-green-500 h6 {
  color: #22c55e;
}

此时<h2>会变为绿色，<p>保持黑色，完全符合需求。

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