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: []
}

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 这个插件，否则部分样式会出现问题