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

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

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

1. 安装 tailwindcss、postcss 和 autoprefixer

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

2. 更新您的tailwind.config.js

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

3. 更新您的postcss.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: [],
};

4. 创造assets/css/tailwind.css

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

5. 更新您的nuxt.config.ts

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

6. 将你的 CSS 导入到app.vue. （可选）在以前的版本中，他们建议我们在 app.vue 而不是 nuxt.config 中导入 tailwindcss

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'),
    },
  }
})

Answer 2

我也遇到了这个问题，因为 Nuxt 3 需要一种不同的方式来集成 Tailwind。下面是将Tailwind作为Nuxt模块安装，而不是独立安装。这更容易，因为它需要更少的配置（不需要编辑postcss.config.js ， nuxt.config.js所需的配置更少）。

Nuxt Tailwind 模块 5.0 版本引入了对 Nuxt 3 的支持。完全默认安装如下：

步骤1

要安装，我们可以使用@nuxtjs/tailwindcss@latest或您需要的任何版本（5.1 之后）进行开发安装（yarn add 或 npm install） 。

 yarn add -D @nuxtjs/tailwindcss@latest

第2步

然后在nuxt.config.js中，将模块添加到modules数组中：

import { defineNuxtConfig } from "nuxt"

export default defineNuxtConfig({
    modules: [
        '@nuxtjs/tailwindcss'
    ]
})

步骤3

手动或使用终端命令创建tailwind.config.js文件：

npx tailwindcss init

步骤4

将 Tailwind 指令添加到主 CSS 文件中（默认为 ./assets/css/tailwind.css，或者在nuxt.config.js文件中进行配置）。

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

步骤5

之后，尝试运行您的开发或构建命令，它应该可以正常工作。