如何在 NuxtJS 上获取 Tailwindcss 2.x答案

【问题标题】：How to get Tailwindcss 2.x on NuxtJS如何在 NuxtJS 上获取 Tailwindcss 2.x
【发布时间】：2021-05-24 18:14:07
【问题描述】：

我尝试在 NetlifyCMS 的 nuxtJS 样板上安装 Tailwindcss 2.x，但在开发版本中，我遇到了这个错误： 模块构建失败（来自 ./node_modules/css-loader/dist/cjs.js）：CssSyntaxError (3:18) 需要一个左方括号。

我认为该错误仅在未触发 purgeCSS 时出现，因为生产构建没有问题。

我尝试使用tailwindcss 1.9，但没有问题。

【问题讨论】：

标签： nuxt.js tailwind-css

【解决方案1】：

正如@nuxt/tailwindofficial documentation 中所解释的，Nuxt 仍在使用PostCSS 7，几天前刚刚升级到PostCSS 8（Nuxt 2.15.0），因此核心团队正在迁移到 TailwindCSS 2.x现在。
@atinux 现在是 VueJS Amsterdam 的 busy preparing his talk，所以发布时间几乎是在 3 月的第一周或第二周。

您可以等待 TailwindCSS 官方模块的下一个版本，也可以使用第一个链接中提供的解决方案，也就是

yarn add --dev tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

另外，作为@Qayyum Shareef，我确实建议使用官方模块以获得一些认真的支持和更轻松的调试。

【讨论】：

是的，我已经有了好版本。我不知道为什么会发生这个错误。今天早上，我使用 netlifyCMS 网站上的 nuxt 样板重新启动了一个新项目，并且我已经升级了 tailwindcss，并且没有错误......具有相同的配置，相同的依赖项。顺便说一句，感谢你们两个试图帮助我并感谢发布信息，这是一个好消息。我验证您的评论，因为这是更新 Tailwindcss 的好方法。
哈哈，谢谢！你有回购给我们看吗？为什么你这么想使用 Netlify 的样板？

【解决方案2】：

您可以按照顺风的 Nuxt.js 安装指南here

，而不是使用来自 Netlify 的 Nuxt.js 样板

【讨论】：