在 div 或组件上禁用 Tailwind

Posted 2023-03-07

【中文标题】在 div 或组件上禁用 Tailwind

【英文标题】：Disable Tailwind on a div or component

【发布时间】：2020-07-17 05:43:49

【问题描述】：

有没有办法在特定的 div 或组件上disable Tailwind's Preflight？例如，所见即所得的编辑器，或者想要逐渐迁移到 Tailwind。

【参考方案1】：

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

运行npm i @tailwindcss/typography 将require("@tailwindcss/typography") 添加到tailwind.config.js 中的插件 添加类名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/

【参考方案2】：

搜索“未重置顺风”。

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

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

将其复制到您的 tailwind.scss 并在未重置的类下命名它。

.unreset // 在此处粘贴 unreset.scss！

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

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

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

【参考方案3】：

据我所知，如果可以找到类似的类，它将始终加载 ui。一些解决方案可以是

通过在初始加载时将其从其他 css 文件中更早地放置来降低其相对于其他 css 的优先级。 您可以配置tailwind.config.js 文件，使其只生成需要的css 用额外的标识符包装 css，使其不会与顺风类冲突。