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!!!

[ralpmancawan]

THANK YOU!!!

[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'),
    // ...
  ],
}

[lsmolic]

Saved me a bunch. Thank you!

[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?

[sovetski]

Looks very good but did not worked for me... Tailwind base styling overrides these changes, I tried this but it did not work too (in SCSS)

.revert-tailwind {
	all: initial !important;
	font-size: initial !important;
	font-weight: initial !important;

	> * {
		all: initial !important;
		font-size: initial !important;
		font-weight: initial !important;
	}
}

[Sidmaz666]

Looks very good but did not worked for me... Tailwind base styling overrides these changes, I tried this but it did not work too (in SCSS)

.revert-tailwind {
	all: initial !important;
	font-size: initial !important;
	font-weight: initial !important;

	> * {
		all: initial !important;
		font-size: initial !important;
		font-weight: initial !important;
	}
}

Well, your SCSS doesn't look like the solution provided by me the correct SCSS will be:

revert-tailwind {
  all: initial;
 /*font-size: initial*/
  > * {
    all: revert;
    /* font-size: revert */
  }
}

You can add !important . This should work, and use the revert-tailwind class in a parent it's child should take the effects.

[Sidmaz666]

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

Wrap the input element with a parent div with class revert-tailwind, use style attribute to style the input element

[MwanPygmay]

This solution does not seem to work well with borders:
Basic html result:

Result in my app, using the revert-tailwind class on parent div:

[sovetski]

Any news on this subject? In my case, I am using TinyMCE to manage my website content.

When I edit the content I see the browser's basic styling, but when I go on the preview page, as tailwind base is included on all website it also impact my content so I am getting a completely different result between Edit and Preview.

Something like @Sidmaz666 suggested, .tailwind-ignore etc. will be very perfect

[Sidmaz666]

Any news on this subject? In my case, I am using TinyMCE to manage my website content.

When I edit the content I see the browser's basic styling, but when I go on the preview page, as tailwind base is included on all website it also impact my content so I am getting a completely different result between Edit and Preview.

Something like @Sidmaz666 suggested, .tailwind-ignore etc. will be very perfect

Yeah sure, just rename the .revert-tailwind class to .tailwind-ignore

[yabdab]

This worked for me ...

https://www.npmjs.com/package/tailwindcss-scoped-preflight

I used the remove: parameter to exclude certain tags from preflight.

Hoping this helps someone else 😉

[MwanPygmay]

works great indeed!

[martinpa13py]

this works really well

[SaahBrice]

something like all: revert-layer;
or to be more specific, color:revert-layer;