UniApp引入Tailwind CSS

踩坑

可能是我的姿势不对，引入一直失败
用HBuilderX创建的VUE 3项目似乎有问题，模板还是VUE 2的写法
按照Tailwind CSS 文档导入一直不生效
最后发现需要手动创建vite.config.js并在其中引入postcss
虽然能引到Tailwind CSS，但是一直报[vite] [plugin:vite:css] Cannot read property 'config' of undefined
研究了一晚上，最终放弃

引入

使用官方的vue3模板
npx degit dcloudio/uni-preset-vue#vite my-vue3-project
可能会下载失败，可以去gitee下载
完事之后yarn install
移除vuex
直接运行会报如下warn
DeprecationWarning: Use of deprecated folder mapping "./" in the "exports" field module resolution of the package at \node_modules\vuex\package.json.
运行yarn remove vuex移除
引入Tailwind CSS
直接按照Tailwind CSS官网文档操作
先安装依赖
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
创建配置文件
npx tailwindcss init -p
然后在main.js中引入css
import "tailwindcss/tailwind.css"
官网文档到此结束
然而，并没有生效

在vite.config.js中引入
修改后如下

import { defineConfig } from 'vite'
import uni from '@dcloudio/vite-plugin-uni'
import postcssImport from "postcss-import"
import autoprefixer from 'autoprefixer'
import tailwindcss from 'tailwindcss'
// https://vitejs.dev/config/
export default defineConfig({
    plugins: [
        uni(),
    ],
    css:{
        postcss:{
            plugins:[
                postcssImport,
                autoprefixer,
                tailwindcss
            ]
        }
    }
})

至此，已能正常使用