diff --git a/website/README.md b/website/README.md index fa66c5844..73a41c6f3 100644 --- a/website/README.md +++ b/website/README.md @@ -2,4 +2,25 @@ docusaurus + tailwindcss +## 启动项目 + +```bash +# 安装依赖 +pnpm install + +# 启动项目 +pnpm dev +``` + +## 报错解决 + +Module not found: Error: Can't resolve '@weapp-tailwindcss/merge' in '/Users/zzy/Projects/weapp-tailwindcss/website/src/theme/ReactLiveScope' + +```bash +# 本地编译,cd 到根目录下 + +pnpm build + +``` + diff --git a/website/docs/issues/use-with-taroify.md b/website/docs/issues/use-with-taroify.md new file mode 100644 index 000000000..086a557f4 --- /dev/null +++ b/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的样式 + +```tsx +// 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/) diff --git a/website/docs/quick-start/install.mdx b/website/docs/quick-start/install.mdx index 3733a03cb..3ce784476 100644 --- a/website/docs/quick-start/install.mdx +++ b/website/docs/quick-start/install.mdx @@ -97,6 +97,11 @@ module.exports = { // @tailwind base; // @tailwind components; // @tailwind utilities; + +// sass 版本1.25+ +// @use 'tailwindcss/base'; +// @use 'tailwindcss/components'; +// @use 'tailwindcss/utilities'; ``` 然后在 `app.ts` 里引入这个样式文件即可。 diff --git a/website/routes.json b/website/routes.json index 07a6937f9..75bac84c3 100644 --- a/website/routes.json +++ b/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", diff --git a/website/sidebars.ts b/website/sidebars.ts index b8e49aacf..a9a788a5c 100644 --- a/website/sidebars.ts +++ b/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',