Nuxtjs v3和Tailwincss v3 PostCSS@8不兼容 [英] Nuxtjs v3 and Tailwindcss v3 PostCSS@8 not compatible

问题描述

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

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

npx nuxi init nuxt3-app

并遵循TailWincss安装

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   

我不知道如何修复，并且在网上找不到任何答案，感谢您的帮助

推荐答案

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

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

1. 安装tawincss、postcss和autoprefix

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

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

3. 更新postcss.config.js

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

4. 创建资源/css/trawind.css

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

5. 更新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'),
    },
  }
})

6. 在app.vue中导入您的CSS。(可选)在以前的版本中，他们建议我们在app.vue而不是nuxt.config中导入tawincss

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

这篇关于Nuxtjs v3和Tailwincss v3 PostCSS@8不兼容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！