How to use the :has pseudo class in Tailwind

Simply put, the :has() pseudo class is the best thing to happen to CSS since Flexbox and is now supported by all major browsers. As of version 3.4, it is also now available to be used in Tailwind and you can read the release notes here.

The :has() pseudo class presents ways of styling an element based on its own or siblings child elements. This gives you the powerful ability to select elements in a way never previously possible.

Tailwind version 3.4 now supports the use of the :has pseudo class.

This article will outline several ways in which you can use the :has() pseudo class to select elements in Tailwind. Tailwind gives you the ability to add styles to an element based on its own descendants, one of its parents descendants, or one of its peers descendants.

Styling an element based on its own descendants

To style an element based on its own descendants we can use the following syntax in Tailwind has-[*]:class-name. Within the square brackets you can define a selector for whichever descendant you wish to target. After the square brackets you follow with a colon and whichever tailwind class you’d like to apply if the element selector is found.

// examples of the has-[*]:class selector

<article class="has-[a]:cursor-pointer"></article>


<div class="has-[img:hover]:border-sky-700">
  <img src="..." />…