weapp-tailwindcss
在小程序及多端开发框架中使用Tailwind CSS的适配方案。
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：weapp-tailwindcss。 它的用途是：在小程序及多端开发框架中使用Tailwind CSS的适配方案。 完整的 Skill 内容见：https://321skill.com/skills/weapp-tailwindcss/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
“我正在用Taro开发一个微信小程序，想引入Tailwind CSS来提高样式开发效率，但遇到了类名不生效的问题。”，它会推荐你使用weapp-tailwindcss，并可能提供核心的安装命令和配置片段，帮助你快速集成。或者
对AI说：“我的uni-app项目需要同时输出H5和小程序，如何让Tailwind样式在两个平台都正常？”它会引导你查阅weapp-tailwindcss中关于多端配置的文档。
介绍
weapp-tailwindcss 解决了在小程序生态中无法直接使用流行的原子化CSS框架Tailwind CSS的问题。它通过转译Tailwind CSS生成的选择器、工具类和部分CSS能力，使其适配微信、支付宝、抖音等小程序平台以及uni-app、Taro、Mpx等多端开发框架的语法和限制。
使用方式是通过npm安装核心包，并在项目的构建配置（如Vite、Webpack）中集成插件。开发者可以像在Web开发中一样编写Tailwind CSS类名，插件会在构建过程中自动处理样式兼容性、单位转换（如rpx）和平台差异，最终输出符合小程序规范的样式代码。
它非常适合需要在微信小程序、支付宝小程序等平台，或者使用uni-app、Taro等框架进行跨端开发，但又希望保持高效、一致的Tailwind CSS开发体验的前端开发者。对于追求开发效率、希望一套样式代码复用多端的团队来说，这是一个强有力的工具。
需要注意的是，从5.2.0版本开始，要求Node.js版本不低于22.12.0，使用HBuilderX的uni-app项目也需要升级到5.11或更高版本以确保ESM模块支持。在开始前，建议仔细阅读官方文档中对应框架的接入指南。
核心特点
与仅提供基础适配的方案不同，weapp-tailwindcss深度适配了Tailwind CSS v4，并提供了覆盖Vite、Webpack、Rspack等多种构建工具，以及uni-app x等最新框架的完整生态支持，其配套的运行时包（如cva, variants）能进一步丰富小程序端的样式开发体验。
注意事项
不适合仅进行纯Web（H5）开发而不涉及小程序或跨端场景的项目。
常见问题
支持Taro框架吗？
支持，官方文档提供了Taro的详细接入指南。
能用在原生小程序开发中吗？
可以，支持原生小程序以及基于原生小程序的开发模式（如weapp-vite）。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/weapp-tailwindcss/raw/index.md 读取 weapp-tailwindcss 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/weapp-tailwindcss/raw/index.md（查看排版版本）