原生小程序开发如何使用 tailwindcss
内容提要
weapp-tailwindcss 3.2.0 版本支持在微信开发者工具中创建小程序项目，用户需安装 Node.js 和相关依赖，配置 tailwind.config.js 文件，并在项目中引入 tailwindcss。通过命令行工具初始化项目后，可进入开发模式并构建产物，适配多平台使用。
延伸解读
为什么需要转义器
小程序有自己独特的技术规范，无法直接使用 web 中的许多特性，包括 tailwindcss 这类原子化 CSS 工具。weapp-tailwindcss 本质上是一个转义器，负责将 tailwindcss 采集到的类名和生成结果，转化为小程序可接受的形式。这样开发者就能在小程序中使用 tailwindcss 的大部分特性，从而加快开发效率。
环境与配置要点
使用前需确保 Node.js 版本不低于 16.6.0，建议安装 LTS 版本。在微信开发者工具创建原生 JS/TS 或 Skyline 项目后，需初始化 package.json，安装 tailwindcss 和 postcss，并生成 tailwind.config.js。配置时需注意 content 字段应包含 wxml 文件，且由于小程序不需要 preflight，应将其设为 false。
初始化与构建流程
安装 weapp-tailwindcss 和 @weapp-tailwindcss/cli 后，运行 npx weapp-tw init 进行初始化。CLI 会修改三个文件，包括生成 weapp-tw.config.js 和调整 project.config.json。之后使用 npm run dev 进入开发模式（支持热更新），或使用 npm run build 构建产物，默认输出到 dist 目录。最后在微信开发者工具中导入该目录即可预览。
跨平台适配潜力
该方案不仅限于微信开发者工具，通过配置还可以适配更多平台。这意味着开发者有可能用同一套 tailwindcss 代码基础，服务于不同的小程序平台，减少重复劳动。不过具体适配方式需参考官方文档或社区讨论，根据目标平台进行相应调整。
Q&A
如何在微信开发者工具中创建小程序项目？
在微信开发者工具中创建小程序项目需要安装 Node.js 版本 >= 16.6.0，并使用命令行工具初始化项目。
weapp-tailwindcss 的主要功能是什么？
weapp-tailwindcss 是一个转义器，负责将 tailwindcss 的类名转化为小程序可接受的格式。
如何配置 tailwind.config.js 文件？
tailwind.config.js 文件需要根据项目的目录结构配置，通常包括指定 content 和 corePlugins 的设置。
如何进入开发模式并构建小程序？
使用命令 npm run dev 进入开发模式，使用 npm run build 构建产物，构建结果默认在 dist 目录。
weapp-tailwindcss 适用于哪些平台？
weapp-tailwindcss 不仅限于微信开发者工具，还可以通过配置适配更多的平台。
安装 weapp-tailwindcss 需要哪些步骤？
需要在项目目录下执行 npm install -D weapp-tailwindcss @weapp-tailwindcss/cli 来安装 weapp-tailwindcss 和 CLI 工具。
