uni-app 使用 tailwindcss 兼容小程序

在小程序中常规的方式安装taiwindcss会在小程序中报错，所以需要用兼容的写法安装。这里介绍使用vue-cli创建的uniapp项目，按我的步骤操作就好。

安装依赖

npm install tailwindcss@npm:@tailwindcss/postcss7-compat postcss-class-rename -D
npm install tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

初始化配置文件

npx tailwindcss-cli@latest init

这步会生成tailwindcss.config文件，如果没有生成，也可以自己手动在根目录创建

修改tailwindcss.config.js文件

module.exports = {
  purge: ['./public/index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
  darkMode: false,
  separator: '__', // 兼容小程序，将 : 替换成 __
  theme: {
    // 兼容小程序，将默认配置里带 .和/ 清除
    // 如果有些属性你没有用到，请在 corePlugins 里禁用
    extend: {},
    fontSize: {},
    height: {},
    inset: {},
    screens: {},
    spacing: {},
    translate: {},
    width: {}
  },
  variants: {},
  plugins: [],
  corePlugins: {
    // 兼容小程序，将带有 * 选择器的插件禁用
    preflight: false,
    space: false,
    divideColor: false,
    divideOpacity: false,
    divideStyle: false,
    divideWidth: false
  }
}

修改postcss.config.js文件

主要是修改plugins部分，加入以下代码，加在require(‘@dcloudio/vue-cli-plugin-uni/packages/postcss’)这行之前

require('tailwindcss')({ config: "./tailwind.config.js" }),
// 使用postcss-class-name 包将小程序不支持的类名写法转换为支持的类名，如："hover:xxx"
require('postcss-class-rename')({
  "\\\\:": "--",
  "\\\\/": "--",
  "\\\\.": "--",
  ".:": "--",
  "\\\*": "--"
}),

修改tsconfig.json文件

和compilerOptions字段同级，修改这个paths，如果已经存在，这步跳过

"paths": {
  "@/*": ["./src/*"]
}

引入taiwindcss

• 在src 目录新建 style 文件夹并创建tailwind.css文件，并写入

@tailwind base;
@tailwind components;
@tailwind utilities;

• 在src 目录下的main.js里面引用

import '@/style/tailwind.css'

• 在src 目录下的App.vue里面引用

@import 'tailwindcss/tailwind.css';

在项目中使用

试试在src/pages目录下任意页面使用，能看到背景颜色出现，说明安装引入成功，可能mb-10会不生效，原因是taiwindcss使用rem，小程序使用rpx单位，需要做兼容处理¹。

<view class="bg-red-100 mb-10">taiwindcss</view>

依赖说明

需要安装以下依赖才可以，如果缺少哪个，就自己单独安装，比如缺了postcss-loader，那就npm i postcss-loader -D

"@tailwindcss/postcss7-compat": "^2.2.17",
"autoprefixer": "^9.8.8",
"postcss": "^7.0.39",
"postcss-class-rename": "^1.0.1",
"postcss-comment": "^2.0.0",
"postcss-loader": "^7.0.2",
"postcss-remove-selectors": "^2.0.1",
"tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.17"

---

1. 也可以跳过本教程安装，直接使用现有插件 mini-program-tailwind ↩︎