uni-app 使用 tailwindcss

我是通过vue-cli创建的项目，HBuilderX没有试过，这里介绍使用vue-cli创建的项目，可查看官方文档。这里有两种配置方式（重置主题和重命名类），目的都是考虑兼容性，您可根据实际情况处理。

vue create -p dcloudio/uni-preset-vue my-project

1️⃣ 重置主题

安装依赖

npm install tailwindcss@npm:@tailwindcss/postcss7-compat -D

配置 tailwindcss

在项目根目录创建tailwind.config.js文件，用于配置tailwindcss。

// tailwind.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

在根目录的postcss.config.js中的plugins属性添加引入。注意要放在@dcloudio/vue-cli-plugin-uni/packages/postcss之前，非小程序端才能将rpx转换。

// postcss.config.js
const path = require('path')
module.exports = {
  parser: require('postcss-comment'),
  plugins: [
    require('postcss-import')({
      resolve(id) {
        if (id.startsWith('~@/')) {
          return path.resolve(process.env.UNI_INPUT_DIR, id.substr(3))
        } else if (id.startsWith('@/')) {
          return path.resolve(process.env.UNI_INPUT_DIR, id.substr(2))
        } else if (id.startsWith('/') && !id.startsWith('//')) {
          return path.resolve(process.env.UNI_INPUT_DIR, id.substr(1))
        }
        return id
      }
    }),
    require('tailwindcss'),
    require('autoprefixer')({
      remove: process.env.UNI_PLATFORM !== 'h5'
    }),
    require('@dcloudio/vue-cli-plugin-uni/packages/postcss')
  ]
}

2️⃣ 重命名类

这里和重置主题配置不同是，不重置默认的配置，而是将配置中类名带.和/替换其他兼容字符。

安装依赖

npm install tailwindcss@npm:@tailwindcss/postcss7-compat postcss-class-rename -D

配置 tailwindcss

// tailwind.config.js
module.exports = {
  purge: ['./public/index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
  darkMode: false,
  separator: '__', // 兼容小程序，将 : 替换成 __
  theme: {
    extend: {}
  },
  variants: {},
  plugins: [],
  corePlugins: {
    // 兼容小程序，将带有 * 选择器的插件禁用
    preflight: false,
    space: false,
    divideColor: false,
    divideOpacity: false,
    divideStyle: false,
    divideWidth: false
  }
}

配置 postcss

// postcss.config.js
const path = require('path')
module.exports = {
  parser: require('postcss-comment'),
  plugins: [
    require('postcss-import')({
      resolve(id) {
        if (id.startsWith('~@/')) {
          return path.resolve(process.env.UNI_INPUT_DIR, id.substr(3))
        } else if (id.startsWith('@/')) {
          return path.resolve(process.env.UNI_INPUT_DIR, id.substr(2))
        } else if (id.startsWith('/') && !id.startsWith('//')) {
          return path.resolve(process.env.UNI_INPUT_DIR, id.substr(1))
        }
        return id
      }
    }),
    require('tailwindcss'),
    require('postcss-class-rename')({
      '\\\\.': '_' // 兼容小程序，将类名带 .和/ 替换成 _
    }),
    require('autoprefixer')({
      remove: process.env.UNI_PLATFORM !== 'h5'
    }),
    require('@dcloudio/vue-cli-plugin-uni/packages/postcss')
  ]
}

⚠️ 引入 tailwindcss

配置完成后我们引入tailwindcss，注意不要在main.js中引入，因为 APP 端无效，需要在App.vue中引入。

<style>
@import url('tailwindcss/tailwind.css');
</style>

✔️ 轻量化

极端下我们需要对工程体积做到控制，做到尽量的轻。这里的做法是禁用所有功能，并清除默认主题和变体。当有需要某项功能时再开启对应项以及添加对应的主题。

// tailwind.config.js
const resolveConfig = require('tailwindcss/resolveConfig')

const config = resolveConfig({
  purge: ['./public/index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
  darkMode: false,
  separator: '__', // 兼容小程序，将 : 替换成 __
  corePlugins: [] // 在这里添加所需功能，以及在执行清除下方添加对应的主题
})

// 清除默认主题和变体
Object.keys(config.theme).forEach(key => (config.theme[key] = {}))
Object.keys(config.variants).forEach(key => (config.variants[key] = []))

module.exports = config

本文链接：