1. 安装与配置 Tailwind CSS
前言
本教程演示原生微信小程序 JS 模板接入 tailwindcss@4 与 weapp-tailwindcss 的方式。重点是两件事：源码要进入 Tailwind 扫描范围，小程序目标转译交给 weapp-tailwindcss。
如果项目必须继续使用 tailwindcss@3，请安装 weapp-tailwindcss@4 并查看 v4 文档站。
运行环境
推荐使用 Node.js ^20.19.0 || >=22.12.0。这是当前仓库的 engines 要求，也能避开旧 Node 对现代工具链的兼容问题。Node 版本不满足时，不建议用 --ignore-engines 硬装，后续构建错误会更难排查。
创建项目
打开微信开发者工具, 点击 + 创建一个项目，依次选择:
AppID使用测试号- 开发模式:
小程序 - 后端服务:
不使用云服务 - 模板选择: 第二项选择
基础 - 选择
JS 基础模板
使用 JS 基础模板创建的项目，依然可以使用
Typescript
先把 Tailwind CSS 的入口准备好，下一页再注册 weapp-tailwindcss 和 weapp-vite。
0. 初始化 package.json
如果使用原生 JS 模板创建项目，项目目录里通常没有 package.json。
这时需要先执行：
npm init -y，在项目下创建 package.json。
1. 安装 Tailwind CSS
- npm
- Yarn
- pnpm
- Bun
# 安装 tailwindcss 和 weapp-tailwindcss
npm i -D tailwindcss weapp-tailwindcss
# 安装 tailwindcss 和 weapp-tailwindcss
yarn add --dev tailwindcss weapp-tailwindcss
# 安装 tailwindcss 和 weapp-tailwindcss
pnpm add -D tailwindcss weapp-tailwindcss
# 安装 tailwindcss 和 weapp-tailwindcss
bun add --dev tailwindcss weapp-tailwindcss
weapp-tailwindcss 会接管 Tailwind CSS 生成，不要再创建 Tailwind 专用的 postcss.config.js。如果项目已有 PostCSS 配置，只保留业务自己的非 Tailwind 插件。
2. 配置扫描范围
Tailwind CSS 4 在 CSS 入口里写扫描范围：
@import "tailwindcss";
@source "./components/**/*.{wxml,js,ts}";
@source "./pages/**/*.{wxml,js,ts}";
@source "./app.{js,ts,json}";
@source not "./node_modules";
@source not "./dist";
Tailwind 4 的入口请放在纯 .css 文件里。不要直接写进 less、scss、sass 入口。
3. 引入 Tailwind CSS
在小程序项目入口样式文件中写 Tailwind 入口，使用上方的 @import "tailwindcss"; 和 @source。
在入口 CSS 加入这一段代码后，微信开发者工具可能会先报错。这通常是因为 weapp-tailwindcss 插件还没有注册完成。
下一步继续安装并注册 weapp-tailwindcss。
