Disable Tailwind on a div or component

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.

Solution 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

Solution 2:

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

1. run npm i @tailwindcss/typography
2. add require("@tailwindcss/typography") to your plugins in tailwind.config.js
3. 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/