UniAPP中使用TailwindCSS

1. 安装必须的依赖

"tailwindcss": "^3.4.15",
"autoprefixer": "^10.4.8",
"postcss": "^8.4.14",
"postcss-rem-to-responsive-pixel": "^5.1.3",
"weapp-tailwindcss-webpack-plugin": "^1.6.10"

2. 在根目录下创建tailwind的配置文件tailwind.config.js，或者直接执行 pnpm tailwind init

3. 修改tailwind.config.js内容，用于支持微信小程序

/** @type {import('tailwindcss').Config} */
const path = require("path");
const resolve = (p) => {
	return path.resolve(__dirname, p);
};

module.exports = {
	separator: '__', // 小程序不支持默认的: 需要调整
	corePlugins: {
		preflight: false, // 取消tailwind默认的样式重置
	},
	content: [
		'./pages/**/*.{vue,js}',
		'./App.vue',
	].map(resolve),
	theme: {
		extend: {
		},
	},
	plugins: [],
}

4. vite.config.ts中引入插件

import {
	defineConfig
} from 'vite';
import path from 'path';
import uni from '@dcloudio/vite-plugin-uni';
import vwt from "weapp-tailwindcss-webpack-plugin/vite";
import postcssWeappTailwindcssRename from "weapp-tailwindcss-webpack-plugin/postcss";

const isH5 = process.env.UNI_PLATFORM === "h5";

// vite 插件配置，注意一定要把 uni 注册在 vwt 前
const vitePlugins = [uni()];

const resolve = (p) => {
	return path.resolve(__dirname, p);
};

const postcssPlugins = [
	require("autoprefixer")(),
	require("tailwindcss")({
		config: resolve("./tailwind.config.js"),
	}),
];
if (!isH5) {
	vitePlugins.push(vwt());
	postcssPlugins.push(postcssWeappTailwindcssRename({}));
}

export default defineConfig({
	plugins: vitePlugins,
	define: {
		'process.env.API': JSON.stringify('http://schooltest.bulo.cn:23456')
	},
	css: {
		postcss: {
			// 内联写法
			plugins: postcssPlugins,
		},
	},
});

5. 在App.vue中引入tailwindcss的样式

@import "tailwindcss/base";
@import "tailwindcss/utilities";
@import "@/static/iconfont.css";