# 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): 在 `src/app.css` 中引入 `weapp-tailwindcss`，这个文件会作为 `cssEntries` 的入口：
- [UniappHbuilderStyle](https://tw.icebreaker.top/quick-start/v4/UniappHbuilderStyle.md): 在 `src/app.css` 中引入 `weapp-tailwindcss`，这个文件会作为 `cssEntries` 的入口：
- [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): Tailwind CSS 4 重新定义了“原子化”样式的组织方式：配置文件换成了 `CSS`，主题变量与自定义工具也变成了原生语法。这一变化对小程序生态同样生效，`weapp-tailwindcss` 已经适配了新的编译流程。本篇入门指南帮助你在 30 分钟内从零搭好一套 `tailwindc...
- [进阶篇：用 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)
- [接口: TailwindcssPatchOptions](https://tw.icebreaker.top/api/interfaces/TailwindcssPatchOptions.md): 定义于: node\_modules/.pnpm/tailwindcss-patch@8.4.3\_magicast@0.5.1\_tailwindcss@4.1.18/node\_modules/tailwindcss-patch/dist/index.d.ts:114
- [接口: UserDefinedOptions](https://tw.icebreaker.top/api/interfaces/UserDefinedOptions.md): 定义于: [packages/weapp-tailwindcss/src/typedoc.export.ts:15](https://github.com/sonofmagic/weapp-tailwindcss/blob/3f74f29bbba2815e37d9171fddec7566d76...
- [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/index.md): 本页面为使用 AI 快速构建小程序的专题，希望能够帮助大家不断的提升自己的开发效率
- [LLM 友好文档 (llms.txt)](https://tw.icebreaker.top/ai/llms.md): 1. 在仓库根目录执行 `pnpm --filter @weapp-tailwindcss/website build`（或 `cd website && pnpm build`）。
- [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、性能与代码评审清单
- [各样式方案 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): 去重、变体工厂与从设计到产物的闭环
- [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` 的兼容性。本文带你了解这些变化的原理与使用方法。