# weapp-tailwindcss 文档索引

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

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

## Table of Contents

- [简介](https://tw.icebreaker.top/intro.md): <!-- :::tip
- [小程序多主题方案](https://tw.icebreaker.top/quick-start/apply-themes.md): 对于 `web` 来说，多主题色的需求是非常常见的，比如 `暗黑模式` 就是一个极其常见的需求，
- [构建以及引入外部组件](https://tw.icebreaker.top/quick-start/build-or-import-outside-components.md): 我们在日常的开发中，经常会去使用和封装各种各样的组件库。有些是开源的，第三方开发的UI库，有些是我们开发人员给自己的特定的业务封装的UI库。其中很多情况其实是以流行的 `开源UI库(或者fork的改版)` + `自己封装的业务组件为主的`
- [CSS 单位转化](https://tw.icebreaker.top/quick-start/css-unit-transform.md): 在 [rem 转 rpx (或 px)](/docs/quick-start/rem2rpx) 章节，我们做了 `CSS` 中 `rem` 转化成 `px` / `rpx` 的方式。
- [Nodejs API](https://tw.icebreaker.top/quick-start/frameworks/api.md): > 版本 2.11.0+ , 此为高阶 `api`，使用起来有难度，不适合新手，假如你不清楚你在做什么，请使用 `webpack/vite/gulp` 插件
- [uni-app HbuilderX 使用方式](https://tw.icebreaker.top/quick-start/frameworks/hbuilderx.md): > 配置会稍微复杂一些，这里推荐直接使用或者参考模板: [uni-app-vue3-tailwind-hbuilder-template](https://github.com/sonofmagic/uni-app-vue3-tailwind-hbuilder-template) 或者 [若依...
- [mpx (原生增强)](https://tw.icebreaker.top/quick-start/frameworks/mpx.md): import ExternalClassesReminder from '@site/fragments/ExternalClassesReminder.mdx'
- [原生开发(打包方案)](https://tw.icebreaker.top/quick-start/frameworks/native.md): :::warning
- [Rax (react)](https://tw.icebreaker.top/quick-start/frameworks/rax.md): 在根目录下创建一个 `build.plugin.js` 文件，然后在 `build.json` 中注册：
- [Taro (所有框架)](https://tw.icebreaker.top/quick-start/frameworks/taro.md): 目前 Taro v4 同时支持了 `Webpack` 和 `Vite` 进行打包编译，`weapp-tailwindcss` 这 `2` 者都支持，但是配置有些许的不同
- [uni-app cli vue3 vite](https://tw.icebreaker.top/quick-start/frameworks/uni-app-vite.md): :::warning
- [🔥 uni-app x](https://tw.icebreaker.top/quick-start/frameworks/uni-app-x.md): 目前 `weapp-tailwindcss` 从 `4.2.0` 版本开始，插件已经支持 `uni-app-x` 同时构建包括 `web`,`小程序`, `安卓`,`IOS`,`鸿蒙` 五端项目
- [uni-app cli vue2 webpack](https://tw.icebreaker.top/quick-start/frameworks/uni-app.md): import ExternalClassesReminder from '@site/fragments/ExternalClassesReminder.mdx'
- [tailwindcss 多上下文与独立分包](https://tw.icebreaker.top/quick-start/independent-pkg.md): 你看过动漫《百兽王》吗？《百兽王》的主人公是五个飞行员，他们分别驾驶黑、红、青、黄、绿五头机器狮，它们平时可以单独进行作战，遇到强敌时，也能进行五狮合体，成为巨大机器人“百兽王”。
- [1. 安装与配置 tailwindcss](https://tw.icebreaker.top/quick-start/install.md): > 请确保你的 `nodejs` 版本 `^18.17.0 || >=20.5.0`。目前低于 `18` 的长期维护版本(`偶数版本`) 都已经结束了生命周期，建议安装 `nodejs` 的 `LTS` 版本，详见 [nodejs/release](https://github.com/nod...
- [IDE 智能提示设置](https://tw.icebreaker.top/quick-start/intelliSense.md): > 首先，确保你已经安装 [`Tailwind CSS IntelliSense 插件`](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss)
- [1. 安装与配置 tailwindcss](https://tw.icebreaker.top/quick-start/native/0.install.md): 很荣幸，我们在 `weapp-tailwindcss@3.2.0` 版本开始，引入了微信小程序原生支持的能力。 (其他平台的原生小程序开发，也非常容易兼容)
- [2. 安装这个插件并运行](https://tw.icebreaker.top/quick-start/native/1.install-plugin.md): 在项目目录下，执行:
- [4. rem 转 rpx (或 px)](https://tw.icebreaker.top/quick-start/rem2rpx.md): > 此为可选步骤，根据你自己的需求进行配置。通常此配置的值，是由你拿到的设计稿尺寸决定的。
- [2. 安装 weapp-tailwindcss](https://tw.icebreaker.top/quick-start/this-plugin.md): 在项目目录下，执行:
- [uni-app 条件编译语法糖插件](https://tw.icebreaker.top/quick-start/uni-app-css-macro.md): > 版本需求 2.10.0+
- [Tailwindcss 2.x](https://tw.icebreaker.top/quick-start/v2/index.md): 目前，有些用户由于现有的项目，已经是 `webpack 4`, `postcss 7.x` 且无法往上升级，但是又想要使用 `tailwindcss`,
- [初始化 package.json](https://tw.icebreaker.top/quick-start/v4/UniAppHbuilderShared.md): import Patch from './patch.mdx'
- [UniappCliStyle](https://tw.icebreaker.top/quick-start/v4/UniappCliStyle.md): import CssImportReminder from '@site/src/components/CssImportReminder'
- [UniappHbuilderStyle](https://tw.icebreaker.top/quick-start/v4/UniappHbuilderStyle.md): import CssImportReminder from '@site/src/components/CssImportReminder'
- [Mpx](https://tw.icebreaker.top/quick-start/v4/mpx.md): import Patch from './patch.mdx'
- [Patch](https://tw.icebreaker.top/quick-start/v4/patch.md): 然后把下列脚本，添加进你的 `package.json` 的 `scripts` 字段里:
- [开发参考手册](https://tw.icebreaker.top/quick-start/v4/readme.md): :::warning
- [Taro vite](https://tw.icebreaker.top/quick-start/v4/taro-vite.md): import Patch from './patch.mdx'
- [Taro webpack](https://tw.icebreaker.top/quick-start/v4/taro-webpack.md): import Patch from './patch.mdx'
- [高阶篇：性能、兼容与团队协作](https://tw.icebreaker.top/quick-start/v4/tutorial/advanced.md): Tailwind CSS 4 带来了更强大的原生语法，但在小程序环境中仍需平衡兼容性与团队协作。本篇从工程化视角出发，帮助你在真实项目中稳定地落地、优化与维护。
- [入门篇：快速认识 Tailwind CSS 4 与 weapp-tailwindcss](https://tw.icebreaker.top/quick-start/v4/tutorial/index.md): import CssImportReminder from '@site/src/components/CssImportReminder';
- [进阶篇：用 Tailwind CSS 4 构建真实页面](https://tw.icebreaker.top/quick-start/v4/tutorial/workflow.md): 基础环境搭建完成后，真正的挑战来自“如何把抽象的原子类应用到真实业务”。本篇精选小程序常见的页面模块，结合 `tailwindcss@4` 的新指令，总结出一套从设计拆解到代码落地的流程。
- [HBuilderX](https://tw.icebreaker.top/quick-start/v4/uni-app-vite-hbuilder.md): import UniAppHbuilderShared from './UniAppHbuilderShared.mdx'
- [uni-app cli vue3 vite](https://tw.icebreaker.top/quick-start/v4/uni-app-vite.md): import Patch from './patch.mdx'
- [uni-app cli vue2 webpack](https://tw.icebreaker.top/quick-start/v4/uni-app-webpack.md): import Patch from './patch.mdx'
- [uni-app x](https://tw.icebreaker.top/quick-start/v4/uni-app-x.md): import UniAppHbuilderShared from './UniAppHbuilderShared.mdx'
- [Weapp-vite](https://tw.icebreaker.top/quick-start/v4/weapp-vite.md): import Patch from './patch.mdx'
- [wxs的转义与处理](https://tw.icebreaker.top/quick-start/wxs.md): :::info
- [weapp-tw CLI 使用指南](https://tw.icebreaker.top/tools/weapp-tw-cli.md): `weapp-tailwindcss` 自带一个 `weapp-tw` 命令行工具，负责提前给 Tailwind CSS 打补丁、生成类名缓存以及收集 token。以下内容介绍常用命令及最佳实践。
- [uni-app x 专题](https://tw.icebreaker.top/uni-app-x/index.md): 面向用户的实战手册，10 分钟完成 Tailwind CSS 在 uni-app x 的跨端集成与开发。
- [快速集成](https://tw.icebreaker.top/uni-app-x/install.md): 立即上手而不纠结配置细节，点击下面链接即可：
- [weapp-tailwindcss](https://tw.icebreaker.top/api/index.md): - [TailwindcssPatchOptions](interfaces/TailwindcssPatchOptions.md)
- [接口: DisabledOptions](https://tw.icebreaker.top/api/interfaces/DisabledOptions.md): 定义于: [packages/weapp-tailwindcss/src/typedoc/disabled-options.ts:9](https://github.com/sonofmagic/weapp-tailwindcss/blob/d186ff25d32b56a9da338a224e...
- [接口: TailwindcssPatchOptions](https://tw.icebreaker.top/api/interfaces/TailwindcssPatchOptions.md): 定义于: node\_modules/.pnpm/tailwindcss-patch@8.6.1\_magicast@0.5.1\_tailwindcss@4.1.18/node\_modules/tailwindcss-patch/dist/index.d.ts:117
- [接口: UserDefinedOptions](https://tw.icebreaker.top/api/interfaces/UserDefinedOptions.md): 定义于: [packages/weapp-tailwindcss/src/typedoc.export.ts:6](https://github.com/sonofmagic/weapp-tailwindcss/blob/d186ff25d32b56a9da338a224eff638cc273...
- [Class: UnifiedWebpackPluginV5](https://tw.icebreaker.top/api-v2/classes/UnifiedWebpackPluginV5.md): **`Name`**
- [weapp-tailwindcss-webpack-plugin](https://tw.icebreaker.top/api-v2/index.md): - [UnifiedWebpackPluginV5](classes/UnifiedWebpackPluginV5.md)
- [Interface: IArbitraryValues](https://tw.icebreaker.top/api-v2/interfaces/IArbitraryValues.md): • `Optional` **allowDoubleQuotes**: `boolean`
- [Interface: IBaseWebpackPlugin](https://tw.icebreaker.top/api-v2/interfaces/IBaseWebpackPlugin.md): - [`UnifiedWebpackPluginV5`](../classes/UnifiedWebpackPluginV5.md)
- [Interface: ICommonReplaceOptions](https://tw.icebreaker.top/api-v2/interfaces/ICommonReplaceOptions.md): - **`ICommonReplaceOptions`**
- [Interface: ILengthUnitsPatchDangerousOptions](https://tw.icebreaker.top/api-v2/interfaces/ILengthUnitsPatchDangerousOptions.md): • `Optional` **destPath**: `string`
- [Interface: ILengthUnitsPatchOptions](https://tw.icebreaker.top/api-v2/interfaces/ILengthUnitsPatchOptions.md): **`Deprecated`**
- [Interface: IPropValue](https://tw.icebreaker.top/api-v2/interfaces/IPropValue.md): • **prop**: `string`
- [Interface: ITemplateHandlerOptions](https://tw.icebreaker.top/api-v2/interfaces/ITemplateHandlerOptions.md): - [`ICommonReplaceOptions`](ICommonReplaceOptions.md)
- [Interface: InternalCssSelectorReplacerOptions](https://tw.icebreaker.top/api-v2/interfaces/InternalCssSelectorReplacerOptions.md): • `Optional` **escapeMap**: `Record`<`string`, `string`\>
- [Interface: InternalPatchResult](https://tw.icebreaker.top/api-v2/interfaces/InternalPatchResult.md): **`Description`**
- [Interface: RawSource](https://tw.icebreaker.top/api-v2/interfaces/RawSource.md): • **end**: `number`
- [Interface: UserDefinedOptions](https://tw.icebreaker.top/api-v2/interfaces/UserDefinedOptions.md): • `Optional` **appType**: [`AppType`](../#apptype)
- [使用 arbitrary values](https://tw.icebreaker.top/options/arbitrary-values.md): `arbitrary values` 是 `tailwindcss v3` 的重要更新内容，幸运的是你使用了本插件。
- [js 中的精确转化与忽略](https://tw.icebreaker.top/options/comments.md): 默认对所有 `jsx`、`js`、`wxml`、`wxss` 中出现的 `tailwindcss` 运行时工具类进行转化，如果不需要转化可以使用 `weappTwIgnore` 标识符来进行忽略:
- [weapp-tailwindcss 导出总览](https://tw.icebreaker.top/options/exports.md): > 本文根据 `packages/weapp-tailwindcss/package.json` 的 `exports` 字段整理，帮助你在不同框架/构建场景中快速定位合适的入口文件。
- [Index](https://tw.icebreaker.top/options/index.md): id: options/index
- [`weapp-tailwindcss/reset`](https://tw.icebreaker.top/options/reset.md): `weapp-tailwindcss/reset` 内置了一组常用组件的 reset 规则，默认会：
- [从 v1 迁移到 v2](https://tw.icebreaker.top/migrations/v1.md): 在 `2.x` 版本中，可以把之前使用的 `webpack` 插件，全部更换为 `UnifiedWebpackPluginV5` 插件，不过 `vite` 插件的导出有一些小变化:
- [从 v2 迁移到 v3](https://tw.icebreaker.top/migrations/v2.md): v3 版本相比于 v2, 主要是删去一些过时的功能，配置项，同时会改变插件的默认值，使得整体插件变得更易用，更容易安装
- [从 v3 迁移到 v4](https://tw.icebreaker.top/migrations/v3.md): <!-- :::warning -->
- [css 中使用 @apply 警告问题](https://tw.icebreaker.top/issues/at-apply.md): 我们以 `vscode` 为例
- [默认盒模型(box-sizing)问题](https://tw.icebreaker.top/issues/box-sizing.md): `Tailwindcss` 默认会把所有的元素的盒模型，设置为 `border-box`
- [CSS 变量失效问题](https://tw.icebreaker.top/issues/css-vars.md): 在使用 `taro` 或者 `uni-app` 中，可能你会遇到 `CSS` 变量失效问题
- [组件外部样式类（externalClasses）的支持](https://tw.icebreaker.top/issues/externalClasses.md): 自定义组件使用 externalClasses 时 tailwindcss 样式拆分的问题与解决方案。
- [Tailwindcss 格式化](https://tw.icebreaker.top/issues/format.md): > 这是官方提供的包，
- [group 和 peer 使用限制](https://tw.icebreaker.top/issues/group-and-peer.md): 在 `tailwindcss` 中，我们常常会这样写:
- [常见问题](https://tw.icebreaker.top/issues/index.md): :::info 组件外部样式类必读
- [写在 js 中的 tailwindcss 任意值失效](https://tw.icebreaker.top/issues/js-string-invalid.md): `weapp-tailwindcss` 是允许你在 `js` 中编写任意值的，而且 `weapp-tailwindcss` 会自动帮你做好任意值的转译。
- [在 monorepo 中使用](https://tw.icebreaker.top/issues/monorepo.md): 在 `monorepo` 由于存在 `hoist` 机制，可能会导致 `weapp-tailwindcss` 和 `tailwindcss` 通信受阻，这时候需要显式的去指定 `tailwindcss` 的路径
- [生成样式只作用于view和text标签](https://tw.icebreaker.top/issues/more-tags.md): 在微信小程序中，`darkMode` 设置为 `class`/ `selector` 后，`dark:className` 类选择器在 `button` 上无效，看生成样式只作用于 `view` 和 `text` 标签
- [原生头条小程序使用 TailWindCSS](https://tw.icebreaker.top/issues/native-toutiao.md): > 以下内容由使用 `weapp-tailwindcss` 的热心网友提供，十分感谢！
- [rpx 任意值颜色或长度单位二义性与解决方案](https://tw.icebreaker.top/issues/rpx-ambiguities.md): 在不使用 `weapp-tailwindcss` 的情况下，你直接写这样的 `rpx` 写法：
- [`Tarojs` 中使用 `terser` 压缩代码](https://tw.icebreaker.top/issues/taro-terser.md): 在 `taro` `webpack5` 环境下，这个插件和外置额外安装的 `terser-webpack-plugin` 一起使用，会导致插件转义功能失效
- [H5 端原生 toast 样式偏移问题](https://tw.icebreaker.top/issues/toast-svg-bug.md): 在使用 `tailwindcss` 的时候，编译到 `h5` 平台，使用 `uni.toast` / `taro.toast` 时，出现下列的效果
- [和 NutUI 一起使用](https://tw.icebreaker.top/issues/use-with-nutui.md): `taro` 使用 [NutUI](https://nutui.jd.com) 的 `vue` 和 `react` 版本的共同注意点:
- [和 Taroify 一起使用](https://tw.icebreaker.top/issues/use-with-taroify.md): `taro` 使用 [Taroify](https://taroify.github.io/taroify.com/) 的共同注意点:
- [和 wot-design-uni 一起使用](https://tw.icebreaker.top/issues/use-with-wot-design-uni.md): 和 wot-design-uni 一起使用
- [v1 版本插件常见问题，使用最新版本插件无须参考](https://tw.icebreaker.top/issues/v1.md): 详见 [issue#28](https://github.com/sonofmagic/weapp-tailwindcss-webpack-plugin/issues/28)
- [AI 编程助手落地实施方案](https://tw.icebreaker.top/ai/ai-coding-deployment-guide.md): > 你会得到：一套“能拍板、能试点、能复制”的落地方法（可治理、可控成本、可降级、可回滚）。\
- [AI 编码助手五大方案选型指南](https://tw.icebreaker.top/ai/ai-coding-three-solutions.md): 深度对比 Cursor IDE、GitHub Copilot、Claude Code、OpenAI Codex 和 AWS Kiro 五大 AI 编程方案的价格、额度和适用场景
- [AI 共有的不足和缺陷](https://tw.icebreaker.top/ai/ai-limitations.md): - 训练数据不可追溯：来源不透明，更新不可再现，难以审计和监管（例：医疗对话数据混入论坛内容，错误建议无法追责）。
- [AI 编程方案选型指南](https://tw.icebreaker.top/ai/ai-programming-plan.md): 国际与国产 AI 编程平台、IDE 和插件的能力与订阅方案对比，附预算与场景化选型建议。
- [AI Agent（智能体）](https://tw.icebreaker.top/ai/basics/agent.md): **AI Agent（人工智能智能体）** 是一个能够**自主感知环境、做出决策并执行行动**的 AI 系统。与传统的聊天式 AI 不同，Agent 可以：
- [AI 沙箱（Sandbox）](https://tw.icebreaker.top/ai/basics/ai-sandbox.md): **AI 沙箱** 是一个**隔离的执行环境**，用于安全地运行 AI 生成的代码、执行命令或进行实验。沙箱确保 AI 操作不会影响宿主系统，同时提供可控的测试环境。
- [上下文窗口（Context Window）](https://tw.icebreaker.top/ai/basics/context-window.md): **上下文窗口 (Context Window)** 是大语言模型在单次对话中**能够记忆和处理的最大 Token 数量**。它决定了模型能"看到"和"理解"多少信息。
- [LLMs.txt（LLM 友好文档）](https://tw.icebreaker.top/ai/basics/llms-txt.md): **llms.txt** 是一个项目根目录下的文本文件，用于为**大语言模型（LLM）提供项目上下文**。它类似于 `README.md`，但专门为 AI 工具（如 Claude Code、Cursor、Cline）设计，帮助 AI 更好地理解和操作代码库。
- [MCP (Model Context Protocol)](https://tw.icebreaker.top/ai/basics/mcp.md): **MCP (Model Context Protocol)** 是一个开放协议，用于连接 AI 助手与系统上下文（数据源、工具、环境）。它由 Anthropic 于 2024 年 11 月发布，旨在解决 AI 应用与外部系统集成的标准化问题。
- [Power（规范驱动编程）](https://tw.icebreaker.top/ai/basics/power.md): **Power** 是由 **Kiro** 提出的一个概念，用于衡量 **AI 工具理解复杂规范并生成符合规范代码的能力**。在 Spec-Driven Development（规范驱动开发）的语境下，Power 指的是 AI 将非结构化的需求描述转换为结构化的技术规范，并最终生成可执行代码的能力。
- [Prompt Engineering（提示词工程）](https://tw.icebreaker.top/ai/basics/prompt-engineering.md): **Prompt（提示词）** 是用户输入给大语言模型的**指令或问题**。**Prompt Engineering（提示词工程）** 是设计和优化提示词以获得更好输出结果的技术。
- [RAG（检索增强生成）](https://tw.icebreaker.top/ai/basics/rag.md): **RAG (Retrieval-Augmented Generation)** 是一种结合了**信息检索（Retrieval）**和**生成式AI（Generation）**的技术架构。它让大语言模型在生成回答时，能够先从外部知识库中检索相关信息，然后基于检索到的内容生成更准确、更及时的回答。
- [Skill（技能系统）](https://tw.icebreaker.top/ai/basics/skill.md): **Skill** 是 Claude Code CLI 的**插件/技能系统**，允许开发者扩展 AI 助手的能力。每个 Skill 是一个独立的 npm 包，可以添加特定的功能、工作流或集成。
- [Spec-Driven Development（规范驱动开发）](https://tw.icebreaker.top/ai/basics/spec-driven-development.md): **Spec-Driven Development (SDD)** 或 **Spec-Driven Coding** 是一种**以规范（Specification）为先导**的软件开发方法论。开发者先编写详细的需求规范，然后由 AI 根据规范自动生成代码。
- [Token（词元）](https://tw.icebreaker.top/ai/basics/token.md): **Token** 是大语言模型（LLM）处理文本的**基本单位**。不同于人类理解的"单词"或"字符"，Token 是模型内部使用的最小语义单元。
- [Vibe Coding（直觉编程）](https://tw.icebreaker.top/ai/basics/vibe-coding.md): **Vibe Coding**（直觉编程、感觉编程）是一种**依赖直觉、经验和即时反馈**的编程方式。开发者不严格遵循规范或计划，而是根据"感觉"来编写和调整代码。
- [AI 生成小程序代码](https://tw.icebreaker.top/ai/index.md): 本页面为使用 AI 快速构建小程序的专题，希望能够帮助大家不断的提升自己的开发效率
- [国外顶尖编程模型选型建议书](https://tw.icebreaker.top/ai/international-ai-models-comparison.md): > **核心结论**：在三大国外顶尖模型中，**Claude Opus 4.5** 在代码质量上保持领先，**GPT-5.2** 在数学推理上最强，**Gemini 3 Pro** 在多模态和长上下文场景表现突出。
- [LLM 友好文档 (llms.txt)](https://tw.icebreaker.top/ai/llms.md): 1. 在仓库根目录执行 `pnpm --filter @weapp-tailwindcss/website build`（或 `cd website && pnpm build`）。
- [AI 编程工具选型建议书](https://tw.icebreaker.top/ai/qoder-vs-glm47-cursor-claude-comparison.md): > **核心结论**：推荐以 **GLM-4.7** 为核心模型，配合 **Claude Code CLI** 构建 AI 工程化能力。
- [At Property](https://tw.icebreaker.top/at-property.md): 在 CSS 里，`@property` 是一个 **注册自定义属性（CSS Custom Properties）** 的新特性，它解决了原先 `--var: value` 那种“纯字符串变量”的一些缺陷。它主要提供了 **类型约束、初始值、继承控制** 等能力，让浏览器能更高效地处理这些变量，...
- [咨询与定制服务](https://tw.icebreaker.top/community/consult.md): 国内像我这种开源，大部分都是为爱发电，除了个别朋友零星的打赏之外就再也没有人赞助了，当然打赏的钱也非常少，总的打赏金额比我一天的工资少多了。
- [加入技术交流群](https://tw.icebreaker.top/community/group.md): 如果你在使用中遇到什么问题，也欢迎你进入交流群进行提问。
- [加载自定义字体](https://tw.icebreaker.top/community/load-font.md): 详见: https://github.com/sonofmagic/weapp-tailwindcss/discussions/637
- [cva 与 tailwind-variants 支持](https://tw.icebreaker.top/community/merge/cva-and-variants.md): 使用 weapp-tailwindcss runtime 系列（@weapp-tailwindcss/cva 与 @weapp-tailwindcss/variants）内置的 cva()、tv() 等工具，快速封装跨端组件。
- [集成与排障指南](https://tw.icebreaker.top/community/merge/integration.md): 在真实项目中集成 @weapp-tailwindcss/merge 的注意事项，以及针对不同打包器的调试技巧。
- [概览](https://tw.icebreaker.top/community/merge/overview.md): @weapp-tailwindcss/merge 的定位、安装方式、快速上手示例以及多端项目的常见用法。
- [运行时 API](https://tw.icebreaker.top/community/merge/runtime-api.md): shared runtime —— @weapp-tailwindcss/runtime 以及 merge 系列在小程序里的用法。
- [适配的 `tailwindcss` 插件](https://tw.icebreaker.top/community/plugins.md): 虽然，相当一部分 `tailwindcss` 插件，都可以直接在 `weapp-tailwindcss` 里使用了。
- [🔥各个框架的模板](https://tw.icebreaker.top/community/templates.md): import TemplateLink from '@site/src/components/TemplateLink'
- [@weapp-tailwindcss/typography](https://tw.icebreaker.top/community/typography.md): 小程序 `@tailwindcss/typography` 富文本渲染方案
- [生态以及解决方案](https://tw.icebreaker.top/community.md): <!-- ### [咨询与定制服务](./community/consult) -->
- [版权信息](https://tw.icebreaker.top/copyright.md): <div class="text-center">
- [技术演进](https://tw.icebreaker.top/evolution.md): 目前 `weapp-tailwindcss` 使用:
- [如何贡献](https://tw.icebreaker.top/how-to-contribute.md): > 推荐阅读 [如何为开源做贡献?](https://opensource.guide/zh-hans/how-to-contribute/)
- [小程序 `icon` 解决方案](https://tw.icebreaker.top/icons/index.md): 这里介绍一种在小程序里，开箱即用的 icon 解决方案：[`iconify`](https://iconify.design/)
- [💨跨多端开发CSS兼容](https://tw.icebreaker.top/multi-platform.md): 本插件主要作用于小程序环境，让开发者可以在小程序环境下可以使用 `tailwindcss` 的特性
- [tailwindcss in weapp 的原理](https://tw.icebreaker.top/principle/index.md): 转眼又是一年，感觉是时候再来修订一下 `tailwindcss in weapp 的原理` 这篇文章了, 放心，这次我写作核心就是要让大多数人看懂！
- [Related projects](https://tw.icebreaker.top/projects/index.md): [weapp-ide-cli](https://github.com/sonofmagic/utils/tree/main/packages/weapp-ide-cli): 一个微信开发者工具命令行，快速方便的直接启动 ide 进行登录，开发，预览，上传代码等等功能。
- [2.x 版本新特性](https://tw.icebreaker.top/releases/v2.md): 这个版本新增了 `UnifiedWebpackPluginV5`
- [优秀案例展示](https://tw.icebreaker.top/showcase/index.md): <!-- ⚠️ 该文件由 scripts/update-showcase.ts 自动生成。请运行 `pnpm showcase:update` 以刷新数据。 -->
- [成为 weapp-tailwindcss 的赞助商](https://tw.icebreaker.top/sponsor.md): `weapp-tailwindcss` 是采用 `MIT` 许可的开源项目，使用完全免费。
- [AI 友好提示与 Demo 运行指南](https://tw.icebreaker.top/tailwindcss/ai-friendly-and-demos.md): 提示模板、校验链与 React/Vue 示例运行方式
- [BEM 与 OOCSS 方法论](https://tw.icebreaker.top/tailwindcss/bem-and-oocss.md): 传统 CSS 架构的命名规则、设计思想与示例
- [原子化 CSS 最佳实践](https://tw.icebreaker.top/tailwindcss/best-practices.md): 设计 token、variants、性能与代码评审清单
- [CSS 的诞生与演化](https://tw.icebreaker.top/tailwindcss/css-origin-evolution.md): 为什么会有 CSS，它如何从字体颜色到布局体系，再到原子化与多运行时协作
- [各样式方案 Demo 与产物对照](https://tw.icebreaker.top/tailwindcss/demos.md): 同一 UI 在 Raw CSS、Sass、CSS Modules、CSS-in-JS、Tailwind、Headless + cva/tv 下的代码与预期产物
- [组件库的演进](https://tw.icebreaker.top/tailwindcss/history/history-component-evolution.md): 从重样式 UI 套件到 Headless Primitives 与 design tokens 的解耦路线
- [CSS-in-JS 阶段](https://tw.icebreaker.top/tailwindcss/history/history-css-in-js.md): 动态样式、运行时开销与 SSR 考量
- [CSS Modules / Scoped 阶段](https://tw.icebreaker.top/tailwindcss/history/history-css-modules.md): 哈希类名与编译期 scoped（Vue/Svelte）隔离方案、复用模式与主题化挑战
- [生成式 CSS / 原生能力融合](https://tw.icebreaker.top/tailwindcss/history/history-future-generative-css.md): 展望 @layer / @container / @scope / @property 与生成式流水线
- [Token 化与 Headless 组件阶段](https://tw.icebreaker.top/tailwindcss/history/history-headless-tokens.md): 设计 token、headless primitives 与 cva/tv 的组合
- [Sass / Less 预处理阶段](https://tw.icebreaker.top/tailwindcss/history/history-preprocessors.md): 变量、混入与嵌套带来的复用与风险
- [Raw CSS / BEM / OOCSS](https://tw.icebreaker.top/tailwindcss/history/history-raw-css.md): 全局命名阶段的优劣、适用场景与常见坑
- [Utility-first / Tailwind / UnoCSS 阶段](https://tw.icebreaker.top/tailwindcss/history/history-utility-first.md): 原子化 CSS 的价值、风险与取舍
- [样式方案的演化](https://tw.icebreaker.top/tailwindcss/history/index.md): 从 Raw CSS 到 Utility-first 的迁移路径与多端适配考量
- [原子化 CSS 专题导览](https://tw.icebreaker.top/tailwindcss/index.md): 从历史演进到 Tailwind 实战与 AI 友好工作流的技术分享索引
- [tailwind-merge、cva、tailwind-variants 精要](https://tw.icebreaker.top/tailwindcss/merge-and-variants.md): 去重、变体工厂与从设计到产物的闭环
- [PostCSS：插件化 CSS 引擎、历史地位与生态](https://tw.icebreaker.top/tailwindcss/postcss.md): 回顾 PostCSS 的发展、核心机制与对现代 CSS 的贡献，并梳理常用插件与最佳实践。
- [shadcn/ui 的出现与意义](https://tw.icebreaker.top/tailwindcss/shadcn-ui.md): 复制即用的组件模式、Radix + Tailwind + merge 架构带来的行业影响
- [样式隔离方案与原理](https://tw.icebreaker.top/tailwindcss/style-isolation.md): 在微前端、组件库或第三方嵌入场景避免样式互相污染的可选方案与工作原理
- [Tailwind 设计理念](https://tw.icebreaker.top/tailwindcss/tailwind-core.md): Tailwind 本质是把设计 token 压成原子类，再让组件接口重新长出语义
- [Tailwind vs UnoCSS 对比](https://tw.icebreaker.top/tailwindcss/tailwind-vs-unocss.md): 生态、类型提示、merge 去重、运行时与迁移成本的取舍
- [Tailwindcss 原子类维护指南](https://tw.icebreaker.top/tailwindcss-maintenance-book.md): 很多开发者，看到 `Tailwindcss` 的写法，或者初步使用它的时候，第一感觉可能就是 `写是真的爽，维护火葬场`。
- [旧有uni-app项目升级webpack5指南](https://tw.icebreaker.top/upgrade/uni-app.md): :::caution
- [重新思考 weapp-tailwindcss 的未来](https://tw.icebreaker.top/blog/2025/11/v4.7.0-merge-runtime.md): 从编译期豁免到**运行时**自管理，weapp-tailwindcss/merge 的重构思路与未来规划。
- [4.0.0 🚀](https://tw.icebreaker.top/blog/2025/3/v4-release.md): weapp-tailwindcss v4.0 正式发布，核心亮点是兼容 `tailwindcss@4` 并引入 `tailwind-merge` 运行时整合能力。文章总结了升级背后的思路，并提供 uni-app 示例帮助你快速落地。
- [4.2.0 🚀](https://tw.icebreaker.top/blog/2025/8/v4.2-release.md): weapp-tailwindcss@4.2.x 现已适配 `uni-app x` 的多端构建能力，让 Tailwind CSS 原子类能够无缝跨端使用。本文梳理了从项目初始化到插件配置的完整流程，帮助你快速完成集成与发布。
- [4.3.0 🚀](https://tw.icebreaker.top/blog/2025/9/v4.3-release.md): weapp-tailwindcss@4.3.0 默认开启 CSS 变量计算模式，并补充了更细粒度的 `cssCalc`、`px2rpx` 等配置，显著提升了多端 `rpx` 与 `calc` 的兼容性。本文带你了解这些变化的原理与使用方法。