不能。Windi CSS 构建时扫描源码提取静态 class 字符串生成 CSS，需接入 Vite 等构建环境并配置 include 路径；动态 class 需注释或 extract 显式声明，且不支持 @apply 和运行时 HTML 分析。
Windi CSS 能直接处理现有 HTML 文件吗？
不能。Windi CSS 不是运行时解析 HTML 的工具，它在构建时扫描源码（通常是 .html、.vue、.tsx 等）提取 class 字符串，再按需生成对应 CSS。你手头的纯 HTML 文件如果没接入构建流程（比如 Vite / Webpack），windicss 根本不会读它。
- 必须把 HTML 放进支持 Windi CSS 的构建环境中（推荐 Vite +
@windicss/vite-plugin）
- 原始 HTML 中的 class 名必须是静态字符串（如
class="text-lg font-bold"），动态拼接（class="text-${size}"）默认不识别，需用 / @windi / 注释或 extract 配置显式声明
- 如果 HTML 是服务端渲染或纯静态托管（如 GitHub Pages 直传
index.html），得先确保构建产物中 CSS 已完整注入或外链正确
如何让 Windi CSS 扫描并处理 .html 文件？
默认情况下，Vite 插件只扫描 .vue 和 .ts/.tsx，HTML 文件需要手动配置路径白名单。
- 在
windi.config.ts 或 windi.config.js 中设置 include：export default defineConfig({
include: ['src/**/*.{html,js,ts,vue}'],
})
- 确保 Vite 配置里已启用插件（Vite 4+ 推荐用
@windicss/vite-plugin，而非旧版 vite-plugin-windicss）
- 如果用的是
index.html 作为入口，且它不在 src/ 下（比如放在项目根目录），要把路径加进 include，例如 ['index.html', 'src/*/.{html,ts,vue}']
- 注意：Windi CSS 对 HTML 的解析是“无上下文”的——它不理解 DOM 结构或属性绑定，只认 class 属性值里的字面量字符串
从 Tailwind 迁移时 class 行为不一致？重点查这三处
Windi CSS 兼容大部分 Tailwind 语法，但默认行为和解析粒度有差异，容易导致样式“突然消失”或“多出一堆未用类”。
-
dark: 变体默认不启用，需在配置中显式添加：theme: { variants: ['dark'] }，否则 dark:bg-gray-800 不生效
-
@apply 在 HTML 中完全无效（它只在 CSS 文件里工作），别试图在 style 标签里写 @apply text-red-500
- 响应式断点命名默认是
sm/md…，但如果你老项目用了 tablet 这类自定义名，Windi 不会自动识别，得在 theme.screens 里补全定义，否则 tablet:text-center 被当普通 class 忽略
构建后 CSS 体积比预期大？可能是 extract 模式没关对
Windi 默认用“扫描提取”模式（on-demand），但若配置不当，会退化成全量生成，尤其在 HTML 文件里大量使用变量插值或条件 class 时。
- 检查是否误启了
extract 模式（它会把所有匹配正则的字符串当 class 处理，极易过曝），除非真有运行时 class 拼接，否则建议关闭：extract: false
- 如果用了
v-html 或 innerHTML 插入含 class 的字符串，Windi 无法静态分析，必须用 / @windi classes: "text-sm bg-blue-100" / 注释手动声明
- 开发时可临时加
shortcuts 把高频组合收口，减少散落在 HTML 里的冗余 class，比如：btn: 'px-4 py-2 rounded bg-blue-500 text-white'，之后 HTML 里只写 class="btn"
@windicss/vite-plugin）class="text-lg font-bold"），动态拼接（class="text-${size}"）默认不识别，需用 / @windi / 注释或 extract 配置显式声明index.html），得先确保构建产物中 CSS 已完整注入或外链正确.vue 和 .ts/.tsx，HTML 文件需要手动配置路径白名单。
- 在
windi.config.ts或windi.config.js中设置include：export default defineConfig({ include: ['src/**/*.{html,js,ts,vue}'], }) - 确保 Vite 配置里已启用插件（Vite 4+ 推荐用
@windicss/vite-plugin，而非旧版vite-plugin-windicss） - 如果用的是
index.html作为入口，且它不在src/下（比如放在项目根目录），要把路径加进include，例如['index.html', 'src/*/.{html,ts,vue}'] - 注意：Windi CSS 对 HTML 的解析是“无上下文”的——它不理解 DOM 结构或属性绑定，只认 class 属性值里的字面量字符串
从 Tailwind 迁移时 class 行为不一致？重点查这三处
Windi CSS 兼容大部分 Tailwind 语法，但默认行为和解析粒度有差异，容易导致样式“突然消失”或“多出一堆未用类”。
-
dark: 变体默认不启用，需在配置中显式添加：theme: { variants: ['dark'] }，否则 dark:bg-gray-800 不生效
-
@apply 在 HTML 中完全无效（它只在 CSS 文件里工作），别试图在 style 标签里写 @apply text-red-500
- 响应式断点命名默认是
sm/md…，但如果你老项目用了 tablet 这类自定义名，Windi 不会自动识别，得在 theme.screens 里补全定义，否则 tablet:text-center 被当普通 class 忽略
构建后 CSS 体积比预期大？可能是 extract 模式没关对
Windi 默认用“扫描提取”模式（on-demand），但若配置不当，会退化成全量生成，尤其在 HTML 文件里大量使用变量插值或条件 class 时。
- 检查是否误启了
extract 模式（它会把所有匹配正则的字符串当 class 处理，极易过曝），除非真有运行时 class 拼接，否则建议关闭：extract: false
- 如果用了
v-html 或 innerHTML 插入含 class 的字符串，Windi 无法静态分析，必须用 / @windi classes: "text-sm bg-blue-100" / 注释手动声明
- 开发时可临时加
shortcuts 把高频组合收口，减少散落在 HTML 里的冗余 class，比如：btn: 'px-4 py-2 rounded bg-blue-500 text-white'，之后 HTML 里只写 class="btn"
dark: 变体默认不启用，需在配置中显式添加：theme: { variants: ['dark'] }，否则 dark:bg-gray-800 不生效@apply 在 HTML 中完全无效（它只在 CSS 文件里工作），别试图在 style 标签里写 @apply text-red-500
sm/md…，但如果你老项目用了 tablet 这类自定义名，Windi 不会自动识别，得在 theme.screens 里补全定义，否则 tablet:text-center 被当普通 class 忽略- 检查是否误启了
extract模式（它会把所有匹配正则的字符串当 class 处理，极易过曝），除非真有运行时 class 拼接，否则建议关闭：extract: false - 如果用了
v-html或 innerHTML 插入含 class 的字符串，Windi 无法静态分析，必须用/ @windi classes: "text-sm bg-blue-100" /注释手动声明 - 开发时可临时加
shortcuts把高频组合收口，减少散落在 HTML 里的冗余 class，比如：btn: 'px-4 py-2 rounded bg-blue-500 text-white'，之后 HTML 里只写class="btn"
windi css 对 html 的支持是“可用”，但不是“零配置即用”。最常被忽略的是构建路径配置和动态 class 的显式声明——这两处卡住，就容易以为它不工作，其实是没告诉它去哪找、找什么。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
