twin.macro的飞行前风格与顺风预飞不同

Question

据我的研究和twin.examples回购Next.js，twin.macro建议添加他们的飞行前组件，他们命名为<GlobalStyles />。他们通常将其命名为<BaseStyles />，因为据我所知，组件导出一组预运行前样式，这些样式将浏览器行为重置为正常的默认设置。这个推荐的组件，据称包含与tailwind/base.css相同的样式(也就是CSS文件中的@tailwind base; )，加上一些关键帧来帮助使用双胞胎提供的动画。

然而，当我使用这个组件而不是我当前的TailwindCSS 3.2提供的预飞时，我的所有classNames都会被忽略和样式化-组件中断。请注意，我使用的是twin.macro v3最新版本候选版本，因为以前的版本与TailwindCSS 3不兼容。

谁能解释这一点，指给我一个地方，我可以学习一个解决办法，或知道一个解决办法？

我有一个公开的讨论与更多的上下文(和截图)的官方回购，但目前还没有答案。您可以在这里查看：https://github.com/ben-rogerson/twin.macro/discussions/719

Answer 1

因此，我设法通过尝试和错误找到了一个答案，并在上面的链接上等待了一个响应。问题的解决方案是使用tw和css组件属性而不是className (在twin.macro文档中隐式描述)。

另外，如果您正在使用其他CSS导入，如@tailwind/layers和@tailwind/utilities等.，只要您正在导入twin.macro#GlobalStyles组件(如文档中的例子)，就不需要将这些导入到任何地方。

希望这对某人有帮助！)