2. Programming Q&A
  3. angular - Using :has selector with Tailwind adds empty :has() at the end - Stack Overflow

angular - Using :has selector with Tailwind adds empty :has() at the end - Stack Overflow

admin2025-04-16  3

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
Share Improve this question edited Feb 4 at 6:17 Chrillewoodz asked Feb 4 at 5:54 ChrillewoodzChrillewoodz 28.4k23 gold badges99 silver badges187 bronze badges 0
Add a comment  | 

1 Answer 1

Reset to default 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.com/@tailwindcss/browser@4"></script>

<div class="[&:has(:focus-visible)]:before:content-['
转载请注明原文地址:http://www.anycun.com/QandA/1744738308a86920.html

angularUsing has selector with Tailwind adds empty has() at the endStack Overflow