- Instant help with your CSS coding problems

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:

Using :not in Tailwind example

Share "How to use :not in TailwindCSS?"
Tags:
use, :not, pseudo class, selector, tailwindcss
Technical term:
Using :not selector in TailwindCSS
Interesting things
OpanAi's ChatGPT