直接使用https://tailwindcss.com/docs/guides/vite这篇官方教程的写法是跑不通的,摸索以后整理了一下,最关键的是第6步
- npm install -D tailwindcss postcss autoprefixer
- npx tailwindcss init -p
- 在 tailwind.config.js 中写入
export default {content: ['./index.html', './src/**/*.{js,ts,jsx,tsx,vue}'],theme: {extend: {}},plugins: []
}
- 在 App.vue 中添加
<style>
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
</style>
- 改写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 这个插件,否则部分样式会出现问题