reactjs 不使用Tailwind全局CSS的React组件

4dc9hkyq  于 2023-03-01  发布在  React
关注(0)|答案(1)|浏览(194)

我有一个使用Tailwind的Next.js应用程序。我想加载一个有自己风格的第三方文档查看器,但这个查看器和Tailwind风格之间存在冲突。
有没有办法避免命名冲突?
一种方法是使用iframe,但我希望避免它。
我知道我可以给Tailwind类加前缀,但是我需要重命名所有文件中的所有类,对吗?如果是这样的话,那么它不是一个选项。

mrfwxfqh

mrfwxfqh1#

您可以使用这个TailwindCSS插件arthurdenner/tailwindcss-all

  • 首先将其安装为开发依赖项。
npm i -D tailwindcss-all
  • 接下来,在tailwind.config.js中注册插件。
module.exports = {
  // ...
  plugins: [
    // ...
    require('tailwindcss-all'),
  ],
};
  • 用类为all-initialdiv Package 文档查看器(或内容)。
<section class="bg-blue-100">
  <div class="container mx-auto min-h-screen px-5 py-20">
    <h1 class="text-2xl font-bold">The div below will not use TailwindCSS reset due to use of <span class="whitespace-nowrap rounded-md bg-blue-300 px-2 py-1 text-xl">all-initial</span> class.</h1>
    <main class="all-initial">
      <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. In ullam ea ab non magni placeat exercitationem doloremque nulla architecto ratione. Obcaecati eveniet dolores reprehenderit reiciendis unde, eius eligendi debitis cupiditate.</p>
    </main>
  </div>
</section>

有关快速预览,请参阅here

相关问题