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

Question

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

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

 .exampleClass { }
}

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

然而，这是行不通的。

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

Answer 1

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

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

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

有关更多详细信息，请参阅：https ://tailwindcss.com/docs/configuration#prefix