在 div 或组件上禁用 Tailwind

Disable Tailwind on a div or component

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

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

  • 通过在初始加载时将其置于其他 css 文件的较早位置，从而降低其他 css 的优先级。
  • 您可以配置 tailwind.config.js 文件，使其只生成 css 需要的
  • 用额外的标识符包装 css，这样它就不会与顺风相撞 类。

搜索 'unreset tailwind'。

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

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

    下载文件unreset.scss

  2. 将其复制到您的 tailwind.scss 并在未重置的 class.

    下命名空间

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

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

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

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

我认为最佳方法是使用 @tailwind/typography 包，它允许使用 <h6> <b> 等标签...

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