如何在Tailwind CSS中自定义group状态？

Tailwind的group默认仅支持hover和focus两种触发状态，示例如下：

<div class="group">
  <p class="group-hover:text-gray-900">foo</p>
  <p class="group-hover:text-gray-500">bar</p>
</div>

<a class="group">
  <span class="group-focus:text-gray-900">foo</span>
  <span class="group-focus:text-gray-500">bar</span>
</a>

如果你需要实现像group-foo-state:*这样的自定义状态——即父元素添加foo-state类时激活子元素样式的效果，可以按以下步骤操作：

1. 修改Tailwind配置文件 #

在tailwind.config.js中通过自定义插件添加新的变体：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js}"], // 按需调整你的项目文件路径
  theme: {
    extend: {},
  },
  plugins: [
    function({ addVariant }) {
      // 定义group-foo-state变体，匹配父元素同时拥有.group和.foo-state的情况
      addVariant('group-foo-state', ':merge(.group).foo-state &');
    }
  ],
}

这里的:merge(.group)用于保证自定义变体和原生group变体的优先级一致，避免样式冲突问题。

2. 在HTML中使用自定义状态 #

配置完成后，即可像使用原生group状态一样使用自定义状态：

未激活状态：

<a class="group">
  <span class="group-foo-state:text-gray-900">foo</span>
  <span class="group-foo-state:text-gray-500">bar</span>
</a>

激活自定义状态（给父元素添加foo-state类）：

<a class="group foo-state">
  <span class="group-foo-state:text-gray-900">foo</span>
  <span class="group-foo-state:text-gray-500">bar</span>
</a>

原理说明 #

这种实现本质是模拟CSS的层叠效果：Tailwind会根据我们定义的变体生成对应的CSS选择器，当父元素同时存在group和foo-state类时，子元素的group-foo-state相关样式就会被应用。

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