Nuxtjs v3 和 Tailwindcss v3 PostCSS@8 不兼容

Posted 2023-03-06

【中文标题】Nuxtjs v3 和 Tailwindcss v3 PostCSS@8 不兼容

【英文标题】：Nuxtjs v3 and Tailwindcss v3 PostCSS@8 not compatible

【发布时间】：2022-01-15 00:41:00

【问题描述】：

我正在尝试在我的 nuxt 项目中安装 Tailwindcss

我使用来自 nuxt https://v3.nuxtjs.org/getting-started/installation 的全新安装

npx nuxi init nuxt3-app

并按照tailwindcss安装

https://tailwindcss.com/docs/guides/nuxtjs

但是当我启动应用程序 npm run dev 时出现此错误

ERROR  Cannot restart nuxt:  postcss@8 is not compatible with current version of nuxt (0.0.0). Expected: >=2.15.3   

不知道怎么解决，网上也找不到答案，谢谢大家的帮助，谢谢

【问题讨论】：

您可以使用 Windi CSS（几乎完全相同，但个人感觉更好更快）。 Windi CSS 使用与 Tailwind CSS 相同的语法并适用于 Nuxt 3。您可以在此处找到有关如何安装它的文档：[windicss.org/].

【参考方案1】：

目前，此文档 https://tailwindcss.com/docs/guides/nuxtjs 仅适用于 nuxtjs v2，但如果您遵循本指南，仍然可以使用 v3：

目前不要使用@nuxt/postcss8，它仅适用于 nuxtjs v2

安装 tailwindcss、postcss 和 autoprefixer

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
npx tailwindcss init

更新您的tailwind.config.js

module.exports = 
  content: [
    './assets/**/*.vue,js,css',
    './components/**/*.vue,js',
    './layouts/**/*.vue',
    './pages/**/*.vue',
    './plugins/**/*.js,ts',
    './nuxt.config.js,ts',
  ],
  variants: 
    extend: ,
  ,
  plugins: [],
;

更新您的 postcss.config.js

module.exports = 
  plugins: 
    tailwindcss: ,
    autoprefixer: ,
  ,

创建资产/css/tailwind.css

@tailwind base;
@tailwind components;
@tailwind utilities;

更新您的 nuxt.config.ts

import  defineNuxtConfig  from 'nuxt3'

// https://v3.nuxtjs.org/docs/directory-structure/nuxt.config
export default defineNuxtConfig(
  css: ['~/assets/css/tailwind.css'],
  build: 
    postcss: 
      postcssOptions: require('./postcss.config.js'),
    ,
  
)

在app.vue 中导入您的css。 （可选）在以前的版本中，他们建议我们在 app.vue 而不是 nuxt.config 中导入 tailwindcss

<script setup>
import '@/assets/css/tailwind.css'
</script>

【讨论】：

刚刚测试不工作：s

我测试它的工作！谢谢~

【参考方案2】：

通过使用npx nuxi init nuxt3-app，您正在创建一个 Nuxt v3 应用。 Nuxt 3 仍处于公开测试阶段，因此您很可能会遇到团队无疑很乐意为您研究的问题 - 如果您在他们的 GitHub 上将其作为问题提出。

如果它满足您的需求，Nuxt v2 可作为稳定的替代品。按照guide that you referenced 设置一个新的应用程序，你应该没有任何问题。