跳到主要内容

UniappCliStyle

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 "dist";

在项目目录下的 App.vue 中,添加以下内容:

App.vue
<style src="./main.css"></style>
注意

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

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