UniappHbuilderStyle

在 src/app.css 中引入 tailwindcss，这个文件会作为 cssEntries 的入口：

src/app.css

@import "tailwindcss";

关于 @import 'tailwindcss'

默认情况下，weapp-tailwindcss 的 rewriteCssImports 选项会自动将@import 'tailwindcss' 改写为 @import 'weapp-tailwindcss/index.css'。

这意味着你可以直接在项目中使用官方文档的写法 @import 'tailwindcss'，以获得更好的 IDE 智能提示 支持。

如果遇到报错或样式不生效，请手动改为 @import 'weapp-tailwindcss/index.css'， 或将rewriteCssImports 设置为false。

为了 IDE 智能提示，再额外创建一个 main.css 并引入 tailwindcss/css。

src/main.css

@import "tailwindcss/css";
@source not "unpackage";

在项目目录下的 App.vue / App.uvue(uni-app x 项目) 然后添加以下内容：

App.vue

<style src="./main.css"></style>

添加 @source not "unpackage"; 是为了避免 HBuilderX 差量编译死循环问题

注意

千万不要在 uni.scss 中去引入 tailwindcss, uni.scss 本质上走的是 scss.additionalData, 它会在每一个 scss 文件的开头，都去添加 uni.scss 里的文件内容

所以这相当于你每个 scss/ vue 文件里面，都加了 tailwindcss 引入，那 css 体积就爆炸了