How to use :not() in Tailwind CSS ?

In Tailwind CSS, the :not() selector is used to exclude specific elements from a set of CSS rules. It allows you to apply styles to all elements except those that match the specified selector, providing greater control and precision in styling complex layouts.

CDN link:

<script src="https://cdn.tailwindcss.com/3.4.16"></script>

Syntax:

[&:not(selector)]:( CSS property)

Example 1: This example demonstrates the :not() selector in Tailwind CSS by applying styles to elements like h1, h2, and others, selectively excluding specific tags from certain styles for precise control.

Output:

Example 2: In this example, we have used the :not() pseudo-selector to apply styling to child tags of the HTML div tag, we can see how the :not() selector is used for styling of h3 and h4 tags under div tag.

Output: