How can I disable TailwindCSS for a specific element?

[albingroen]

I have case where I want to render html emails in my application, but I don't want TailwindCSS to affect the styling of these emails.

Is there any way I could disable TailwindCSS for just that element? I have tried rendering the emails inside of iframes, which do solve the css problem, but comes with other issues.

Help appreciated 🙏

[simonswiss]

Hey!

Mid-way through reading the question I was thinking iframe, but as you mention, there are other issues that can come with those.

Tailwind CSS doesn't have a built-in feature to "opt-out" of the preflight styles for just an element, unfortunately.

[albingroen]

Okay, then I understand. I went with iframes for now. It would be cool though if you could just add like a tw-none class or something to disable Tailwind styles for that element and all its children.

[BrammyS]

Adding something like this would be great!

[Abhishek-stockdaddy]

yes we really need it

[arthurdenner]

Today I learned about the all CSS property (MDN page).

The all shorthand property resets all of an element's properties except unicode-bidi, direction and CSS Custom Properties.
It can set properties to their initial or inherited values, or to the values specified in another stylesheet origin.

I think it can solve some of your needs, especially all: initial.
I've created a small plugin for it: https://github.com/arthurdenner/tailwindcss-all
Demo: https://tailwindcss-all.netlify.app

Screenshots

[Abhishek-stockdaddy]

even this is not working
i'm using it like this

<div className="all-initial"> <div className="text-center bg-gray-400 p-40 all-initial">About</div> </div>

[Abhishek-stockdaddy]

okay nvm it's working

[Bedrock02]

wow thank you for this

[modrictin]

WOW! THank you so much on this one!!!

[albingroen]

Just wanted to check in on this again. Has there been any work on this?

[jasminediaconu]

It would be of great help if something like this could actually be implemented in tailwind directly.
I also have some components where I need the preflight disabled and overwriting the tailwind stylesheet is not handy.

[Livia89]

Hi! 👋 Could be one solution: "pointer-events-none"

[albingroen]

Hi! 👋 Could be one solution: "pointer-events-none"

No this doesn't solve the issue at hand unfortunately

[ItzAmirreza]

Bump? Tried all: initial but still doesn't work :) Really need something to disable preflight for a specific element.

[Krak86]

It's possible with tailwind new feature - just add prose class and it ignores tailwind classes

[IAPBenediktZwoelfer]

Would you tell us how haha

[Krak86]

Something like that:

<article class="prose">
  <h1>Garlic bread with cheese: What the science tells us</h1>
  <p>
    For years parents have espoused the health benefits of eating garlic bread with cheese to their
    children, with the food earning such an iconic status in our culture that kids will often dress
    up as warm, cheesy loaf for Halloween.
  </p>
  <p>
    But a recent study shows that the celebrated appetizer may be linked to a series of rabies cases
    springing up around the country.
  </p>
  <!-- ... -->
</article>

And add appropriate plugin to tailwind config:

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    // ...
  },
  plugins: [
    require('@tailwindcss/typography'),
    // ...
  ],
}

[wwangwe]

You can use the official tailwindcss/typography plugin that @Krak86 is explaining above. It does exactly what you're looking for and even exceeds expectations.

npm install -D @tailwindcss/typography

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    // ...
  },
  plugins: [
    require('@tailwindcss/typography'),
    // ...
  ],
}

Now you can use the prose classes to add sensible typography styles to any vanilla HTML

See the documentation for more details.

[OluAgunloye]

Ran into this issue myself, glad there's a fix now.
EDIT: Actually this doesn't work to eliminate the pre-flight check specifically for some elements, which is the desired effect.

[Sidmaz666]

This is the Solution that I came up with:

1. Add the Following CSS to tailwind.css file.

 .revert-tailwind{
  all: initial;
}

.revert-tailwind > * {
  all: revert;
}

2. Compile Tailwind CSS to the main.css stylesheet and use the class as follow:

<div class="bg-black text-white text-xl">
Affected By Tailwind
<div class="revert-tailwind">
<h1>Uneffected By Tailwind!</h1>
</div>
</div>

[aligajani]

How can I make this work with input element outline color?