uniapp完美将组件库和tailwindcss融合，再也不用为修改组件库样式烦恼，写样式效率飞起

最近在开发一款小程序，使用uniapp（vue3）cli的架构，组件库尝试使用了uni-ui和vue3版本的uView，发现两款组件库都很不好用，要么写法蹩脚，要么调样式困难。于是有了换组件库重构的想法。

通过在网上一顿搜罗，终于找到了一套完美的组合——tailwindcss + wot-design uni。

配置完毕后，代码就变成了这样的 图片长2.5rem 宽2.5rem 圆角1.25rem，编译后1rem=16px=32rpx（默认)

tailwindcss是一个原子类css库，用过的都说好

wot-design uni是一个比较新的vue3+ts写的组件库，几乎每个组件都提供了custom-.*属性，可以很方便的修改内部样式

小程序使用tailwindcss，需要插件辅助，用于剔除小程序不支持的一些语法，我选用的weapp-tailwindcss

搭建步骤：

1. 初始化一个基于vue3 cli的架子（Hbuilder项目参考weapp-tailwindcss官网）。

2. 初始化tailwindcss

pnpm i -D tailwindcss postcss autoprefixer

# 初始化 tailwind.config.js 文件
npx tailwindcss init

//tailwind.config.js配置

export default {
  // 不在 content 包括的文件内，你编写的 class，是不会生成对应的css工具类的
  content: ['./public/index.html', './src/**/*.{html,js,ts,jsx,tsx,vue}'],
  // 其他配置项
  // ...
  corePlugins: {
    // 小程序不需要 preflight，因为这主要是给 h5 的，如果你要同时开发小程序和 h5 端，你应该使用环境变量来控制它
    preflight: false,
  }
}

//App.vue文件引入相关配置

<style>
@tailwind base;
@tailwind components;
@tailwind utilities;
</style>

3. 安装兼容小程序的插件

pnpm i -D weapp-tailwindcss

 在package.json中添加以下命令

"scripts": {
   "postinstall": "weapp-tw patch"
 }

//在vite.config.js 注册插件，并将rem转成rpx

import { UnifiedViteWeappTailwindcssPlugin as uvwt } from 'weapp-tailwindcss/vite'

export default defineConfig({
  ......
 plugins: [ uvwt({
      rem2rpx: true, //rem转rpx
    }) ]

})

4. 配置postcss相关插件

//vite.config.js

import tailwindcss from 'tailwindcss'
import autoprefixer from 'autoprefixer'
export default defineConfig({

  css: {
    postcss: {
      plugins: [
        tailwindcss,
        autoprefixer
      ],
    },
  },
})

5.  wot-design uni默认单位是px，所以还需将px转rpx的插件， 此插件在编译时会将px转成rpx，但会忽略大写形式 如Px

pnpm i -D postcss-pxtransform

 //vite.config.js

import pp from 'postcss-pxtransform'

export default defineConfig({
...
  css: {
    postcss: {
      plugins: [
        ...

        //px 转 rpx
        pp({
          platform: 'weapp',
          designWidth: 375,  //根据实际情况调整
          deviceRatio: {
            640: 2.34 / 2,
            // 此时应用到的规则，代表 1px = 1rpx
            750: 1,
            828: 1.81 / 2,
            // 假如你把 designWidth 设置成 375 则使用这条规则 1px = 2rpx
            375: 2 / 1,
          },
        }),
      ],
    },
  },
})

6. 安装tailwindcss代码提示vscode插件 —— Tailwind CSS IntelliSense

做以下设置，以custom-开头的属性都有代码提示

7. 安装组件库

pnpm add wot-design-uni

// pages.json 配置自动导入组件
{
	"easycom": {
		"autoscan": true,
		"custom": {
		  "^wd-(.*)": "wot-design-uni/components/wd-$1/wd-$1.vue"
		}
	},
	
	// 此为本身已有的内容
	"pages": [
		// ......
	]
}

8. 这时候在组件的custom-class写tailwindcss的工具类是不生效的，还需配置

//tailwind.config.js
export default {

  ...

  important: true,

}

9. 完毕