Disable Tailwind on a div or component

Question

Is there a way to disable Tailwind's Preflight on a specific div or component? For example a WYSIWYG editor, or wanting to migrate gradually to Tailwind.

Answer 1

Search about 'unreset tailwind'.

https://www.swyx.io/tailwind-unreset/

1. download file unreset.scss from https://raw.githubusercontent.com/ixkaito/unreset-css/master/_unreset.scss

2. copy it over to your tailwind.scss and namespace it under an unreset class.

.unreset { // paste unreset.scss here! }

3. And then in your JSX, you can add that unreset class in:

div className="unreset" dangerouslySetInnerHTML={{ __html: post.contents }}

https://www.youtube.com/watch?v=iLEYtgBezhs

Answer 2

As far as i know it will always load the ui if can find similar classes. Some solution can be

• Reducing its priority from other css, by putting it earlier from other css files in initial load.
• you can config tailwind.config.js file in a way so that it only generates css that needed
• wrapping css with extra identifier so that it can't collide with tailwind classes.