样式迁移故障排除
当本地环境样式异常时,按此流程排查:
- CDN引入检查:确认本地HTML文件的
head
中包含https://cdn.tailwindcss.com
的引用。Layout.dev默认使用v3.3版本,建议在本地通过script src=https://cdn.tailwindcss.com/3.3.5
指定相同版本 - PurgeCSS配置:如果使用构建工具,检查
tailwind.config.js
是否包含content: [.html, ./src/**/*.{js,ts,jsx,tsx}]
配置,避免生产环境样式被清除 - 字体文件处理:导出项目时勾选Include Web Fonts选项,或在本地通过
@import url(https://fonts.geekzu.org/css2?family=Inter)
手动引入Inter字体
终极解决方案:1) 通过导出面板的Export with Build生成包含完整Tailwind构建的版本;2) 或本地安装TailwindCSS后运行npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch
实时编译样式。
この答えは記事から得たものである。Layout.dev:迅速なUI生成のためのAI開発ツールについて