Using :not in TailwindCSS
Question:
How to use :not in TailwindCSS? Answer:
<div class="text-amber-700 [&>:not(pre)]:text-sky-700">
<p>This comment is not a pre tag so the color is blue</p>
<pre>This is a 'pre' element, so the content color is amber</pre>
</div>
Description:
The :not
selector is needed even less often than usual in TailwindCSS. You can probably use first
and last
modifiers instead. The :not
pseudo class can sometimes come in handy for dynamically generated HTML elements, so if you still want to use it, arbitrary variants are the solution.
<div class="text-amber-700 [&>:not(pre)]:text-sky-700">
<p>This comment is not a pre tag so the color is blue</p>
<pre>This is a pre element, so the content color is amber</pre>
<div>This again is not a pre element so the color is blue again</div>
</div>
And the result is:
Reference:
Arbitrary variants reference
Share "How to use :not in TailwindCSS?"
Related snippets:
Tags:
use, :not, pseudo class, selector, tailwindcss Technical term:
Using :not selector in TailwindCSS