Nuxtjs v3 和 Tailwindcss v3 PostCSS@8 不兼容答案

【问题标题】：Nuxtjs v3 and Tailwindcss v3 PostCSS@8 not compatibleNuxtjs v3 和 Tailwindcss v3 PostCSS@8 不兼容
【发布时间】：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/].

标签： nuxt.js tailwind-css postcss

【解决方案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 设置一个新的应用程序，你应该没有任何问题。

【讨论】：