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.
4 Answers
Search about 'unreset tailwind'.
https://www.swyx.io/tailwind-unreset/
download file unreset.scss from https://raw.githubusercontent.com/ixkaito/unreset-css/master/_unreset.scss
copy it over to your tailwind.scss and namespace it under an unreset class.
.unreset { // paste unreset.scss here! }
- And then in your JSX, you can add that unreset class in:
div className="unreset" dangerouslySetInnerHTML={{ __html: post.contents }}
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.
I believe the optimal method, if you're using it for basic markdown is to use the the @tailwind/typography package which will allow tags such as <h6> <b> etc...
- run
npm i @tailwindcss/typography - add
require("@tailwindcss/typography")to your plugins in tailwind.config.js - add the className
prose prose-lg
<div className="prose prose-lg" dangerouslySetInnerHTML={{ __html: markdownDesc }} />
Found this method in a article here: https://tjaddison.com/blog/2020/08/updating-to-tailwind-typography-to-style-markdown-posts/
Another option is:
.element-selector {
all: revert;
}
all can set all properties of the element to the initial, inherit or revert value.
More info here: https://developer.mozilla.org/en-US/docs/Web/CSS/all
Related