tailwindcss 如何在 uniapp 中使用

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

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

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

5. 在 App.vue 中添加

<style>
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
style>

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(),
  ],
});

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