vue3使用tailwindcss报错问题
npm create vite@latest
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init
4. ·不过执行 npx tailwindcss init 的时候控制台就报错了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文件
// tailwind.config.js/** @type {import('tailwindcss').Config} */module.exports = {content: ["./src/**/*.{html,js}"],theme: {extend: {},},plugins: [],}
然后再style.css引入// postcss.config.js module.exports = {plugins: {tailwindcss: {},autoprefixer: {},} }
@tailwind base; @tailwind components; @tailwind utilities;
npm install
报错[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
import postcssTailwind from '@tailwindcss/postcss'; import autoprefixer from 'autoprefixer'; export default { plugins: [ postcssTailwind, autoprefixer ]};
注意: 要看清版本 现在安装的tailwindcss 是4.x 官网是3.x
地址:https://tailwindcss.com/