问题
在使用nuxt4项目引入nuxt官方tailwind模块的时候，在编译时候会出现形如
ℹ Nuxt Icon server bundle mode is set to local
[09:18:16] ERROR Cannot start nuxt: It looks like you're trying to use tailwindcss directly as a PostCSS plugin. The PostCSS plugin has moved to a separate package, so to continue using Tailwind CSS with PostCSS you'll need to install @tailwindcss/postcss and update your PostCSS configuration.
at We (node_modules/.pnpm/tailwindcss@4.1.13/node_modules/tailwindcss/dist/lib.js:35:2121)
at resolveCSSOptions (node_modules/.pnpm/@nuxt+vite-builder@4.1.1_eslint@9.35.0_jiti@2.5.1__lightningcss@1.30.1_magicast@0.3.5_o_525f20e4b44f41196bc4464c8102b1af/node_modules/@nuxt/vite-builder/dist/index.mjs:1445:34)
at async bundle (node_modules/.pnpm/@nuxt+vite-builder@4.1.1_eslint@9.35.0_jiti@2.5.1__lightningcss@1.30.1_magicast@0.3.5_o_525f20e4b44f41196bc4464c8102b1af/node_modules/@nuxt/vite-builder/dist/index.mjs:1736:14)
at async bundle (node_modules/.pnpm/nuxt@4.1.1_@parcel+watcher@2.5.1_@vue+compiler-sfc@3.5.21_db0@0.3.2_eslint@9.35.0_jiti@_9307e11390a82ec14c537421ce907dad/node_modules/nuxt/dist/index.mjs:7412:5)
at async build (node_modules/.pnpm/nuxt@4.1.1_@parcel+watcher@2.5.1_@vue+compiler-sfc@3.5.21_db0@0.3.2_eslint@9.35.0_jiti@_9307e11390a82ec14c537421ce907dad/node_modules/nuxt/dist/index.mjs:7272:3)
at async Promise.all (index 1)
at async NuxtDevServer._load (node_modules/.pnpm/@nuxt+cli@3.28.0_magicast@0.3.5/node_modules/@nuxt/cli/dist/chunks/index.mjs:244:5)
at async NuxtDevServer.load (node_modules/.pnpm/@nuxt+cli@3.28.0_magicast@0.3.5/node_modules/@nuxt/cli/dist/chunks/index.mjs:139:7)
at async NuxtDevServer.init (node_modules/.pnpm/@nuxt+cli@3.28.0_magicast@0.3.5/node_modules/@nuxt/cli/dist/chunks/index.mjs:130:5)
at async initialize (node_modules/.pnpm/@nuxt+cli@3.28.0_magicast@0.3.5/node_modules/@nuxt/cli/dist/chunks/index.mjs:429:3)报错。
解决
安装 7.0.0 beta版本 https://github.com/sunpm/nuxtjs-tailwindcss-issue/tree/%40nuxtjs/tailwindcss-7.0.0-beta.1
原因
由于nuxt内置的解析器和tailwindcss版本不匹配导致的编码异常。