Nuxtjs v3 和 Tailwindcss v3 PostCSS@8 不兼容

Question

我正在尝试在我的 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

我不知道如何解决，也无法在网上找到任何答案，非常感谢您的帮助，谢谢

Answer 1

通过使用 npx nuxi init nuxt3-app，您正在创建 Nuxt v3 应用程序。 Nuxt 3 仍处于 public beta 阶段，因此您很可能会遇到团队无疑会愿意为您研究的问题 - 如果您将其作为问题提出给他们 GitHub.

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

Answer 2

目前，此文档 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: {},
  },
}

创建assets/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 中导入 tailwindcss 而不是 nuxt.config

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

Answer 3

添加到您的tailwind.config.js

module.exports = {
  purge: [
    "./components/**/*.{vue,js}",
    "./layouts/**/*.vue",
    "./pages/**/*.vue",
    "./plugins/**/*.{js,ts}",
    "./nuxt.config.{js,ts}",
    "./app.vue",
  ],
  mode: 'jit',
  theme: {
    extend: {},
  },
  plugins: [],
}

Nuxtjs v3 和 Tailwindcss v3 PostCSS@8 不兼容

Nuxtjs v3 and Tailwindcss v3 PostCSS@8 not compatible

postcss

nuxt.js

tailwind-css