docs: improve install and add who is using

website/docs/quick-start/install.md

@@ -23,7 +23,7 @@ npx tailwindcss init
 
 ## 2. 在项目目录下创建 `postcss.config.js` 并注册 `tailwindcss`
 
-> 注意：这只是比较普遍的注册方式，各个框架很有可能是不同的! 比如 `uni-app vue3 vite` 项目就必须要内联注册 postcss! 详见下方的注意事项
+> 注意：这只是比较普遍的注册方式，各个框架很有可能是不同的! 比如 `uni-app vue3 vite` 项目就必须要内联注册 `postcss` 选项! 详见下方的注意事项
 
 ```js
 // postcss.config.js
@@ -37,7 +37,7 @@ module.exports = {
 }
 ```
 
-:::tip
+:::tip 注意事项
 `uni-app vite vue3` 项目，必须在`vite.config.ts` 文件中，使用 `postcss` 内联的写法注册插件。相关写法可以参考我的这个模板项目: [uni-app-vite-vue3-tailwind-vscode-template](https://github.com/sonofmagic/uni-app-vite-vue3-tailwind-vscode-template)。
 
 而 `uni-app vue webpack5` 项目中的 `postcss.config.js`，在默认情况下，已经预置很多插件在里面，配置比较繁杂，可以参考这个文件 [uni-app-webpack5/postcss.config.js](https://github.com/sonofmagic/weapp-tailwindcss-webpack-plugin/blob/main/demo/uni-app-webpack5/postcss.config.js)
@@ -62,10 +62,6 @@ module.exports = {
 }
 ```
 
-:::tip
-这块可以参考[tailwindcss官方配置项link](https://tailwindcss.com/docs/configuration)
-:::
-
 ## 4. 引入 `tailwindcss`
 
 在你的项目入口引入 `tailwindcss` 使它在小程序全局生效
@@ -98,4 +94,8 @@ module.exports = {
 
 然后在 `app.ts` 里引入这个样式文件即可。
 
-这样 `tailwindcss` 的安装与配置就完成了，接下来让我们进入第二个环节：配置 `rem` 单位转化。
+这样 `tailwindcss` 的安装与配置就完成了，接下来让我们进入第二个环节：安装 `weapp-tailwindcss`。
+
+## Refers
+
+[tailwindcss官方配置项link](https://tailwindcss.com/docs/configuration)

website/docs/quick-start/rem2rpx.md

@@ -1,8 +1,6 @@
-# 2. rem 转 rpx (或 px)
+# 4. rem 转 rpx (或 px)
 
-前面我们安装配置好了 `tailwindcss`，接下来一步便是配置 `rem` 转 `rpx`
-
-## 为什么要配置这一步呢？
+## 为什么要配置 rem 转 rpx 呢？
 
 这是因为 `tailwindcss` 里面工具类的长度单位，默认都是 `rem`，比如:
 
@@ -16,7 +14,7 @@
 /*......*/
 ```
 
-`rem`这个单位在 `h5` 环境下自适应良好，但小程序环境下，我们大部分情况都是使用 `rpx` 这个单位来进行自适应，所以就需要把默认的 `rem` 单位转化成 `rpx`。
+`rem`这个单位在 `h5` 环境下自适应良好，但小程序环境下，我们大部分都是使用 `rpx` 这个 `wxss` 单位来进行自适应，所以就需要把默认的 `rem` 单位转化成 `rpx`。
 
 ## 三种转化方式(根据你的需求选其一即可)
 
@@ -105,7 +103,7 @@ module.exports = {
 
 ## 外置 tailwindcss 插件
 
-你想缩小一下范围，只把 `tailwindcss` 生成的工具类的单位，从 `rem` 转变为 `rpx`，那么 `tailwindcss preset`: [tailwindcss-rem2px-preset](https://www.npmjs.com/package/tailwindcss-rem2px-preset) 适合你。
+你想缩小一下范围，只把 `tailwindcss` 生成的工具类的单位，从 `rem` 转变为 `rpx`，那么我写的 `tailwindcss preset`: [tailwindcss-rem2px-preset](https://www.npmjs.com/package/tailwindcss-rem2px-preset) 适合你。
 
 同样我们安装它：
 

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

@@ -1,4 +1,4 @@
-# 3. 安装这个插件
+# 2. 安装这个插件
 
 在项目目录下，执行:
 
@@ -9,8 +9,6 @@ npm i -D weapp-tailwindcss
 npx weapp-tw patch
 ```
 
-> 执行 `weapp-tw patch` 主要是做2件事情，一个是给当前你本地的 `tailwindcss` 打上支持 `rpx` 的补丁，另外一个是用来暴露 tailwindcss 运行上下文
-
 然后把下列脚本，添加进你的 `package.json` 的 `scripts` 字段里:
 
 ```json
@@ -19,6 +17,12 @@ npx weapp-tw patch
  }
 ```
 
-添加这段的用途是，每次安装包后，都会自动执行一遍 `weapp-tw patch` 这个脚本。
+:::tip
+执行 `weapp-tw patch` 主要是做2件事情，一个是给当前你本地的 `tailwindcss` 打上支持 `rpx` 的补丁，另外一个是用来暴露 `tailwindcss` 运行上下文给 `webpack`/`vite`/`glup` 插件。
+
+而添加上面一段 `npm scripts` 的用途是，利用 `npm hook`, 每次安装包后，都会自动执行一遍 `weapp-tw patch` 这个脚本。
+
+这样即使 `tailwindcss` 更新了版本导致了补丁失效，也会在重新下载后，第一时间被打上。
+:::
 
-我们已经完成了这些步骤了，最后就是注册这个插件，到各个不同的框架里去，最后一步，马上就好！
+我们已经完成了这些步骤了，最后就是注册这个插件，到各个不同的框架里去，马上就好！

website/sidebars.js

@@ -17,16 +17,36 @@ const sidebars = {
   tutorialSidebar: [
     'intro',
     {
-      items: ['install', 'rem2rpx', 'this-plugin'].map((x) => 'quick-start/' + x),
-      label: '快速上手',
       type: 'category',
+      label: '快速开始',
+      items: [
+        {
+          type: 'doc',
+          id: 'quick-start/install'
+        },
+
+        {
+          type: 'doc',
+          id: 'quick-start/this-plugin'
+        },
+        {
+          items: ['uni-app', 'uni-app-vite', 'taro', 'rax', 'mpx', 'native', 'hbuilderx', 'api'].map((x) => 'quick-start/frameworks/' + x),
+          label: '3.各个框架的注册方式',
+          type: 'category',
+          collapsed: false
+        },
+        {
+          type: 'doc',
+          id: 'quick-start/rem2rpx'
+        }
+      ],
       collapsed: false
     },
+
     {
-      items: ['uni-app', 'uni-app-vite', 'taro', 'rax', 'mpx', 'native', 'hbuilderx', 'api'].map((x) => 'quick-start/frameworks/' + x),
-      label: '各个框架的注册方式',
-      type: 'category',
-      collapsed: false
+      type: 'link',
+      href: 'https://github.com/sonofmagic/weapp-tailwindcss/issues/270',
+      label: '谁在使用？'
     },
     {
       type: 'doc',

website/src/pages/index.tsx

@@ -29,11 +29,14 @@ function HomepageHeader() {
             <span className="text-[#07c160]">小程序</span> 使用 <span className="text-sky-500">tailwindcss</span> 全方面解决方案
           </h3>
           {/* <p>{siteConfig.title}</p> */}
-          <div>
+          <div className="mb-4">
             <Link className="button button--secondary button--lg " to="/docs/intro">
               立刻开始使用!
             </Link>
           </div>
+          <a href="https://github.com/sonofmagic/weapp-tailwindcss/issues/270" target="_blank" rel="nofollow">
+            谁在使用？
+          </a>
         </div>
 
         <div className="flex flex-col md:flex-row space-y-8 md:space-y-0 justify-around mt-8">