本文介绍了Nuxtjs v3和Tailwincss v3 PostCSS@8不兼容的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在尝试在我的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
- 安装tawincss、postcss和autoprefix
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
npx tailwindcss init
- 更新您的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: [],
};
- 更新postcss.config.js
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}
- 创建资源/css/trawind.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中导入tawincss
<script setup>
import '@/assets/css/tailwind.css'
</script>
这篇关于Nuxtjs v3和Tailwincss v3 PostCSS@8不兼容的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!