Javascript 让样式化jsx在NextJS中使用tailwindcss

我正试图让样式化的jsx与NextJS中的tailwindcss一起工作

现场样品：

在上面的示例中，我试图在

index.tsx

页面上找到

Hello World

，以使用tailwindcss更改颜色

例如，如果我将样式化jsx设置为

@apply text-red-400，我希望
h1
会变成红色，但它不会。我知道样式化的jsx在应用
color:green之后起作用了将
h1
更改为绿色

我尝试用
样式化的jsx插件postsss配置babel，但它不起作用。
我不明白为什么，但它突然开始起作用。我甚至没有做任何改变。看起来需要使用
nodejs
或
nextjs
将其关闭…
我认为与tailwindcss相关的任何东西都不需要样式化的jsx

您可以像这样直接使用tailwind类名，并应用样式：

Hello World

我两者都用。例如，我使用它来应用于html标记，比如h1，所以我不需要去每个h1并设置其单独的类名。好的，在我看来，在CSS文件中这样做更“自然”。但是，由于您的解决方案是有效的，可以随意使用它。在许多有效的用例中，您可能希望在样式jsx块中使用tailwind的@apply。一个这样的例子是，您希望将tailwind的规则应用于组件中的
：before
和
：after
伪元素。好的，直到我，但我仍然认为在CSS中这样做更自然。首先，CSS文件是全局范围的。样式化jsx的作用域是组件。