vue3使用tailwindcss报错问题

shmily麻瓜小菜鸡2025-05-11 17:12

npm create vite@latest
npm install -D tailwindcss postcss autoprefixer

npx tailwindcss init
4. ·不过执行 npx tailwindcss init 的时候控制台就报错了

js 复制代码

PS E:\vite-demo> npx tailwindcss init
npm ERR! cb.apply is not a function
npm ERR! A complete log of this run can be found in:

那就手动创建 tailwind.config.js文件和postcss.config.js文件

js 复制代码

	// tailwind.config.js
	/** @type {import('tailwindcss').Config} */
	module.exports = {
	  content: ["./src/**/*.{html,js}"],
	  theme: {
	    extend: {},
	  },
	  plugins: [],
	}

js 复制代码

// postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}

然后再style.css引入

css 复制代码

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

npm install
报错

js 复制代码

[vite] Internal server error: [postcss] 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.

重新安装 npm install @tailwindcss/postcss

js 复制代码

	import postcssTailwind from '@tailwindcss/postcss'; 
		import autoprefixer from 'autoprefixer'; 
		export default { 
		    plugins: [ postcssTailwind, autoprefixer ]
		};

注意：要看清版本现在安装的tailwindcss 是4.x 官网是3.x

地址：https://tailwindcss.com/