[{"data":1,"prerenderedAt":176},["ShallowReactive",2],{"content-/blog/tailwind-css-guide":3,"related-blog":151},{"_path":4,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":8,"description":9,"keywords":10,"author":11,"date":12,"category":13,"image":14,"body":15,"_type":146,"_id":147,"_source":66,"_file":148,"_stem":149,"_extension":150},"/blog/tailwind-css-guide","blog",false,"","Tailwind CSS 实战","Tailwind CSS 的使用技巧、定制化配置、最佳实践","Tailwind CSS 实战, Blog, HTMLPAGE","HTMLPAGE","2025-11-26","待分类","/content-images/blog/blog.jpg",{"type":16,"children":17,"toc":139},"root",[18,26,32,47,52,82,87,108,112,117],{"type":19,"tag":20,"props":21,"children":22},"element","p",{},[23],{"type":24,"value":25},"text","Tailwind CSS 为原子化 CSS 框架，适合生成系统快速拼装页面样式。本文提供在模板生成与编辑器集成中的最佳实践。",{"type":19,"tag":27,"props":28,"children":30},"h2",{"id":29},"集成建议",[31],{"type":24,"value":29},{"type":19,"tag":33,"props":34,"children":35},"ul",{},[36,42],{"type":19,"tag":37,"props":38,"children":39},"li",{},[40],{"type":24,"value":41},"启用 JIT（Just-In-Time）模式以按需生成类，减少样式体积并支持动态类名。",{"type":19,"tag":37,"props":43,"children":44},{},[45],{"type":24,"value":46},"将公共主题与配色定义为 CSS 变量或 Tailwind theme 扩展，便于模板间共享与切换。",{"type":19,"tag":27,"props":48,"children":50},{"id":49},"减小产物体积",[51],{"type":24,"value":49},{"type":19,"tag":33,"props":53,"children":54},{},[55,77],{"type":19,"tag":37,"props":56,"children":57},{},[58,60,67,69,75],{"type":24,"value":59},"在构建中配置 ",{"type":19,"tag":61,"props":62,"children":64},"code",{"className":63},[],[65],{"type":24,"value":66},"content",{"type":24,"value":68},"（或 ",{"type":19,"tag":61,"props":70,"children":72},{"className":71},[],[73],{"type":24,"value":74},"purge",{"type":24,"value":76},"）精确匹配模板路径，移除未使用的样式。",{"type":19,"tag":37,"props":78,"children":79},{},[80],{"type":24,"value":81},"对用户可输入的 class 名称进行白名单或前缀约束，避免动态类导致 purge 失效。",{"type":19,"tag":27,"props":83,"children":85},{"id":84},"编辑器内样式隔离",[86],{"type":24,"value":84},{"type":19,"tag":33,"props":88,"children":89},{},[90,103],{"type":19,"tag":37,"props":91,"children":92},{},[93,95,101],{"type":24,"value":94},"为用户编辑的模板使用命名空间前缀（例如 ",{"type":19,"tag":61,"props":96,"children":98},{"className":97},[],[99],{"type":24,"value":100},".tpl-\u003Cid> ",{"type":24,"value":102},"）以避免样式冲突。",{"type":19,"tag":37,"props":104,"children":105},{},[106],{"type":24,"value":107},"提供主题切换的预览功能，并在编辑器中渲染时按需注入对应 CSS 变量。",{"type":19,"tag":109,"props":110,"children":111},"hr",{},[],{"type":19,"tag":20,"props":113,"children":114},{},[115],{"type":24,"value":116},"相关链接：",{"type":19,"tag":33,"props":118,"children":119},{},[120,130],{"type":19,"tag":37,"props":121,"children":122},{},[123],{"type":19,"tag":124,"props":125,"children":127},"a",{"href":126},"/blog",[128],{"type":24,"value":129},"返回博客分类",{"type":19,"tag":37,"props":131,"children":132},{},[133],{"type":19,"tag":124,"props":134,"children":136},{"href":135},"/blog/topic/multi-agent-system",[137],{"type":24,"value":138},"查看热门话题",{"title":7,"searchDepth":140,"depth":140,"links":141},3,[142,144,145],{"id":29,"depth":143,"text":29},2,{"id":49,"depth":143,"text":49},{"id":84,"depth":143,"text":84},"markdown","content:blog:tailwind-css-guide.md","blog/tailwind-css-guide.md","blog/tailwind-css-guide","md",[152,160,168],{"_path":153,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":154,"description":155,"keywords":156,"author":11,"date":12,"category":13,"image":14,"_type":146,"_id":157,"_source":66,"_file":158,"_stem":159,"_extension":150},"/blog/2025-q1-updates","2025 Q1 产品更新","第一季度重大功能发布：AI 生成优化、新模板上线、编辑器增强等","2025 Q1 产品更新, Blog, HTMLPAGE","content:blog:2025-q1-updates.md","blog/2025-q1-updates.md","blog/2025-q1-updates",{"_path":161,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":162,"description":163,"keywords":164,"author":11,"date":12,"category":13,"image":14,"_type":146,"_id":165,"_source":66,"_file":166,"_stem":167,"_extension":150},"/blog/2025-roadmap","2025 产品路线图","展望 2025 年的产品规划：AI 能力增强、模板扩充、国际化等","2025 产品路线图, Blog, HTMLPAGE","content:blog:2025-roadmap.md","blog/2025-roadmap.md","blog/2025-roadmap",{"_path":169,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":170,"description":171,"keywords":172,"author":11,"date":12,"category":13,"image":14,"_type":146,"_id":173,"_source":66,"_file":174,"_stem":175,"_extension":150},"/blog/ab-testing","A/B 测试","通过 A/B 测试验证设计方案","A/B 测试, Blog, HTMLPAGE","content:blog:ab-testing.md","blog/ab-testing.md","blog/ab-testing",1774945277679]