Shuffle的框架隔离方案可从源头防止样式污染:
- 框架级隔离:创建项目时锁定单一框架(如Bootstrap),所有组件仅包含该框架的CSS类
- 纯净代码导出:生成的HTML/CSS不掺杂其他框架冗余代码
- 类名转换工具:
- 通过「Convert Classes」功能将Tailwind类批量转为Bootstrap类
- 支持自定义转换规则(需编辑config文件)
- 沙箱预览:内置的iframe预览环境隔离外部样式影响
操作建议:
- 在New Project环节明确选择框架
- 定期使用「Validate Markup」检查类名兼容性
- 导出后通过PurgeCSS等工具进一步优化
本答案来源于文章《Shuffle:快速构建网页模板的拖放编辑器,支持Cursor扩展》