有没有办法将生成的 Tailwind 类包装在根类下？答案

【问题标题】：Is there a way to wrap generated Tailwind classes under a root class?有没有办法将生成的 Tailwind 类包装在根类下？
【发布时间】：2023-02-03 02:41:48
【问题描述】：

我想用一个类包装生成的 Tailwind 实用程序类，以防止它们渗入消费者样式表，如下所示：

.root {
  @tailwind base;
  @tailwind components;
  @tailwind utilities;
  @tailwind variants;

 .exampleClass { }
}

<div className="root">{children}</div>

但是，这不起作用。

你能给我一些建议来解决这个问题吗？提前致谢。

【问题讨论】：

标签： reactjs tailwind-css

【解决方案1】：

一种解决方案是分两步生成 CSS。

第1步：将 tailwind CSS 生成到一个临时文件中。

src/app.css 文件：

@tailwind base;
@tailwind components;
@tailwind utilities;
@tailwind variants;

.exampleClass { }

生成临时文件：

$ tailwindcss -i ./src/app.css -o ./src/app.tmp.css --watch

第2步：使用 SCSS 文件生成最终的 CSS。

src/app.scss 文件：

.root {
   @import "app.tmp";
}

生成最终文件：

$ sass --watch src/app.scss dist/app.css

【讨论】：

【解决方案2】：

您可以使用重要的你的财产tailwind.config.js设置包装类或 ID。

module.exports = {
  important: '#app',
}

有关详细信息，请参阅文档：

https://tailwindcss.com/docs/configuration#selector-strategy

【讨论】：

【解决方案3】：

一种解决方案是在tailwind.config.js中添加前缀：

module.exports = {
  prefix: 'tw-',
}

这将使 Tailwind 实用程序类只能在添加前缀时被引用，例如tw-m-2，应该（希望）防止与其他站点样式发生任何冲突。

【讨论】：