I'm using this Tailwind selector:

[&:has(:focus-visible)]:before:tw-content-['']

to apply a before pseudo element to an element with any children that are focused. However, I'm not sure this is actually correctly defined, as I'm getting this error when building the code in Angular:

1 rules skipped due to selector errors:
.[&:has(:focus-visible)]:before:tw-content-['']:has() -> Empty sub-selector

I don't quite understand what's going on here, why is a :has() being added to the end? Am I missing some type of escape, or am I using incorrect Tailwind syntax?

Note that tw is a prefix I've configured in my Tailwind config.

I'm using this Tailwind selector:

[&:has(:focus-visible)]:before:tw-content-['']

to apply a before pseudo element to an element with any children that are focused. However, I'm not sure this is actually correctly defined, as I'm getting this error when building the code in Angular:

1 rules skipped due to selector errors:
.[&:has(:focus-visible)]:before:tw-content-['']:has() -> Empty sub-selector

I don't quite understand what's going on here, why is a :has() being added to the end? Am I missing some type of escape, or am I using incorrect Tailwind syntax?

Note that tw is a prefix I've configured in my Tailwind config.

• angular
• tailwind-css

1 Answer 1

Also, regardless of the version, :has() at the end of the class name is not necessary, as it doesn't mean anything on its own. The error message likely refers to this.

/* in TailwindCSS v3 with tw- prefix */
[&:has(:focus-visible)]:before:tw-content-['']

I just overthought it:

Without prefix

In TailwindCSS, there is no tw-content class, only content.

[&:has(:focus-visible)]:before:content-['']

<script src="https://unpkg/@tailwindcss/browser@4"></script>

<div class="[&:has(:focus-visible)]:before:content-['