docs: update

Author: sonofmagic

website/docs/issues/rpx-ambiguities.md

@@ -12,25 +12,35 @@
 
 ```css
 .text-\[32rpx\] {
-  color: 32rpx
+  color: 32rpx;
 }
 ```
 
 为什么 `rpx` 这个好端端的长度单位，会变成颜色呢？
 
 原因在于 `rpx` 不是一个标准的 `W3C` 规定的 `CSS` 长度单位，这是微信小程序自己定的 `WXSS` 单位。
 
-而 `tailwindcss` 在针对具有**二义性**的任意值写法，例如以下单位:
+## 什么是 **二义性**?
+
+`tailwindcss` 中有些原子类具有 **二义性**，比如:
 
 - `text-[]`
 - `border-[]`
 - `bg-[]`
 - `outline-[]`
 - `ring-[]`
 
-这些会去校验**括号**内的任意值，是否为有效的 `CSS` 长度单位写法！
+其中 `text-[]` 中的 `text-[16.16px]` 生成的 css 是 `font-size: 16.16px;`, 而 `text-[#123456]` 生成的 css 是 `color: #123456;`;
+
+这就是原子类的 **二义性**
+
+---
 
-如果为 `true`，则生成出长度 `css` 节点，反之则生成出颜色 `css` 节点:
+而 `tailwindcss` 在针对具有**二义性**的任意值写法:
+
+这些会去**校验括号**内的任意值，是否为有效的 `CSS` 长度单位！
+
+如果为 `true`，则生成出长度单位的 `css` 节点，反之则生成出颜色单位的 `css` 节点:
 
 ```css
 /* text-[16px] */
@@ -44,25 +54,35 @@
 }
 ```
 
-那么问题来了，`rpx` 在单位校验的时候，由于不认识这个单位，导致单位无效所有被分到了颜色组，所以造成了这个问题！那么如何解决呢？
+那么问题来了，`rpx` 在单位校验的时候，由于不认识这个单位，导致单位无效所有被分到了颜色组。
+
+```css
+/* text-[32rpx] */
+.text-\[32rpx\] {
+    --tw-text-opacity: 1;
+    color: 32rpx;
+}
+```
+
+所以造成了这个问题！那么如何解决呢？
 
-## 目前插件的 hack 方案
+## 目前插件的解决方案
 
 目前，我做了一个解决方案，我在 `weapp-tailwindcss` 植入了一个逻辑，使得插件可以通过分析 `tailwindcss` 运行时代码，来打上支持 `rpx` 单位的补丁，使得 `tailwindcss` 支持这样的写法，生成出长度单位的 `css`。
 
 这也是为什么要让大家去执行 `weapp-tw patch` 的原因。
 
-这个解决方案直到最新的 `3.3.3` 版本，都是有效的。
+这个解决方案，最新的 `3.x` 和 `4.x` 版本，都是有效的。
 
-然而，以后 `tailwindcss` 将会使用由 `rust` 编写的新引擎。
+<!-- 然而，以后 `tailwindcss` 将会使用由 `rust` 编写的新引擎。
 
 这时候这种 `hack` 方式将会失效，毕竟那种情况下都是二进制文件了！
 
-那么为了预防这种可能出现的危机，我们应该怎么做呢？
+那么为了预防这种可能出现的危机，我们应该怎么做呢？ -->
 
-## 解决方案
+## 强制CSS单位的解决方案
 
-我们可以在使用这些带有**二义性**的单位的时候，通过 `length` 或 `color` 这种的前缀来指定它应该是什么，例如：
+我们可以在使用这些带有**二义性**的单位的时候，可以通过 `length` 或 `color` 这种的前缀来指定它应该是什么，例如：
 
 ```html
 <div class="text-[22rpx]">...</div>

website/docs/quick-start/frameworks/uni-app-x.mdx

@@ -1,6 +1,6 @@
-# uni-app-x
+# 🔥 uni-app x
 
-目前 `weapp-tailwindcss` 从 `4.2.0` 版本开始，插件已经支持 `uni-app-x` 同时构建包括 `web`, `小程序`, `原生` 三端项目
+目前 `weapp-tailwindcss` 从 `4.2.0` 版本开始，插件已经支持 `uni-app-x` 同时构建包括 `web`,`小程序`, `安卓`,`IOS`,`鸿蒙` 五端项目
 
 ## 创建工具类
 
@@ -74,7 +74,8 @@ module.exports = {
 
 ```
 
-## 现成模板
+## 现成模板可以直接使用或者参考
 
 https://github.com/icebreaker-template/uni-app-x-hbuilderx
 
+使用方式详见项目中的 `README.md`

website/docs/quick-start/this-plugin.mdx

@@ -1,4 +1,4 @@
-# 2. 安装这个插件
+# 2. 安装 weapp-tailwindcss
 
 在项目目录下，执行:
 
@@ -22,8 +22,19 @@ npm i -D weapp-tailwindcss
 :::info
 执行 `weapp-tw patch` 主要是做2件事情
 
-1. 给当前你本地的 `tailwindcss` 打上支持 `rpx` 的补丁 (小程序特有单位，非 `web` 标准)
-2. 用来暴露 `tailwindcss` 运行上下文给 `webpack`/`vite`/`glup` 插件。
+### 1. 给当前你本地的 `tailwindcss` 打上支持 `rpx` 的补丁 (小程序特有单位，非 `web` 标准)。
+
+否则你一旦使用像 `text-[14.43rpx]` 这样的任意值写法，生成出来的 `css` 样式就是 `color: 14.43rpx;`，显然是错误的。
+
+它会被 `tailwindcss` 认为是一种颜色，从而导致生成错误，样式不生效。
+
+详见 [rpx 任意值颜色或长度单位二义性与解决方案](/docs/issues/rpx-ambiguities)
+
+### 2. 暴露 `tailwindcss` 运行上下文给 `webpack`/`vite`/`glup` 插件。
+
+这样就能够在 `js` 中，和 `postcss` 插件进行通信，从而达到共享上下文的效果。
+
+---
 
 而添加上面一段 `npm scripts` 的用途是，利用 `npm hook`, 每次安装包后，都会自动执行一遍 `weapp-tw patch` 这个脚本。
 

website/docs/uni-app-x/index.mdx

@@ -30,10 +30,10 @@ import TailwindcssLogo from '../../../assets/logo.png'
 
 在使用 `Hbuilderx` 创建一个 `uni-app x` 项目后，可以遵循:
 
-1. [安装与配置 tailwindcss3](/docs/quick-start/install)
-2. [安装这个插件](/docs/quick-start/this-plugin)
-3. [uni-app-x 注册这个插件](/docs/quick-start/frameworks/uni-app-x)
-4. [rem 转 rpx (或 px)](/docs/quick-start/rem2rpx)
+### 1. [安装与配置 tailwindcss3](/docs/quick-start/install)
+### 2. [安装 weapp-tailwindcss](/docs/quick-start/this-plugin)
+### 3. [uni-app-x 注册 weapp-tailwindcss](/docs/quick-start/frameworks/uni-app-x)
+### 4. [rem 转 rpx (或 px)](/docs/quick-start/rem2rpx)
 
 这套的流程，集成 `tailwindcss` 原子化样式解决方案。