How can I disable TailwindCSS for a specific element? #5981
Replies: 11 comments 19 replies
-
Hey! Mid-way through reading the question I was thinking Tailwind CSS doesn't have a built-in feature to "opt-out" of the |
Beta Was this translation helpful? Give feedback.
-
Today I learned about the
I think it can solve some of your needs, especially |
Beta Was this translation helpful? Give feedback.
-
Just wanted to check in on this again. Has there been any work on this? |
Beta Was this translation helpful? Give feedback.
-
It would be of great help if something like this could actually be implemented in tailwind directly. |
Beta Was this translation helpful? Give feedback.
-
Hi! 👋 Could be one solution: "pointer-events-none" |
Beta Was this translation helpful? Give feedback.
-
Bump? Tried all: initial but still doesn't work :) Really need something to disable preflight for a specific element. |
Beta Was this translation helpful? Give feedback.
-
It's possible with tailwind new feature - just add |
Beta Was this translation helpful? Give feedback.
-
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.
Now you can use the See the documentation for more details. |
Beta Was this translation helpful? Give feedback.
-
This is the Solution that I came up with:
|
Beta Was this translation helpful? Give feedback.
-
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, |
Beta Was this translation helpful? Give feedback.
-
This worked for me ... https://www.npmjs.com/package/tailwindcss-scoped-preflight I used the Hoping this helps someone else 😉 |
Beta Was this translation helpful? Give feedback.
-
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 🙏
Beta Was this translation helpful? Give feedback.
All reactions