使用Tailwind :has选择器出现空:has()子选择器错误，Angular构建失败

错误原因 #

直接在class中使用[&:has(:focus-visible)]:before:tw-content-['']这种写法时，Angular构建工具结合Tailwind的解析逻辑对选择器的处理出现异常，错误识别出空的:has()子选择器，导致构建报错。

解决方法 #

方法一：自定义Tailwind变体（推荐） #

通过在Tailwind配置中添加自定义变体，让语法更规范且避免解析问题：

// tailwind.config.js
module.exports = {
  prefix: 'tw-',
  plugins: [
    function({ addVariant }) {
      // 新增自定义变体，匹配包含:focus-visible子元素的父元素
      addVariant('has-focus-visible', '&:has(:focus-visible)');
    },
  ],
};

配置完成后，直接使用组合类即可实现需求：

<div class="tw-has-focus-visible:before:tw-content-['']">
  <!-- 子元素 -->
</div>

方法二：修正inline自定义选择器写法 #

如果要保留inline写法，需调整引号的使用方式，避免解析冲突：

<!-- 转义单引号 -->
<div class="[&:has(:focus-visible)]:before:tw-content-&quot;&quot;">
  <!-- 子元素 -->
</div>

<!-- 或改用双引号包裹内容值 -->
<div class="[&:has(:focus-visible)]:before:tw-content-[\"\"]">
  <!-- 子元素 -->
</div>

这种写法可读性较差，仅作为临时替代方案。

注意：确保你的Tailwind版本在v3.2及以上（支持:has()选择器），同时目标浏览器需支持:has()特性（现代主流浏览器均已支持）。

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