如何在Tailwind中实现基于Body类的条件样式（类似CSS Modules混入）？

问题背景 #

我正在从CSS Modules迁移至Tailwind，页面的body标签上设有用于标识设备的辅助类，例如：

<body class="body-app body-ios">

此前通过Mixin，我可以轻松根据设备（移动端、桌面端或App内嵌WebView）、浏览器或触摸支持情况添加自定义样式，示例如下：

@mixin ios {
    :global(.body--ios) & {
        @content;
    }
}
@mixin app {
    :global(.body--app) & {
        @content;
    }
}

现在希望在Tailwind中实现类似功能，理想状态是类似伪选择器的写法，比如ios:text-md，请问这是否可行？若不可行，最优实现方案是什么？

解决方案：自定义Tailwind变体（Variant） #

完全可以实现你想要的ios:text-md这类写法，核心是通过Tailwind的自定义变体功能扩展，步骤如下：

1. 注册自定义变体到Tailwind配置 #

打开项目的tailwind.config.js，在plugins字段中添加自定义变体的注册逻辑，对应body上的设备类：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js,jsx,ts,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [
    function({ addVariant }) {
      // 匹配body.body-ios下的子元素，注册ios变体
      addVariant('ios', '.body-ios &');
      // 匹配body.body-app下的子元素，注册app变体
      addVariant('app', '.body-app &');
      // 支持组合变体，比如同时满足app和ios的场景
      addVariant('app-ios', '.body-app.body-ios &');
    }
  ],
}

注：如果你的设备类是body--ios这种带双连字符的命名，只需把配置里的.body-ios改成.body--ios即可，保持和HTML类名一致。

2. 在HTML中使用自定义变体类名 #

配置完成后，就能像使用Tailwind内置的响应式变体（如md:text-md）一样使用自定义变体：

<!-- 仅在iOS设备下应用text-md样式 -->
<div class="text-base ios:text-md">示例文本</div>
<!-- 仅在App内嵌WebView下应用灰色背景 -->
<div class="bg-white app:bg-gray-100">容器内容</div>

3. 扩展复杂场景 #

如果需要针对浏览器、触摸支持等其他条件设置样式，只需在addVariant中编写对应选择器即可，例如：

addVariant('touch', '.body-touch &'); // 触摸设备变体
addVariant('chrome', '.body-chrome &'); // Chrome浏览器变体

这种方案完全复刻了你之前Mixin的功能，同时贴合Tailwind的类名使用习惯，是迁移后的最优实现。

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