chore: add use with taroify

Author: zzy-33

website/README.md

@@ -4,7 +4,7 @@ docusaurus + tailwindcss
 
 ## 启动项目
 
-```cmd
+```bash
 # 安装依赖
 pnpm install
 
@@ -16,7 +16,7 @@ pnpm dev
 
 Module not found: Error: Can't resolve '@weapp-tailwindcss/merge' in '/Users/zzy/Projects/weapp-tailwindcss/website/src/theme/ReactLiveScope'
 
-```cmd
+```bash
 # 本地编译，cd 到根目录下
 
 pnpm build

website/docs/issues/use-with-taroify.md

@@ -0,0 +1,79 @@
+# 和 Taroify 一起使用
+
+`taro` 使用 [Taroify](https://taroify.github.io/taroify.com/) 的共同注意点:
+
+由于 [Taroify](https://taroify.github.io/taroify.com/) 引入后，会导致 `tailwindcss` 的样式被覆盖，[Taroify](https://taroify.github.io/taroify.com/) 样式的优先级会高于 `tailwindcss`。
+
+## 解决方案
+
+### 修改Taroify引入方式
+
+按照[Taroify](https://taroify.github.io/taroify.com/) 修改引入方式，将 `taroify` 引入方式改成按需引入
+
+```bash
+# 安装插件
+yarn add babel-plugin-import
+```
+
+修改Babel配置文件，修改组件和图标样式的引入方式为手动引入
+
+```js
+// babel.config.js
+module.exports = {
+  plugins: [
+    [
+      'import',
+      {
+        libraryName: '@taroify/core',
+        libraryDirectory: '',
+        // 这修改为false
+        style: false,
+        // style: false,
+      },
+      '@taroify/core',
+    ],
+    [
+      'import',
+      {
+        libraryName: '@taroify/icons',
+        libraryDirectory: '',
+        camel2DashComponentName: false,
+        // 这里修改为false
+        style: false,
+        // style: () => "@taroify/icons/style",
+        customName: name => name === 'Icon' ? '@taroify/icons/van/VanIcon' : `@taroify/icons/${name}`,
+      },
+      '@taroify/icons',
+    ],
+  ],
+}
+```
+
+### 修改引入样式顺序
+
+修改根目录下的样式引入顺序，优先引入[Taroify](https://taroify.github.io/taroify.com/) 的样式，再引入Tailwindcss的样式
+
+```tsc
+// src/app.tsx
+
+import Taro from '@tarojs/taro'
+
+import '@taroify/icons/index.scss'
+import '@taroify/core/index.scss'
+import './app.scss'
+
+...
+
+```
+
+```scss
+// src/app.scss
+
+@use 'tailwindcss/base';
+@use 'tailwindcss/components';
+@use 'tailwindcss/utilities';
+```
+
+## 参见
+
+- [Taroify 官方文档](https://taroify.github.io/taroify.com/)

website/docs/quick-start/install.mdx

@@ -97,18 +97,11 @@ module.exports = {
 // @tailwind base;
 // @tailwind components;
 // @tailwind utilities;
-```
-
-#### Taro 4.x
-
-环境：Taro 4.x、Sass 1.23+
 
-Taro 4.x 默认使用 `scss` 语法，因此 `app.scss` 文件如下:
-
-```scss title="app.scss"
-@use 'tailwindcss/base' as *;
-@use 'tailwindcss/components' as *;
-@use 'tailwindcss/utilities' as *;
+// sass 版本1.25+ 
+// @use 'tailwindcss/base';
+// @use 'tailwindcss/components';
+// @use 'tailwindcss/utilities';
 ```
 
 然后在 `app.ts` 里引入这个样式文件即可。

website/routes.json

@@ -50,6 +50,7 @@
   "/docs/issues/taro-terser",
   "/docs/issues/toast-svg-bug",
   "/docs/issues/use-with-nutui",
+  "/docs/issues/use-with-taroify",
   "/docs/issues/use-with-wot-design-uni",
   "/docs/issues/v1",
   "/docs/mangle",

website/sidebars.ts

@@ -238,6 +238,10 @@ const issuesSidebar: SidebarConfig = [
     type: 'doc',
     id: 'issues/use-with-nutui',
   },
+  {
+    type: 'doc',
+    id: 'issues/use-with-taroify',
+  },
   {
     type: 'doc',
     id: 'issues/externalClasses',