微信小程序不支持直接引入 Tailwind CSS，需通过 tailwindcss-cli 预编译生成精简 CSS 文件并手动引入；须配置 content 路径、禁用冗余插件、规避 WXSS 不支持特性，并用 safelist 或 CI 校验保障类名一致性。
微信小程序不支持 Tailwind CSS 的直接引入
微信小程序的样式系统基于 WXML + WXSS，不支持 CSS-in-JS、PostCSS 插件或 @tailwind 指令，因此无法像 Web 项目那样通过 tailwind.config.js + postcss 编译生成工具类。直接 npm install tailwindcss 并在 WXSS 中写 @tailwind base 会完全无效，且构建时无报错但样式不生效。
可行方案：用 tailwindcss-cli 预生成精简的工具类 CSS 文件
核心思路是绕过小程序构建流程，在本地预编译出仅含你实际用到的工具类的纯 CSS 文件，再手动引入到小程序的 app.wxss 或页面 WXSS 中。这要求你主动控制类名使用范围，避免全量打包（否则生成的 CSS 超过 200KB，小程序会拒绝加载）。
实操建议：
- 初始化一个临时 Node 项目：
npm init -y && npm install -D tailwindcss postcss autoprefixer - 运行
npx tailwindcss init -p生成tailwind.config.js，并修改content字段为小程序所有 WXML 文件路径，例如：content: ["./pages/**/*.wxml", "./components/**/*.wxml"] - 在
tailwind.config.js中显式关闭不需要的功能以减小体积：module.exports = { content: [...], safelist: [], // 不要加通配符，否则 purge 失效 theme: { extend: {} }, plugins: [], corePlugins: { preflight: false, // 小程序已有基础样式重置，禁用 container: false, } } - 创建一个空的
input.css，只写一行：@tailwind utilities; - 执行编译：
npx tailwindcss -i ./input.css -o ./dist/tailwind.wxss --minify - 将生成的
dist/tailwind.wxss复制进小程序项目，通过@import "/path/to/tailwind.wxss";在app.wxss中引入
WXSS 中使用工具类时的兼容性注意点
小程序 WXSS 对部分 CSS 特性支持有限，Tailwind 默认生成的部分类会失效或表现异常，需手动调整配置规避：
立即学习“前端免费学习笔记（深入）”；
-
flex布局基本可用，但flex-1在某些基础库版本下不生效，建议改用flex: 1写法或用flex-auto -
aspect-ratio属性小程序不支持，对应类如aspect-video会被忽略，需改用 padding-top 百分比 hack -
backdrop-blur、filter、transform（除translate外）等属性在 iOS 低版本基础库中不可用，启用前需确认最低支持基础库版本（建议 ≥ 2.26.0） - 颜色类如
bg-blue-500可用，但bg-opacity-75依赖rgba()或opacity，后者在部分安卓机型上对子元素透传异常，推荐直接用bg-blue-500/75（需 Tailwind ≥ 3.3+ 且开启experimental.opacity）
开发体验优化：避免每次改 WXML 都手动重编译
预编译模式下，新增一个 class="p-4 text-sm" 后，必须重新跑 CLI 才能在 WXSS 中生效，容易遗漏。更可靠的做法是：
- 把常用工具类固化进
tailwind.config.js的safelist，例如：safelist: [ "p-1", "p-2", "p-3", "p-4", "text-xs", "text-sm", "text-base", "bg-red-500", "bg-green-500" ]
- 配合 VS Code 插件
Tailwind CSS IntelliSense，它能基于你的config.js提供类名提示，即使不实时编译也能减少拼写错误 - 在 CI 流程中加入校验步骤：用脚本扫描所有 WXML 中出现的
class值，对比是否全在safelist或 content 匹配范围内，防止上线后样式丢失
真正麻烦的不是引入，而是维护工具类与 WXML 使用之间的一致性——一旦 WXML 里写了未被收录的类，它就只是个无意义的字符串，没有任何警告或 fallback。
