Nuxtjs v3和Tailwindcss v3 PostCSS@8不兼容
我正在尝试在我的nuxt项目中安装Tailwindcss
我使用nuxt https://v3.nuxtjs.org/getting-started/installation中的新安装。
npx nuxi init nuxt3-app并跟随尾翼安装
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 我不知道如何修复它，在网上找不到任何答案，谢谢你的帮助。
回答 9
Stack Overflow用户
发布于 2021-12-11 09:41:45
此时，本文档https://tailwindcss.com/docs/guides/nuxtjs仅适用于nuxtjs v2，但如果您遵循本指南，仍然可以使用v3：
不要使用@nuxt/postcss8，目前它只适用于nuxtjs v2
- 安装尾翼、后座和自动固定装置。
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而不是nuxt.config中导入尾风
<script setup>
import '@/assets/css/tailwind.css'
</script>Stack Overflow用户
发布于 2022-07-02 10:17:14
我也遇到了这个问题，因为Nuxt 3需要一种不同的方法来集成Tailwind。下面是将Tailwind安装为一个Nuxt模块，而不是独立安装。这比较容易，因为它所需的配置要少得多(不需要编辑postcss.config.js，nuxt.config.js所需的配置就少一点)。
Nuxt尾风模块5.0版提供了对Nuxt 3的支持。完全默认安装如下：
第一步
要安装，我们可以使用@nuxtjs/tailwindcss@最新或您需要的任何版本(在5.1之后)来安装这个版本(纱线添加或npm安装)。
yarn add -D @nuxtjs/tailwindcss@latest第二步
然后在nuxt.config.js，中将模块添加到模块数组中：
import { defineNuxtConfig } from "nuxt"
export default defineNuxtConfig({
modules: [
'@nuxtjs/tailwindcss'
]
})第三步
手动或使用终端命令创建tailwind.config.js文件：
npx tailwindcss init第四步
将尾风指令添加到您的主CSS文件中(默认情况下为./assets/css/ main win.css，或文件)。
@tailwind base;
@tailwind components;
@tailwind utilities;第五步
在此之后，尝试运行dev或build命令，它应该能够正常工作。
https://stackoverflow.com/questions/70302520
复制相似问题
腾讯云开发者
