tailwindcss 如何在 uniapp 中使用

直接使用https://tailwindcss.com/docs/guides/vite这篇官方教程的写法是跑不通的，摸索以后整理了一下，最关键的是第6步

1. npm install -D tailwindcss postcss autoprefixer
2. npx tailwindcss init -p
3. 在 tailwind.config.js 中写入

export default {
  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx,vue}'],
  theme: {
    extend: {}
  },
  plugins: []
}

1
2
3
4
5
6
7
8

5. 在 App.vue 中添加

<style>
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
style>
1
2
3
4
5

6. 改写vite.config.js

import { defineConfig } from 'vite';
import tailwindcss from 'tailwindcss';
import uni from '@dcloudio/vite-plugin-uni';

// https://vitejs.dev/config/
export default defineConfig({
  css: {
    postcss: {
      plugins: [
        tailwindcss(),
      ],
    },
  },
  plugins: [
    uni(),
  ],
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

另外，如果需要兼容小程序，可以再加入 https://www.npmjs.com/package/@uni-helper/vite-plugin-uni-tailwind 这个插件，否则部分样式会出现问题