diff --git a/website/docs/quick-start/install.md b/website/docs/quick-start/install.md index a23e05b26..7db8e26b6 100644 --- a/website/docs/quick-start/install.md +++ b/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) diff --git a/website/docs/quick-start/rem2rpx.md b/website/docs/quick-start/rem2rpx.md index f3af44d3b..66c2ff088 100644 --- a/website/docs/quick-start/rem2rpx.md +++ b/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) 适合你。 同样我们安装它: diff --git a/website/docs/quick-start/this-plugin.md b/website/docs/quick-start/this-plugin.md index d3d4178cf..f55e8fca6 100644 --- a/website/docs/quick-start/this-plugin.md +++ b/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` 更新了版本导致了补丁失效,也会在重新下载后,第一时间被打上。 +::: -我们已经完成了这些步骤了,最后就是注册这个插件,到各个不同的框架里去,最后一步,马上就好! +我们已经完成了这些步骤了,最后就是注册这个插件,到各个不同的框架里去,马上就好! diff --git a/website/sidebars.js b/website/sidebars.js index 82c2b9155..37c57d7a0 100644 --- a/website/sidebars.js +++ b/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', diff --git a/website/src/pages/index.tsx b/website/src/pages/index.tsx index 94aa0c33f..57376f302 100644 --- a/website/src/pages/index.tsx +++ b/website/src/pages/index.tsx @@ -29,11 +29,14 @@ function HomepageHeader() { 小程序 使用 tailwindcss 全方面解决方案 {/*
{siteConfig.title}
*/} -