# weapp-tailwindcss 文档索引

> Tailwind CSS 小程序适配方案，覆盖 uni-app、taro、rax、mpx、原生等场景的官方文档合集。

LLM 导航说明：
- 顺序为「入门 → 配置 → API → 迁移/问题 → AI 工作流」，覆盖 webpack/vite/gulp 与各类小程序框架。
- 站点根为 https://next.tw.icebreaker.top，GitHub Pages 下为 /weapp-tailwindcss/ 前缀。
- 已剔除 MDX import 与重复标题，便于模型解析；附带保留的标题/描述 frontmatter。

## Table of Contents

- [简介](https://next.tw.icebreaker.top/docs/intro.md): 由于小程序运行时，本身有自己的一套 **独特的** 技术规范标准。这导致你无法使用 web 开发中的很多的特性，
- [小程序多主题方案](https://next.tw.icebreaker.top/docs/quick-start/apply-themes.md): 对于 web 来说，多主题色的需求是非常常见的，比如 暗黑模式 就是一个极其常见的需求，
- [构建以及引入外部组件](https://next.tw.icebreaker.top/docs/quick-start/build-or-import-outside-components.md): 我们在日常的开发中，经常会去使用和封装各种各样的组件库。有些是开源的，第三方开发的UI库，有些是我们开发人员给自己的特定的业务封装的UI库。其中很多情况其实是以流行的 开源UI库(或者fork的改版) + 自己封装的业务组件为主的
- [CSS 单位转化](https://next.tw.icebreaker.top/docs/quick-start/css-unit-transform.md): 在 rem 转 rpx (或 px) 章节，我们做了 CSS 中 rem 转化成 px / rpx 的方式。
- [Nodejs API](https://next.tw.icebreaker.top/docs/quick-start/frameworks/api.md): 有时候,我们不一定会使用 webpack/vite/gulp，可能是直接使用 nodejs 去构建应用，或者封装更高阶的工具，这时候可以使用api去转义你的应用。
- [uni-app HbuilderX 使用方式](https://next.tw.icebreaker.top/docs/quick-start/frameworks/hbuilderx.md): 注意: 在使用 hbuilderx 进行开发时，由于目录结构和启动项的不同，你必须要给你 tailwind.config.js 传入**绝对路径**:
- [mpx (原生增强)](https://next.tw.icebreaker.top/docs/quick-start/frameworks/mpx.md): 在 vue.config.js 中注册：
- [原生开发(打包方案)](https://next.tw.icebreaker.top/docs/quick-start/frameworks/native.md): 模板项目 weapp-tailwindcss-gulp-template(gulp打包)
- [Rax (react)](https://next.tw.icebreaker.top/docs/quick-start/frameworks/rax.md): 在根目录下创建一个 build.plugin.js 文件，然后在 build.json 中注册：
- [Taro (所有框架)](https://next.tw.icebreaker.top/docs/quick-start/frameworks/taro.md): 目前 Taro v4 同时支持了 Webpack 和 Vite 进行打包编译，weapp-tailwindcss 这 2 者都支持，但是配置有些许的不同
- [uni-app cli vue3 vite](https://next.tw.icebreaker.top/docs/quick-start/frameworks/uni-app-vite.md): 创建完成后，快速上手中的准备工作都完成之后，就可以便捷的注册了：
- [🔥 uni-app x](https://next.tw.icebreaker.top/docs/quick-start/frameworks/uni-app-x.md): 目前 weapp-tailwindcss 从 4.2.0 版本开始，插件已经支持 uni-app-x 同时构建包括 web,小程序, 安卓,IOS,鸿蒙 五端项目
- [uni-app cli vue2 webpack](https://next.tw.icebreaker.top/docs/quick-start/frameworks/uni-app.md): 这样所有的配置便完成了！赶紧启动你的项目试试吧！
- [tailwindcss 多上下文与独立分包](https://next.tw.icebreaker.top/docs/quick-start/independent-pkg.md): 你看过动漫《百兽王》吗？《百兽王》的主人公是五个飞行员，他们分别驾驶黑、红、青、黄、绿五头机器狮，它们平时可以单独进行作战，遇到强敌时，也能进行五狮合体，成为巨大机器人“百兽王”。
- [1. 安装与配置 tailwindcss](https://next.tw.icebreaker.top/docs/quick-start/install.md): 首先安装本插件前，我们需要把 tailwindcss 对应的环境和配置安装好。
- [IDE 智能提示设置](https://next.tw.icebreaker.top/docs/quick-start/intelliSense.md): tailwindcss-intellisense 在 v4 中必须看到 @import "tailwindcss" 才会将工作区视为 Tailwind 根文件。从 v4.7.10 起，weapp-tailwindcss 默认会在构建阶段把这些 @import 'tailwind…
- [1. 安装与配置 tailwindcss](https://next.tw.icebreaker.top/docs/quick-start/native/0.install.md): 很荣幸，我们在 weapp-tailwindcss@3.2.0 版本开始，引入了微信小程序原生支持的能力。 (其他平台的原生小程序开发，也非常容易兼容)
- [2. 安装这个插件并运行](https://next.tw.icebreaker.top/docs/quick-start/native/1.install-plugin.md): 这样 weapp-tailwindcss 和 weapp-vite 就被安装在你的本地了
- [4. rem 转 rpx (或 px)](https://next.tw.icebreaker.top/docs/quick-start/rem2rpx.md): 这是因为 tailwindcss 里面工具类的长度单位，默认都是 rem，比如:
- [2. 安装 weapp-tailwindcss](https://next.tw.icebreaker.top/docs/quick-start/this-plugin.md): 然后把下列脚本，添加进你的 package.json 的 scripts 字段里:
- [uni-app 条件编译语法糖插件](https://next.tw.icebreaker.top/docs/quick-start/uni-app-css-macro.md): 在 uni-app 里，存在一种类似宏指令的样式条件编译写法:
- [Tailwindcss 2.x](https://next.tw.icebreaker.top/docs/quick-start/v2/index.md): 目前，有些用户由于现有的项目，已经是 webpack 4, postcss 7.x 且无法往上升级，但是又想要使用 tailwindcss,
- [初始化 package.json](https://next.tw.icebreaker.top/docs/quick-start/v4/UniAppHbuilderShared.md): 现在，在你的页面里面去随意的编写样式，比如 bg-[#123456] text-[#654321], 然后运行到微信开发者工具即可
- [UniappCliStyle](https://next.tw.icebreaker.top/docs/quick-start/v4/UniappCliStyle.md): 在 src/app.css 中引入 tailwindcss，这个文件会作为 cssEntries 的入口：
- [UniappHbuilderStyle](https://next.tw.icebreaker.top/docs/quick-start/v4/UniappHbuilderStyle.md): 在 src/app.css 中引入 tailwindcss，这个文件会作为 cssEntries 的入口：
- [Mpx 生成模式](https://next.tw.icebreaker.top/docs/quick-start/v4/generator/mpx.md): 使用 weapp-tailwindcss v5 PostCSS generator 与 Webpack 插件接入 Mpx
- [Taro 生成模式](https://next.tw.icebreaker.top/docs/quick-start/v4/generator/taro.md): 使用 weapp-tailwindcss v5 生成模式接入 Taro Vite 与 Taro Webpack
- [uni-app 生成模式](https://next.tw.icebreaker.top/docs/quick-start/v4/generator/uni-app.md): 使用 weapp-tailwindcss v5 生成模式接入 uni-app Vue Vite 与 Vue2 Webpack
- [weapp-vite 生成模式](https://next.tw.icebreaker.top/docs/quick-start/v4/generator/weapp-vite.md): 使用 weapp-tailwindcss v5 生成模式接入 weapp-vite 原生小程序或 Vue SFC 小程序项目
- [Mpx](https://next.tw.icebreaker.top/docs/quick-start/v4/mpx.md): 更改 mpx.config.js 注册 weapp-tailwindcss
- [patch](https://next.tw.icebreaker.top/docs/quick-start/v4/patch.md): 然后把下列脚本，添加进你的 package.json 的 scripts 字段里:
- [开发参考手册](https://next.tw.icebreaker.top/docs/quick-start/v4/readme.md): 所以假如你要兼容更多的手机机型，请使用 tailwindcss@3.x。
- [Taro vite](https://next.tw.icebreaker.top/docs/quick-start/v4/taro-vite.md): 在项目目录下的 src/app.css 中，添加以下内容：
- [Taro webpack](https://next.tw.icebreaker.top/docs/quick-start/v4/taro-webpack.md): 在项目的配置文件 config/index 中注册:
- [高阶篇：性能、兼容与团队协作](https://next.tw.icebreaker.top/docs/quick-start/v4/tutorial/advanced.md): Tailwind CSS 4 带来了更强大的原生语法，但在小程序环境中仍需平衡兼容性与团队协作。本篇从工程化视角出发，帮助你在真实项目中稳定地落地、优化与维护。
- [入门篇：快速认识 Tailwind CSS 4 与 weapp-tailwindcss](https://next.tw.icebreaker.top/docs/quick-start/v4/tutorial/index.md): Tailwind CSS 4 重新定义了“原子化”样式的组织方式：配置文件换成了 CSS，主题变量与自定义工具也变成了原生语法。这一变化对小程序生态同样生效，weapp-tailwindcss 已经适配了新的编译流程。本篇入门指南帮助你在 30 分钟内从零搭好一套 tailwi…
- [进阶篇：用 Tailwind CSS 4 构建真实页面](https://next.tw.icebreaker.top/docs/quick-start/v4/tutorial/workflow.md): 基础环境搭建完成后，真正的挑战来自“如何把抽象的原子类应用到真实业务”。本篇精选小程序常见的页面模块，结合 tailwindcss@4 的新指令，总结出一套从设计拆解到代码落地的流程。
- [HBuilderX](https://next.tw.icebreaker.top/docs/quick-start/v4/uni-app-vite-hbuilder.md): Tailwind CSS v4 在 HBuilderX（uni-app）中的接入步骤与关键配置说明。
- [uni-app cli vue3 vite](https://next.tw.icebreaker.top/docs/quick-start/v4/uni-app-vite.md): 接着直接运行 npm run dev:mp-weixin，
- [uni-app cli vue2 webpack](https://next.tw.icebreaker.top/docs/quick-start/v4/uni-app-webpack.md): 然后直接运行到小程序，微信开发者工具导入这个项目，即可看到效果
- [uni-app x](https://next.tw.icebreaker.top/docs/quick-start/v4/uni-app-x.md): Tailwind CSS v4 在 uni-app x（HBuilderX）中的接入说明、平台支持范围与注意事项。
- [生成模式使用方式（推荐）](https://next.tw.icebreaker.top/docs/quick-start/v4/v5-generator-examples.md): 使用 weapp-tailwindcss v5 生成模式接入 uni-app、Taro、weapp-vite 与 Mpx 的入口指南
- [Weapp-vite](https://next.tw.icebreaker.top/docs/quick-start/v4/weapp-vite.md): 更改 vite.config.ts 注册 weapp-tailwindcss
- [wxs的转义与处理](https://next.tw.icebreaker.top/docs/quick-start/wxs.md): 介绍 weapp-tailwindcss 对 wxs/sjs 的转义处理能力、适用版本与相关配置项。
- [weapp-tw CLI 使用指南](https://next.tw.icebreaker.top/docs/tools/weapp-tw-cli.md): weapp-tailwindcss 自带一个 weapp-tw 命令行工具，负责提前给 Tailwind CSS 打补丁、生成类名缓存以及收集 token。以下内容介绍常用命令及最佳实践。
- [uni-app x 专题](https://next.tw.icebreaker.top/docs/uni-app-x/index.md): 面向用户的实战手册，10 分钟完成 Tailwind CSS 在 uni-app x 的跨端集成与开发。
- [快速集成](https://next.tw.icebreaker.top/docs/uni-app-x/install.md): uni-app x 快速集成指南，涵盖依赖安装、模板项目与最小可运行配置。
- [weapp-tailwindcss](https://next.tw.icebreaker.top/docs/api/index.md): weapp-tailwindcss API 文档首页，汇总配置项分组与接口索引，便于快速查阅参数定义。
- [ApplyOptions](https://next.tw.icebreaker.top/docs/api/interfaces/ApplyOptions.md): Preferred options for runtime patch behavior.
- [CacheOptions](https://next.tw.icebreaker.top/docs/api/interfaces/CacheOptions.md): Configures how the Tailwind class cache is stored and where it lives on disk.
- [DisabledOptions](https://next.tw.icebreaker.top/docs/api/interfaces/DisabledOptions.md): DisabledOptions 接口文档，包含属性说明、类型定义与使用边界。
- [ExtractOptions](https://next.tw.icebreaker.top/docs/api/interfaces/ExtractOptions.md): Preferred options for extraction output behavior.
- [TailwindCssOptions](https://next.tw.icebreaker.top/docs/api/interfaces/TailwindCssOptions.md): High-level Tailwind patch configuration shared across versions.
- [TailwindCssPatchOptions](https://next.tw.icebreaker.top/docs/api/interfaces/TailwindCssPatchOptions.md): Root configuration consumed by the Tailwind CSS patch runner.
- [TailwindV2Options](https://next.tw.icebreaker.top/docs/api/interfaces/TailwindV2Options.md): Configuration specific to Tailwind CSS v2 patching flows.
- [TailwindV3Options](https://next.tw.icebreaker.top/docs/api/interfaces/TailwindV3Options.md): Configuration specific to Tailwind CSS v3 patching flows.
- [TailwindV4Options](https://next.tw.icebreaker.top/docs/api/interfaces/TailwindV4Options.md): Additional configuration specific to Tailwind CSS v4 extraction.
- [UserDefinedOptions](https://next.tw.icebreaker.top/docs/api/interfaces/UserDefinedOptions.md): UserDefinedOptions 总览，按分组汇总 weapp-tailwindcss 的核心配置项与跳转入口。
- [⚙️ 一般配置](https://next.tw.icebreaker.top/docs/api/options/general.md): ⚙️ 一般配置文档，汇总 17 个 weapp-tailwindcss 配置项的用途、默认值与注意事项。
- [✅ 重要配置](https://next.tw.icebreaker.top/docs/api/options/important.md): ✅ 重要配置文档，汇总 17 个 weapp-tailwindcss 配置项的用途、默认值与注意事项。
- [🧭 生命周期](https://next.tw.icebreaker.top/docs/api/options/lifecycle.md): 🧭 生命周期文档，汇总 4 个 weapp-tailwindcss 配置项的用途、默认值与注意事项。
- [🧩 文件匹配](https://next.tw.icebreaker.top/docs/api/options/matchers.md): 🧩 文件匹配文档，汇总 6 个 weapp-tailwindcss 配置项的用途、默认值与注意事项。
- [🗂️ 其他接口](https://next.tw.icebreaker.top/docs/api/other-interfaces.md): 其他接口索引页，汇总 9 个 weapp-tailwindcss 运行时接口与补充类型定义。
- [Class: UnifiedWebpackPluginV5](https://next.tw.icebreaker.top/docs/api-v2/classes/UnifiedWebpackPluginV5.md): UnifiedWebpackPluginV5
- [weapp-tailwindcss-webpack-plugin](https://next.tw.icebreaker.top/docs/api-v2/index.md): Ƭ **AppType**: "uni-app" \| "uni-app-vite" \| "taro" \| "remax" \| "rax" \| "native" \| "kbone" \| "mpx"
- [Interface: IArbitraryValues](https://next.tw.icebreaker.top/docs/api-v2/interfaces/IArbitraryValues.md): • Optional **allowDoubleQuotes**: boolean
- [Interface: IBaseWebpackPlugin](https://next.tw.icebreaker.top/docs/api-v2/interfaces/IBaseWebpackPlugin.md): • Optional **appType**: AppType
- [Interface: ICommonReplaceOptions](https://next.tw.icebreaker.top/docs/api-v2/interfaces/ICommonReplaceOptions.md): ↳ ITemplateHandlerOptions
- [Interface: ILengthUnitsPatchDangerousOptions](https://next.tw.icebreaker.top/docs/api-v2/interfaces/ILengthUnitsPatchDangerousOptions.md): • Optional **destPath**: string
- [Interface: ILengthUnitsPatchOptions](https://next.tw.icebreaker.top/docs/api-v2/interfaces/ILengthUnitsPatchOptions.md): • Optional **basedir**: string
- [Interface: IPropValue](https://next.tw.icebreaker.top/docs/api-v2/interfaces/IPropValue.md): • **prop**: string
- [Interface: ITemplateHandlerOptions](https://next.tw.icebreaker.top/docs/api-v2/interfaces/ITemplateHandlerOptions.md): ↳ **ITemplateHandlerOptions**
- [Interface: InternalCssSelectorReplacerOptions](https://next.tw.icebreaker.top/docs/api-v2/interfaces/InternalCssSelectorReplacerOptions.md): • Optional **escapeMap**: Record
- [Interface: InternalPatchResult](https://next.tw.icebreaker.top/docs/api-v2/interfaces/InternalPatchResult.md): InternalPatchResult
- [Interface: RawSource](https://next.tw.icebreaker.top/docs/api-v2/interfaces/RawSource.md): • **end**: number
- [Interface: UserDefinedOptions](https://next.tw.icebreaker.top/docs/api-v2/interfaces/UserDefinedOptions.md): • Optional **appType**: AppType
- [使用 arbitrary values](https://next.tw.icebreaker.top/docs/options/arbitrary-values.md): arbitrary values 是 tailwindcss v3 的重要更新内容，幸运的是你使用了本插件。
- [js 中的精确转化与忽略](https://next.tw.icebreaker.top/docs/options/comments.md): 默认对所有 jsx、js、wxml、wxss 中出现的 tailwindcss 运行时工具类进行转化，如果不需要转化可以使用 weappTwIgnore 标识符来进行忽略:
- [weapp-tailwindcss 导出总览](https://next.tw.icebreaker.top/docs/options/exports.md): weapp-tailwindcss 同时提供 ESM 与 CommonJS 入口，并内置多个二级导出以适配 webpack、Vite、Gulp、Tailwind 宏等不同组合。下面按用途分类进行说明。
- [选项概览](https://next.tw.icebreaker.top/docs/options/options.md): weapp-tailwindcss 可用配置概览
- [`weapp-tailwindcss/reset`](https://next.tw.icebreaker.top/docs/options/reset.md): weapp-tailwindcss/reset 提供可组合的 reset 插件，支持 preset、内置组件 reset 与自定义扩展。
- [从 v1 迁移到 v2](https://next.tw.icebreaker.top/docs/migrations/v1.md): 在 2.x 版本中，可以把之前使用的 webpack 插件，全部更换为 UnifiedWebpackPluginV5 插件，不过 vite 插件的导出有一些小变化:
- [从 v2 迁移到 v3](https://next.tw.icebreaker.top/docs/migrations/v2.md): v3 版本相比于 v2, 主要是删去一些过时的功能，配置项，同时会改变插件的默认值，使得整体插件变得更易用，更容易安装
- [从 v3 迁移到 v4](https://next.tw.icebreaker.top/docs/migrations/v3.md): tailwindcss@4 改动较大，直接变成了一个样式预处理器，和 sass / less 类似，所以你不应该让 tailwindcss@4 和 sass, less 一起使用。
- [css 中使用 @apply 警告问题](https://next.tw.icebreaker.top/docs/issues/at-apply.md): 解决在项目中使用 Tailwind CSS `@apply` 时的编辑器告警问题，并提供 VSCode 配置示例。
- [默认盒模型(box-sizing)问题](https://next.tw.icebreaker.top/docs/issues/box-sizing.md): Tailwindcss 默认会把所有的元素的盒模型，设置为 border-box
- [CSS 变量失效问题](https://next.tw.icebreaker.top/docs/issues/css-vars.md): 在使用 taro 或者 uni-app 中，可能你会遇到 CSS 变量失效问题
- [使用 doctor 命令诊断项目配置](https://next.tw.icebreaker.top/docs/issues/doctor.md): 使用 weapp-tailwindcss doctor 快速检查 Node.js、Tailwind CSS、PostCSS、框架依赖和构建器配置。
- [组件外部样式类（externalClasses）的支持](https://next.tw.icebreaker.top/docs/issues/externalClasses.md): 自定义组件使用 externalClasses 时 tailwindcss 样式拆分的问题与解决方案。
- [Tailwindcss 格式化](https://next.tw.icebreaker.top/docs/issues/format.md): 使用并在 prettier 注册 prettier-plugin-tailwindcss
- [group 和 peer 使用限制](https://next.tw.icebreaker.top/docs/issues/group-and-peer.md): 在 tailwindcss 中，我们常常会这样写:
- [常见问题](https://next.tw.icebreaker.top/docs/issues/index.md): 目前微信开发者工具会默认开启代码自动热重载 compileHotReLoad 功能，这个功能在原生开发中表现良好，但在 uni-app 和 taro 等的框架中，存在一定的问题，参见 issues#37，所以如果你遇到了此类问题，建议关闭 compileHotReLoad 功能。
- [写在 js 中的 tailwindcss 任意值失效](https://next.tw.icebreaker.top/docs/issues/js-string-invalid.md): weapp-tailwindcss 是允许你在 js 中编写任意值的，而且 weapp-tailwindcss 会自动帮你做好任意值的转译。
- [在 monorepo 中使用](https://next.tw.icebreaker.top/docs/issues/monorepo.md): 在 monorepo 由于存在 hoist 机制，可能会导致 weapp-tailwindcss 和 tailwindcss 通信受阻，这时候需要显式的去指定 tailwindcss 的路径
- [生成样式只作用于view和text标签](https://next.tw.icebreaker.top/docs/issues/more-tags.md): 在微信小程序中，darkMode 设置为 class/ selector 后，dark:className 类选择器在 button 上无效，看生成样式只作用于 view 和 text 标签
- [原生头条小程序使用 TailWindCSS](https://next.tw.icebreaker.top/docs/issues/native-toutiao.md): 创建项目 test-miniapp, 进入项目目录并初始化 package.json
- [rpx 任意值颜色或长度单位二义性与解决方案](https://next.tw.icebreaker.top/docs/issues/rpx-ambiguities.md): 在不使用 weapp-tailwindcss 的情况下，你直接写这样的 rpx 写法：
- [`Tarojs` 中使用 `terser` 压缩代码](https://next.tw.icebreaker.top/docs/issues/taro-terser.md): 在 taro webpack5 环境下，这个插件和外置额外安装的 terser-webpack-plugin 一起使用，会导致插件转义功能失效
- [H5 端原生 toast 样式偏移问题](https://next.tw.icebreaker.top/docs/issues/toast-svg-bug.md): 在使用 tailwindcss 的时候，编译到 h5 平台，使用 uni.toast / taro.toast 时，出现下列的效果
- [和 NutUI 一起使用](https://next.tw.icebreaker.top/docs/issues/use-with-nutui.md): taro 使用 NutUI 的 vue 和 react 版本的共同注意点:
- [和 Taroify 一起使用](https://next.tw.icebreaker.top/docs/issues/use-with-taroify.md): taro 使用 Taroify 的共同注意点:
- [和 wot-design-uni 一起使用](https://next.tw.icebreaker.top/docs/issues/use-with-wot-design-uni.md): 说明 weapp-tailwindcss 与 wot-design-uni 搭配时的配置要点与常见兼容问题处理方式。
- [v1 版本插件常见问题，使用最新版本插件无须参考](https://next.tw.icebreaker.top/docs/issues/v1.md): A: 因为这个插件，主要是针对, wxss,wxml 和 jsx 进行转义的，js 里编写的 string 是不转义的。如果你有这样的需求可以这么写:
- [AI 编程助手落地实施方案](https://next.tw.icebreaker.top/docs/ai/ai-coding-deployment-guide.md): 1. **合规边界**：哪些仓库/文件允许出境？是否必须审计留痕？（决定能不能用海外、能用到什么程度）
- [AI 编码助手五大方案选型指南](https://next.tw.icebreaker.top/docs/ai/ai-coding-three-solutions.md): 深度对比 Cursor IDE、GitHub Copilot、Claude Code、OpenAI Codex 和 AWS Kiro 五大 AI 编程方案的价格、额度和适用场景
- [AI 共有的不足和缺陷](https://next.tw.icebreaker.top/docs/ai/ai-limitations.md): 把模型当作不稳定的外部依赖来治理：先明确人类的职责、审批和复核流程，再让 AI 进入关键路径；留足监控、评测、韧性与人工兜底的预算，确保“人是决策者，AI 是工具”。
- [AI 编程方案选型指南](https://next.tw.icebreaker.top/docs/ai/ai-programming-plan.md): 国际与国产 AI 编程平台、IDE 和插件的能力与订阅方案对比，附预算与场景化选型建议。
- [AI Agent（智能体）](https://next.tw.icebreaker.top/docs/ai/basics/agent.md): 1. **感知** (Perceive)：获取环境信息
- [AI 沙箱（Sandbox）](https://next.tw.icebreaker.top/docs/ai/basics/ai-sandbox.md): 介绍 AI 沙箱的核心概念、风险隔离机制与实践方案，帮助在本地安全运行 AI 生成代码与命令。
- [上下文窗口（Context Window）](https://next.tw.icebreaker.top/docs/ai/basics/context-window.md): 当上下文接近窗口上限时，模型可能：
- [LLMs.txt（LLM 友好文档）](https://next.tw.icebreaker.top/docs/ai/basics/llms-txt.md): ├── components/ # 组件目录
- [MCP (Model Context Protocol)](https://next.tw.icebreaker.top/docs/ai/basics/mcp.md): MCP 是一种**客户端-服务端协议**，定义了：
- [Power（规范驱动编程）](https://next.tw.icebreaker.top/docs/ai/basics/power.md): Cursor 的 **Composer** 特性：
- [Prompt Engineering（提示词工程）](https://next.tw.icebreaker.top/docs/ai/basics/prompt-engineering.md): function SubmitForm() {
- [RAG（检索增强生成）](https://next.tw.icebreaker.top/docs/ai/basics/rag.md): 系统讲解 RAG 架构、核心流程与实现要点，帮助你构建可检索、可追溯的 AI 知识问答系统。
- [Skill 发布与版本化](https://next.tw.icebreaker.top/docs/ai/basics/skill-release.md): 本页面面向 weapp-tailwindcss Skill 维护者，说明如何做版本管理、打 tag、发 release，并保持安装指令稳定可用。
- [Skill（技能系统）](https://next.tw.icebreaker.top/docs/ai/basics/skill.md): Skill 是一组可复用的执行规则与工作流，用来让 AI 在特定任务中更稳定地输出结果。
- [Spec-Driven Development（规范驱动开发）](https://next.tw.icebreaker.top/docs/ai/basics/spec-driven-development.md): Cursor 的多步骤任务执行：
- [Token（词元）](https://next.tw.icebreaker.top/docs/ai/basics/token.md): Token 是将文本切分成的**序列片段**：
- [Vibe Coding（直觉编程）](https://next.tw.icebreaker.top/docs/ai/basics/vibe-coding.md): 即使采用 Vibe Coding，也要：
- [AI 生成小程序代码](https://next.tw.icebreaker.top/docs/ai/index.md): 本页面为使用 AI 快速构建小程序的专题，希望能够帮助大家不断的提升自己的开发效率
- [国外顶尖编程模型选型建议书](https://next.tw.icebreaker.top/docs/ai/international-ai-models-comparison.md): 经过对当前三大国外顶尖 AI 编程模型的深入分析，我们建议：
- [LLM 友好文档 (llms.txt)](https://next.tw.icebreaker.top/docs/ai/llms.md): 1. 在仓库根目录执行 pnpm --filter @weapp-tailwindcss/website build（或 cd website && pnpm build）。
- [AI 编程工具选型建议书](https://next.tw.icebreaker.top/docs/ai/qoder-vs-glm47-cursor-claude-comparison.md): 经过对当前主流 AI 编程工具和模型的深入分析，我们建议：
- [at property](https://next.tw.icebreaker.top/docs/at-property.md): 在 CSS 里，@property 是一个 **注册自定义属性（CSS Custom Properties）** 的新特性，它解决了原先 --var: value 那种“纯字符串变量”的一些缺陷。它主要提供了 **类型约束、初始值、继承控制** 等能力，让浏览器能更高效地处理这…
- [咨询与定制服务](https://next.tw.icebreaker.top/docs/community/consult.md): 国内像我这种开源，大部分都是为爱发电，除了个别朋友零星的打赏之外就再也没有人赞助了，当然打赏的钱也非常少，总的打赏金额比我一天的工资少多了。
- [加入技术交流群](https://next.tw.icebreaker.top/docs/community/group.md): 如果你在使用中遇到什么问题，也欢迎你进入交流群进行提问。
- [加载自定义字体](https://next.tw.icebreaker.top/docs/community/load-font.md): 详见: https://github.com/sonofmagic/weapp-tailwindcss/discussions/637
- [cva 与 tailwind-variants 支持](https://next.tw.icebreaker.top/docs/community/merge/cva-and-variants.md): 使用 weapp-tailwindcss runtime 系列（@weapp-tailwindcss/cva 与 @weapp-tailwindcss/variants）内置的 cva()、tv() 等工具，快速封装跨端组件。
- [集成与排障指南](https://next.tw.icebreaker.top/docs/community/merge/integration.md): 在真实项目中集成 @weapp-tailwindcss/merge 的注意事项，以及针对不同打包器的调试技巧。
- [概览](https://next.tw.icebreaker.top/community/merge.md): @weapp-tailwindcss/merge 的定位、安装方式、快速上手示例以及多端项目的常见用法。
- [运行时 API](https://next.tw.icebreaker.top/docs/community/merge/runtime-api.md): shared runtime —— @weapp-tailwindcss/runtime 以及 merge 系列在小程序里的用法。
- [@weapp-tailwindcss/cva](https://next.tw.icebreaker.top/docs/community/packages-runtime/cva.md): class-variance-authority 的小程序运行时封装，自动处理 escape 并保持类型推导。
- [packages-runtime 总览](https://next.tw.icebreaker.top/community/packages-runtime.md): runtime 系列包的版本选择、能力矩阵与多端使用心智模型。
- [@weapp-tailwindcss/merge-v3（Tailwind v3）](https://next.tw.icebreaker.top/docs/community/packages-runtime/merge-v3.md): 适配 Tailwind v3 的 tailwind-merge 运行时封装，面向旧项目与长期维护。
- [@weapp-tailwindcss/merge（Tailwind v4）](https://next.tw.icebreaker.top/docs/community/packages-runtime/merge.md): 适配 Tailwind v4 的 tailwind-merge 运行时封装，提供小程序 escape/unescape 与多端工厂能力。
- [多端 Demo：小程序 + Web](https://next.tw.icebreaker.top/docs/community/packages-runtime/multi-platform-demos.md): 基于 packages-runtime 的跨端示例：uni-app + Web、Taro + Web。
- [tailwind-variant-v3](https://next.tw.icebreaker.top/docs/community/packages-runtime/tailwind-variant-v3.md): 面向 Tailwind v3 的通用变体运行时，支持 twMergeAdapter 与 slots。
- [@weapp-tailwindcss/variants-v3](https://next.tw.icebreaker.top/docs/community/packages-runtime/variants-v3.md): 面向 Tailwind v3 的小程序变体运行时，基于 tailwind-variant-v3 与 merge-v3。
- [@weapp-tailwindcss/variants](https://next.tw.icebreaker.top/docs/community/packages-runtime/variants.md): tailwind-variants 的小程序运行时封装，提供 tv/cn/createTV 等 API。
- [适配的 `tailwindcss` 插件](https://next.tw.icebreaker.top/docs/community/plugins.md): 虽然，相当一部分 tailwindcss 插件，都可以直接在 weapp-tailwindcss 里使用了。
- [@weapp-tailwindcss/reset](https://next.tw.icebreaker.top/docs/community/reset.md): 面向 uni-app 与 Taro 的 reset 资源包，同时提供静态 CSS 资源与 Tailwind reset 插件实现。
- [🔥各个框架的模板](https://next.tw.icebreaker.top/docs/community/templates.md): 当你配置不对的时候，也可以参考参考, 其中带有 🔥 标志的为推荐使用版本
- [@weapp-tailwindcss/typography](https://next.tw.icebreaker.top/docs/community/typography.md): 小程序 @tailwindcss/typography 富文本渲染方案
- [生态以及解决方案](https://next.tw.icebreaker.top/docs/community.md): 汇总 weapp-tailwindcss 生态插件、模板与多端实践方案，包含主题、多上下文与外部组件集成指南。
- [版权信息](https://next.tw.icebreaker.top/docs/copyright.md): weapp-tailwindcss 项目版权与证书信息，包含 G-Star 认证与软件著作权证书展示。
- [技术演进](https://next.tw.icebreaker.top/docs/evolution.md): 目前 weapp-tailwindcss 使用:
- [如何贡献](https://next.tw.icebreaker.top/docs/how-to-contribute.md): 其实非常简单，你不一定需要贡献代码，你提一个 issue，回答一个问题，写一篇相关的文章，这些都是为项目做贡献，无需拘泥于具体的形式。
- [小程序 `icon` 解决方案](https://next.tw.icebreaker.top/docs/icons/index.md): 这里介绍一种在小程序里，开箱即用的 icon 解决方案：iconify
- [💨跨多端开发CSS兼容](https://next.tw.icebreaker.top/docs/multi-platform.md): 本插件主要作用于小程序环境，让开发者可以在小程序环境下可以使用 tailwindcss 的特性
- [tailwindcss in weapp 的原理](https://next.tw.icebreaker.top/docs/principle/index.md): 转眼又是一年，感觉是时候再来修订一下 tailwindcss in weapp 的原理 这篇文章了, 放心，这次我写作核心就是要让大多数人看懂！
- [Related projects](https://next.tw.icebreaker.top/docs/projects/index.md): weapp-ide-cli: 一个微信开发者工具命令行，快速方便的直接启动 ide 进行登录，开发，预览，上传代码等等功能。
- [2.x 版本新特性](https://next.tw.icebreaker.top/docs/releases/v2.md): 这个版本新增了 UnifiedWebpackPluginV5
- [优秀案例展示](https://next.tw.icebreaker.top/docs/showcase/index.md): 以下内容来自 谁在使用 weapp-tailwindcss ？，列表顺序按照提交时间排序。
- [成为 weapp-tailwindcss 的赞助商](https://next.tw.icebreaker.top/docs/sponsor.md): weapp-tailwindcss 是采用 MIT 许可的开源项目，使用完全免费。
- [AI 友好提示与 Demo 运行指南](https://next.tw.icebreaker.top/docs/tailwindcss/ai-friendly-and-demos.md): 提示模板、校验链与 React/Vue 示例运行方式
- [BEM 与 OOCSS 方法论](https://next.tw.icebreaker.top/docs/tailwindcss/bem-and-oocss.md): 传统 CSS 架构的命名规则、设计思想与示例
- [原子化 CSS 最佳实践](https://next.tw.icebreaker.top/docs/tailwindcss/best-practices.md): 设计 token、variants、性能与代码评审清单
- [CSS 的诞生与演化](https://next.tw.icebreaker.top/tailwindcss/css-origin-evolution.md): 为什么会有 CSS，它如何从字体颜色到布局体系，再到原子化与多运行时协作
- [各样式方案 Demo 与产物对照](https://next.tw.icebreaker.top/docs/tailwindcss/demos.md): 同一 UI 在 Raw CSS、Sass、CSS Modules、CSS-in-JS、Tailwind、Headless + cva/tv 下的代码与预期产物
- [组件库的演进](https://next.tw.icebreaker.top/tailwindcss/history/component-evolution.md): 从重样式 UI 套件到 Headless Primitives 与 design tokens 的解耦路线
- [CSS-in-JS 阶段](https://next.tw.icebreaker.top/tailwindcss/history/css-in-js.md): 动态样式、运行时开销与 SSR 考量
- [CSS Modules / Scoped 阶段](https://next.tw.icebreaker.top/tailwindcss/history/css-modules.md): 哈希类名与编译期 scoped（Vue/Svelte）隔离方案、复用模式与主题化挑战
- [生成式 CSS / 原生能力融合](https://next.tw.icebreaker.top/tailwindcss/history/future-generative-css.md): 展望 @layer / @container / @scope / @property 与生成式流水线
- [Token 化与 Headless 组件阶段](https://next.tw.icebreaker.top/tailwindcss/history/headless-tokens.md): 设计 token、headless primitives 与 cva/tv 的组合
- [Sass / Less 预处理阶段](https://next.tw.icebreaker.top/tailwindcss/history/preprocessors.md): 变量、混入与嵌套带来的复用与风险
- [Raw CSS / BEM / OOCSS](https://next.tw.icebreaker.top/tailwindcss/history/raw-css.md): 全局命名阶段的优劣、适用场景与常见坑
- [Utility-first / Tailwind / UnoCSS 阶段](https://next.tw.icebreaker.top/tailwindcss/history/utility-first.md): 原子化 CSS 的价值、风险与取舍
- [样式方案的演化](https://next.tw.icebreaker.top/tailwindcss/history.md): 从 Raw CSS 到 Utility-first 的迁移路径与多端适配考量
- [原子化 CSS 专题导览](https://next.tw.icebreaker.top/docs/tailwindcss/index.md): 从历史演进到 Tailwind 实战与 AI 友好工作流的技术分享索引
- [tailwind-merge、cva、tailwind-variants 精要](https://next.tw.icebreaker.top/docs/tailwindcss/merge-and-variants.md): 去重、变体工厂与从设计到产物的闭环
- [PostCSS：插件化 CSS 引擎、历史地位与生态](https://next.tw.icebreaker.top/tailwindcss/postcss.md): 回顾 PostCSS 的发展、核心机制与对现代 CSS 的贡献，并梳理常用插件与最佳实践。
- [shadcn/ui 的出现与意义](https://next.tw.icebreaker.top/docs/tailwindcss/shadcn-ui.md): 复制即用的组件模式、Radix + Tailwind + merge 架构带来的行业影响
- [样式隔离方案与原理](https://next.tw.icebreaker.top/docs/tailwindcss/style-isolation.md): 在微前端、组件库或第三方嵌入场景避免样式互相污染的可选方案与工作原理
- [Tailwind 设计理念](https://next.tw.icebreaker.top/docs/tailwindcss/tailwind-core.md): Tailwind 本质是把设计 token 压成原子类，再让组件接口重新长出语义
- [Tailwind vs UnoCSS 对比](https://next.tw.icebreaker.top/docs/tailwindcss/tailwind-vs-unocss.md): 生态、类型提示、merge 去重、运行时与迁移成本的取舍
- [v5 与官方 Tailwind 插件对照](https://next.tw.icebreaker.top/docs/tailwindcss/v5-official-plugin-parity.md): 对比 weapp-tailwindcss v5 generator 与 @tailwindcss/postcss、@tailwindcss/vite 的能力映射
- [Tailwindcss 原子类维护指南](https://next.tw.icebreaker.top/docs/tailwindcss-maintenance-book.md): 很多开发者，看到 Tailwindcss 的写法，或者初步使用它的时候，第一感觉可能就是 写是真的爽，维护火葬场。
- [旧有uni-app项目升级webpack5指南](https://next.tw.icebreaker.top/docs/upgrade/uni-app.md): 由于目前 uni-app hbuilderx和cli默认创建的 vue2 项目，还是使用的 @vue/cli-service@4
- [重新思考 weapp-tailwindcss 的未来](https://next.tw.icebreaker.top/blog/2025/11/v4.7.0-merge-runtime.md): 从编译期豁免到**运行时**自管理，weapp-tailwindcss/merge 的重构思路与未来规划。
- [4.0.0 🚀](https://next.tw.icebreaker.top/blog/2025/3/v4-release.md): weapp-tailwindcss v4.0 正式发布，核心亮点是兼容 tailwindcss@4 并引入 tailwind-merge 运行时整合能力。文章总结了升级背后的思路，并提供 uni-app 示例帮助你快速落地。
- [4.2.0 🚀](https://next.tw.icebreaker.top/blog/2025/8/v4.2-release.md): weapp-tailwindcss@4.2.x 现已适配 uni-app x 的多端构建能力，让 Tailwind CSS 原子类能够无缝跨端使用。本文梳理了从项目初始化到插件配置的完整流程，帮助你快速完成集成与发布。
- [4.3.0 🚀](https://next.tw.icebreaker.top/blog/2025/9/v4.3-release.md): weapp-tailwindcss@4.3.0 默认开启 CSS 变量计算模式，并补充了更细粒度的 cssCalc、px2rpx 等配置，显著提升了多端 rpx 与 calc 的兼容性。本文带你了解这些变化的原理与使用方法。