UniappCliStyle

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

src/app.css

@import "weapp-tailwindcss/index.css";

关于 @import 'tailwindcss'

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

这意味着你可以继续在 IntelliSense 辅助入口中使用官方文档的写法 @import 'tailwindcss'，以获得更好的 IDE 智能提示 支持。

如果是实际运行时入口，推荐直接写 @import 'weapp-tailwindcss/index.css'。

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

为了解决 IDE 智能提示问题，需要在 VS Code 里显式告诉 Tailwind CSS IntelliSense 哪个文件是 Tailwind 4 的 CSS 入口。最直接的做法是把它指向真实生效的 src/app.css：

.vscode/settings.json

{
  "tailwindCSS.experimental.configFile": "src/app.css"
}

如果你更想单独放一个“只给编辑器识别”的文件，也可以额外创建 src/main.css：

src/main.css

@import "tailwindcss";
@source not "dist";
@source not "../src/uni_modules";

然后把 experimental.configFile 指向它：

.vscode/settings.json

{
  "tailwindCSS.experimental.configFile": "src/main.css"
}

这个 src/main.css 只用于 IntelliSense，不要在 App.vue 里实际引入。应用运行时仍然使用 src/app.css 里的 @import "weapp-tailwindcss/index.css"。

@source 扫描范围排障

问题现象

如果你的 uni-app 项目把第三方插件或依赖放在 src/uni_modules 下，同时 Tailwind 4 的 CSS 入口又没有显式排除这个目录，那么扫描源码时也可能把依赖里的正则片段、README 示例文本或构建产物误当成候选，最终生成无意义样式。

根因

根因和 Tailwind v3 的 content 误扫描类似，本质上都是扫描范围过宽，把业务源码以外的第三方内容也纳入了提取范围。

推荐配置

对于 uni-app cli 项目，推荐在 Tailwind 4 的 CSS 入口里显式排除：

src/main.css

@import "tailwindcss";
@source not "dist";
@source not "../src/uni_modules";

最佳实践

• @source 应尽量只覆盖业务源码目录
• 默认排除 src/uni_modules、node_modules、dist、unpackage、文档和生成产物
• 如果必须扫描某个 uni_modules 包，只精确包含真正承载模板类名的文件，不要全量扫描整个目录

这里要写 @import "tailwindcss"，因为 tailwindcss-intellisense 当前用于触发 v4 设计系统加载的判断只认 @import "tailwindcss" 或 @theme {}，并不认 @import "weapp-tailwindcss/index.css"。

注意

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

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