背景:
在vue3+vite5项目中,安装官方文档引入tailwindcss发现不生效。
原因:
新版本的vite不需要创建scss样式文件,直接在main.js中导入import "tailwindcss/tailwind.css";就可以了,这个文件已经提供了基础配置。另外,对于vite4及以上版本,vite.config.js不需要对tailwind做任何配置,postcss插件vite内部会自动引入进行运行。
解决:
vue3+vite5,引入tailwindcss的步骤:
- 安装:npm install -D tailwindcss postcss autoprefixer
- 执行:npx tailwindcss init 创建 tailwind.config.js
- tailwind.config.js配置如下
/** @type {import('tailwindcss').Config} */
export default {
//配置tailwind的应用范围
//在这里我们配置了tailwind应用到index.html文件和src目录下所有.vue和.js文件
content: ["./index.html", "./src/**/*.{vue,js}"],
theme: {
extend: {},
},
plugins: [],
};
4. 在项目的根目录下创建postcss.config.js文件,并配置如下
export default {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
};
5. 在main.js中导入tailwind的基础样式
...
import "tailwindcss/tailwind.css";
...
6.验证是否正确引入了tailwindcss
在App.vue,将img标签的class设置为class='bg-red-900'和class='bg-orange-600'若页面中出现如下红色和橙色背景,则表示tailwindcss引入成功。