让 styled-jsx 在 NextJS 中使用 tailwindcss [关闭]

Posted 2023-03-07

【中文标题】让 styled-jsx 在 NextJS 中使用 tailwindcss [关闭]

【英文标题】：Getting styled-jsx to work with tailwindcss in NextJS [closed]

【发布时间】：2021-03-02 06:30:33

【问题描述】：

我正在尝试让 styled-jsx 在 NextJS 中与 tailwindcss 一起使用。

现场样本：https://codesandbox.io/s/nextjs-blog-ts-tpl-z05b4?file=/src/pages/index.tsx

在上面的示例中，我试图在index.tsx 页面上找到<h1>Hello World</h1> 以使用tailwindcss 更改颜色。

例如，如果我将 styled-jsx 设置为 @apply text-red-400; ，我希望 h1 会变成红色，但它不会。我知道 styled-jsx 正在工作，因为应用 color: green; 会将 h1 更改为绿色。

我尝试使用styled-jsx-plugin-postcss 配置 babel，但它不起作用。

【参考方案1】：

我不明白为什么，但它突然开始起作用了。我什至没有做出改变。看起来 nodejs 或 nextjs 需要睡觉了...

【参考方案2】：

我认为你不需要 styled-jsx 来处理与 tailwindcss 相关的任何事情。

您可以像这样直接使用tailwind classNames，样式将被应用：

<h1 className="text-green-400">Hello World</h1>

https://codesandbox.io/s/nextjs-blog-ts-tpl-forked-s5k6x?file=/src/pages/index.tsx:601-648

【讨论】：

我两个都用。例如，我用它来应用像 h1 这样的 html 标签，所以我不需要去每个 h1 并设置其单独的 className。

好吧，在我看来，在 CSS 文件中这样做会更“自然”。但是，既然您的解决方案有效，请随意使用它?

在许多有效的用例中，您可能希望在样式 jsx 块中使用 tailwind 的 @apply。一个这样的例子是您想将 tailwind 的规则应用于组件中的 :before 和 :after 伪元素。

好吧，TIL 但我仍然认为在 CSS 中这样做更自然

首先，CSS 文件是全局范围的。 styled-jsx 的作用域是组件。