安装
npm install autoprefixer tailwindcss -D
- autoprefixer :自动管理浏览器前缀的插件,可以解析css文件并且添加前缀到css内容里。
修改配置文件
tailwind.config.ts
module.exports = {
content: ["index.html", "./src/**/*.{html,js,ts,vue}"],
theme: {
extend: {},
},
plugins: [],
};
postcss.config.ts
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
}
}
vite.config.ts
import tailwindcss from "tailwindcss";
export default defineConfig({
plugins: [uni()],
css: {
postcss: {
plugins: [tailwindcss()],
},
},
});
引入tailwindcss 指令
在src目录下新建assets目录,新建tailwind.css 文件
@tailwind base;
@tailwind components;
@tailwind utilities;
在App.vue中引入
测试
<view class="bg-black text-orange-500">
<text>1</text>
<text>2</text>
</view>
总结
- 报错的时候先去官网看案例,查博客版本依赖不一样可能会被带偏;