在 div 或组件上禁用 Tailwind

Question

有没有办法在特定的 div 或组件上禁用 Tailwind 的预检？例如所见即所得编辑器，或者想要逐步迁移到 Tailwind。

Answer 1

搜索“未重置顺风”。

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

1. 从https://raw.githubusercontent.com/ixkaito/unreset-css/master/_unreset.scss下载文件 unreset.scss

2. 将其复制到 tailwind.scss 并将其命名空间放在未重置的类下。

.unreset { // 将 unreset.scss 粘贴到此处！}

3. 然后在 JSX 中，您可以将未重置的类添加到：

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

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

Answer 2

我相信，如果您将其用于基本降价，最佳方法是使用@tailwind/typography允许诸如<h6> <b>等标签的包...

1. 跑步npm i @tailwindcss/typography
2. 添加require("@tailwindcss/typography")到 tailwind.config.js 中的插件
3. 添加类名prose prose-lg

<div className="prose prose-lg" dangerouslySetInnerHTML={{ __html: markdownDesc }} />

在此处的文章中找到了此方法： https: //tjaddison.com/blog/2020/08/updating-to-tailwind-typography-to-style-markdown-posts/

Answer 3

另一种选择是：

.element-selector {

       all: revert;
}

all可以将元素的所有属性设置为initial,inherit或revert值。

更多信息请参见：https ://developer.mozilla.org/en-US/docs/Web/CSS/all

Answer 4

据我所知，如果可以找到类似的类，它总是会加载用户界面。一些解决方案可以是

• 通过在初始加载时将其放在其他 css 文件中较早的位置，降低其与其他 css 的优先级。
• 您可以以某种方式配置 tailwind.config.js 文件，以便它只生成需要的 css
• 用额外的标识符包装 css，这样它就不会与 tailwind 类发生冲突。