安装

npm install autoprefixer tailwindcss @uni-helper/vite-plugin-uni-tailwind -D

• autoprefixer ：自动管理浏览器前缀的插件，可以解析css文件并且添加前缀到css内容里。
• @uni-helper/vite-plugin-uni-tailwind: 将 Tailwind CSS 框架集成到使用 Vite 作为构建工具的 UniApp 项目中

我的版本

修改配置文件

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";
import uniTailwind from "@uni-helper/vite-plugin-uni-tailwind";
export default defineConfig({
  plugins: [uni(), uniTailwind()],
  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>

总结

• 报错的时候先去官网看案例，查博客版本依赖不一样可能会被带偏；