windi css在旧项目落地需三步：配置必须export default导出、class迁移分shortcuts映射→data属性解耦→纯原子类三阶段、vite插件须enforce: 'pre'确保优先执行。

旧项目样式构建慢、体积大、换肤难，Windi CSS 能直接切掉冗余 CSS 生成，但不是装上就生效——关键在配置落地和类名迁移节奏。

windi.config.js 配置必须导出 default 对象

很多老项目卡在配置不生效，根本原因是 windi.config.js 导出方式不对。Windi CSS 只认 export default { ... }，不能用 module.exports = { ... } 或命名导出。

• 错误写法：module.exports = { preflight: true }
• 正确写法：export default { preflight: true }
• 如果用了 TypeScript，确保文件后缀是 .js（不是 .ts），否则 Vite 默认不解析
• 配置里启用 attributify: true 可让 bg="blue-500" 这类写法生效，适合渐进式迁移

class 名迁移要分阶段，别一次性重写

直接把所有 .btn-primary 换成 bg-blue-500 hover:bg-blue-600 px-4 py-2 rounded 是最常见踩坑点——老项目里大量 class 是语义化命名，且可能被 JS 直接操作 DOM 查询，硬替会炸。

使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Andr​​oid友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Andr​​oid应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

• 第一阶段：保留原有 class，用 shortcuts 映射到 Windi 类：shortcuts: { 'btn-primary': 'bg-blue-500 hover:bg-blue-600 px-4 py-2 rounded' }
• 第二阶段：逐步把 JS 中的 querySelector('.btn-primary') 改成 data 属性，如 data-role="button"，解耦样式与逻辑
• 第三阶段：删掉 shortcuts，改用纯原子类，此时 class 已不再承担语义，只负责视觉

Vite 插件必须加 enforce: 'pre'

老项目常混用 PostCSS 插件（比如 autoprefixer、cssnano），若 vite-plugin-windicss 加载顺序靠后，会导致 Windi 生成的 CSS 被后续插件误处理，出现伪类丢失、响应式断点失效等问题。

• 正确配置：plugins: [ WindiCSS({ enforce: 'pre' }), ...otherPlugins ]
• 尤其注意：如果项目用了 vite-plugin-pwa 或自定义 CSS 处理插件，Windi 必须排在它们前面
• 验证方式：检查构建产物中是否有 @layer utilities 块，没有则说明 Windi CSS 未介入编译流程

真正难的不是配置，而是让团队接受“class 不再代表组件，只代表单个样式属性”——一旦跨过这个认知门槛，后续维护成本才会断崖下降。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！