和 Taroify 一起使用

taro 使用 Taroify 的共同注意点:

由于 Taroify 引入后，会导致 tailwindcss 的样式被覆盖，Taroify 样式的优先级会高于 tailwindcss。

解决方案

修改Taroify引入方式

按照Taroify 修改引入方式，将 taroify 引入方式改成按需引入

npm

# 安装插件
npm i babel-plugin-import

Yarn

# 安装插件
yarn add babel-plugin-import

pnpm

# 安装插件
pnpm add babel-plugin-import

Bun

# 安装插件
bun add babel-plugin-import

修改Babel配置文件，修改组件和图标样式的引入方式为手动引入

// 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 的样式，再引入Tailwindcss的样式

// src/app.tsx

import Taro from '@tarojs/taro'

import '@taroify/icons/index.scss'
import '@taroify/core/index.scss'
import './app.scss'

// ...

// src/app.scss

@use 'tailwindcss/base';
@use 'tailwindcss/components';
@use 'tailwindcss/utilities';

参见

• Taroify 官方文档