tailwindcss vue项目的安装与配置

//网上包括官网的安装路线有错误

1.安装tailwindcss

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

 2.生成配置文件

npx tailwindcss init

tailwind.config.js配置如下  //官网有主题默认配置

module.exports = { content: [ "./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}",], theme: { extend: {}, }, plugins: [], }

 3.创建一个.css文件输入以下代码

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

然后在main.js引入

 4.创建postcss.config.js文件 导入以下代码

module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {}
}
}