[{"data":1,"prerenderedAt":304},["ShallowReactive",2],{"content-seo":3,"zh_topics":6,"zh_blogs:\u002Fblogs\u002Ftailwind\u002Fspacing":178},{"\u002F":4,"\u002Fblogs":4,"\u002Fposts":5,"\u002Ftopics":4,"\u002Fblogs\u002Fdevops\u002Ftunel":4,"\u002Fblogs\u002Fmac\u002Fshortcuts":4,"\u002Fblogs\u002Fmac\u002Fsoftwares":4,"\u002Fblogs\u002Fmac\u002Fcommands":4,"\u002Fblogs\u002Ftailwind\u002Fnext-level":4,"\u002Fblogs\u002Ftailwind\u002Fspacing":4,"\u002Ftopics\u002Fdatabase":5,"\u002Ftopics\u002Fdevops":4,"\u002Ftopics\u002Flaravel":5,"\u002Ftopics\u002Flayout":5,"\u002Ftopics\u002Fmac":4,"\u002Ftopics\u002Fnuxt":5,"\u002Ftopics\u002Fshopify":5,"\u002Ftopics\u002Ftailwind":4,"\u002Ftopics\u002Fvscode":5,"\u002Ftopics\u002Fvue":5,"\u002Fzh":4,"\u002Fzh\u002Fblogs":4,"\u002Fzh\u002Fposts":5,"\u002Fzh\u002Ftopics":4,"\u002Fzh\u002Fblogs\u002Fmac\u002Fshortcuts":4,"\u002Fzh\u002Fblogs\u002Fmac\u002Fsoftwares":4,"\u002Fzh\u002Fblogs\u002Fmac\u002Fcommands":4,"\u002Fzh\u002Fblogs\u002Ftailwind\u002Fnext-level":4,"\u002Fzh\u002Fblogs\u002Ftailwind\u002Fspacing":4,"\u002Fzh\u002Ftopics\u002Fdatabase":5,"\u002Fzh\u002Ftopics\u002Fdevops":5,"\u002Fzh\u002Ftopics\u002Flaravel":5,"\u002Fzh\u002Ftopics\u002Flayout":5,"\u002Fzh\u002Ftopics\u002Fmac":4,"\u002Fzh\u002Ftopics\u002Fnuxt":5,"\u002Fzh\u002Ftopics\u002Fshopify":5,"\u002Fzh\u002Ftopics\u002Ftailwind":4,"\u002Fzh\u002Ftopics\u002Fvscode":5,"\u002Fzh\u002Ftopics\u002Fvue":5},true,false,{"database":7,"devops":28,"laravel":45,"layout":62,"mac":79,"nuxt":96,"shopify":112,"tailwind":129,"vscode":145,"vue":161},{"id":8,"title":9,"body":10,"description":17,"extension":18,"meta":19,"navigation":4,"path":23,"published_at":22,"seo":24,"sitemap":25,"stem":26,"__hash__":27},"zh_topics\u002Ftopics\u002Fdatabase.md","数据库",{"type":11,"value":12,"toc":13},"minimark",[],{"title":14,"searchDepth":15,"depth":15,"links":16},"",2,[],"用于存储、查询和管理结构化与非结构化数据的系统与引擎。","md",{"handle":20,"icon":21,"created_at":22,"updated_at":22},"database","i-lucide-database","2025-03-31","\u002Ftopics\u002Fdatabase",{"title":9,"description":17},{"loc":23},"topics\u002Fdatabase","-0szbj_cJHmydahthZe1A2CkxXLNcNr60JC8iT18hpk",{"id":29,"title":30,"body":31,"description":35,"extension":18,"meta":36,"navigation":4,"path":40,"published_at":39,"seo":41,"sitemap":42,"stem":43,"__hash__":44},"zh_topics\u002Ftopics\u002Fdevops.md","DevOps",{"type":11,"value":32,"toc":33},[],{"title":14,"searchDepth":15,"depth":15,"links":34},[],"DevOps实践与工具",{"handle":37,"icon":38,"created_at":39,"updated_at":39},"devops","i-lucide-server-cog","2025-03-26","\u002Ftopics\u002Fdevops",{"title":30,"description":35},{"loc":40},"topics\u002Fdevops","pfGu5QrHy7iRMu7euYCagXI6q402PvVQXvm-jGp0BN4",{"id":46,"title":47,"body":48,"description":52,"extension":18,"meta":53,"navigation":4,"path":57,"published_at":56,"seo":58,"sitemap":59,"stem":60,"__hash__":61},"zh_topics\u002Ftopics\u002Flaravel.md","Laravel",{"type":11,"value":49,"toc":50},[],{"title":14,"searchDepth":15,"depth":15,"links":51},[],"优雅的 PHP Web 框架",{"handle":54,"icon":55,"created_at":56,"updated_at":56},"laravel","i-lucide-terminal","2025-02-12","\u002Ftopics\u002Flaravel",{"title":47,"description":52},{"loc":57},"topics\u002Flaravel","J9g1YQcKjG7QGJJjYF_2arRZymu4j5IpOM9ubAfCMNE",{"id":63,"title":64,"body":65,"description":69,"extension":18,"meta":70,"navigation":4,"path":74,"published_at":73,"seo":75,"sitemap":76,"stem":77,"__hash__":78},"zh_topics\u002Ftopics\u002Flayout.md","布局",{"type":11,"value":66,"toc":67},[],{"title":14,"searchDepth":15,"depth":15,"links":68},[],"在不同屏幕尺寸下排布和组织页面与界面元素的技术。",{"handle":71,"icon":72,"created_at":73,"updated_at":73},"layout","i-lucide-layout-dashboard","2025-03-27","\u002Ftopics\u002Flayout",{"title":64,"description":69},{"loc":74},"topics\u002Flayout","-7KYccgKOXlhryA9ZoBmN6rsanYMD-mEsHHvM73YfPc",{"id":80,"title":81,"body":82,"description":86,"extension":18,"meta":87,"navigation":4,"path":91,"published_at":90,"seo":92,"sitemap":93,"stem":94,"__hash__":95},"zh_topics\u002Ftopics\u002Fmac.md","Mac",{"type":11,"value":83,"toc":84},[],{"title":14,"searchDepth":15,"depth":15,"links":85},[],"Apple 的个人电脑系统",{"handle":88,"icon":89,"created_at":90,"updated_at":90},"mac","i-lucide-laptop","2025-02-15","\u002Ftopics\u002Fmac",{"title":81,"description":86},{"loc":91},"topics\u002Fmac","yCj4R2OBSY0mRXtYtqI3TitDgPWO1Tv6DtiStt6XbiQ",{"id":97,"title":98,"body":99,"description":103,"extension":18,"meta":104,"navigation":4,"path":107,"published_at":56,"seo":108,"sitemap":109,"stem":110,"__hash__":111},"zh_topics\u002Ftopics\u002Fnuxt.md","Nuxt",{"type":11,"value":100,"toc":101},[],{"title":14,"searchDepth":15,"depth":15,"links":102},[],"基于 Vue.js 的通用应用框架",{"handle":105,"icon":106,"created_at":56,"updated_at":56},"nuxt","i-lucide-layers-3","\u002Ftopics\u002Fnuxt",{"title":98,"description":103},{"loc":107},"topics\u002Fnuxt","tUcgWhtioCA0lIgEANMtruC98XWo-snDKOQ-0saj4mE",{"id":113,"title":114,"body":115,"description":119,"extension":18,"meta":120,"navigation":4,"path":124,"published_at":123,"seo":125,"sitemap":126,"stem":127,"__hash__":128},"zh_topics\u002Ftopics\u002Fshopify.md","Shopify",{"type":11,"value":116,"toc":117},[],{"title":14,"searchDepth":15,"depth":15,"links":118},[],"Shopify是一款功能强大的电商平台，提供丰富的主题模板和应用插件，适合中小型电商快速搭建网上商城",{"handle":121,"icon":122,"created_at":123,"updated_at":123},"shopify","i-lucide-shopping-bag","2025-03-15","\u002Ftopics\u002Fshopify",{"title":114,"description":119},{"loc":124},"topics\u002Fshopify","jjAmYzsT2P3K58Ub4uW_dzQDS7sOuV58X9xKhtnjpFk",{"id":130,"title":131,"body":132,"description":136,"extension":18,"meta":137,"navigation":4,"path":140,"published_at":39,"seo":141,"sitemap":142,"stem":143,"__hash__":144},"zh_topics\u002Ftopics\u002Ftailwind.md","Tailwind CSS",{"type":11,"value":133,"toc":134},[],{"title":14,"searchDepth":15,"depth":15,"links":135},[],"一个实用的CSS框架",{"handle":138,"icon":139,"created_at":39,"updated_at":39},"tailwind","i-lucide-wind","\u002Ftopics\u002Ftailwind",{"title":131,"description":136},{"loc":140},"topics\u002Ftailwind","65mfHr9ZJ86MvVL4uiGGh25G1eJGkK2ovVZtZ4YvjxY",{"id":146,"title":147,"body":148,"description":152,"extension":18,"meta":153,"navigation":4,"path":156,"published_at":123,"seo":157,"sitemap":158,"stem":159,"__hash__":160},"zh_topics\u002Ftopics\u002Fvscode.md","Visual Studio Code",{"type":11,"value":149,"toc":150},[],{"title":14,"searchDepth":15,"depth":15,"links":151},[],"Visual Studio Code 是一款轻量级的现代化代码编辑器，支持多种编程语言和插件扩展",{"handle":154,"icon":155,"created_at":123,"updated_at":123},"vscode","i-lucide-code-xml","\u002Ftopics\u002Fvscode",{"title":147,"description":152},{"loc":156},"topics\u002Fvscode","yxLhCA8FtSRUfzCD8qv0C4cr6JzBm88VNI-voqd8TTw",{"id":162,"title":163,"body":164,"description":168,"extension":18,"meta":169,"navigation":4,"path":173,"published_at":172,"seo":174,"sitemap":175,"stem":176,"__hash__":177},"zh_topics\u002Ftopics\u002Fvue.md","Vue.js",{"type":11,"value":165,"toc":166},[],{"title":14,"searchDepth":15,"depth":15,"links":167},[],"渐进式 JavaScript 框架",{"handle":170,"icon":171,"created_at":172,"updated_at":172},"vue","i-lucide-braces","2025-02-13","\u002Ftopics\u002Fvue",{"title":163,"description":168},{"loc":173},"topics\u002Fvue","xu1fVch-9KsGMp4160ea8C1m2mKwQIh-EVhg2OqPV1A",{"page":179,"surround":298},{"id":180,"title":181,"body":182,"category":138,"created_at":39,"description":288,"excerpt":289,"extension":18,"guid":289,"handle":290,"icon":139,"image":289,"meta":291,"navigation":4,"path":292,"published_at":39,"seo":293,"sitemap":294,"stem":295,"topics":296,"updated_at":39,"__hash__":297},"zh_blogs\u002Fblogs\u002Ftailwind\u002Fspacing.md","Tailwind CSS间距（Spacing）实现原理",{"type":11,"value":183,"toc":282},[184,188,197,205,214,223,226,232,239,245,257,272,278],[185,186,187],"p",{},"间距（Spacing）是Tailwind CSS中最常用的工具类之一，本文将探讨Tailwind CSS中间距的实现的一些内容。",[189,190,192,196],"h2",{"id":191},"spacing-方法",[193,194,195],"code",{},"--spacing()"," 方法",[185,198,199],{},[200,201,202],"a",{"href":202,"rel":203},"https:\u002F\u002Ftailwindcss.com\u002Fdocs\u002Ffunctions-and-directives#spacing-function",[204],"nofollow",[185,206,207,209,210,213],{},[193,208,195],{},"方法是Tailwind CSS中用于生成间距类名的核心方法，它接受一个参数，用于生成不同尺寸的间距类名。参数是一个数字，表示间距的倍数，编译后会生成一个",[193,211,212],{},"calc()","函数，用于计算间距的实际值。",[215,216,221],"pre",{"className":217,"code":219,"language":220},[218],"language-text","--spacing(4) \n","text",[193,222,219],{"__ignoreMap":14},[185,224,225],{},"编译后会生成以下：",[215,227,230],{"className":228,"code":229,"language":220},[218],"calc(var(--spacing) * 4)\n",[193,231,229],{"__ignoreMap":14},[189,233,235,238],{"id":234},"spacing-变量",[193,236,237],{},"--spacing"," 变量",[185,240,241],{},[200,242,243],{"href":243,"rel":244},"https:\u002F\u002Ftailwindcss.com\u002Fdocs\u002Ftheme#default-theme-variable-reference",[204],[185,246,247,249,250,253,254,256],{},[193,248,237],{}," 变量是Tailwind CSS中用于定义间距尺寸的核心变量，它默认值为",[193,251,252],{},"0.25rem","，可以通过",[193,255,237],{},"变量来定义不同尺寸的间距。",[215,258,262],{"className":259,"code":260,"language":261,"meta":14,"style":14},"language-css shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","--spacing: 0.25rem;\n","css",[193,263,264],{"__ignoreMap":14},[265,266,269],"span",{"class":267,"line":268},"line",1,[265,270,260],{"class":271},"sTEyZ",[185,273,274,275,277],{},"现代浏览器默认是 16px，所以 ",[193,276,237],{}," 默认值是 4px。",[279,280,281],"style",{},"html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":14,"searchDepth":15,"depth":15,"links":283},[284,286],{"id":191,"depth":15,"text":285},"--spacing() 方法",{"id":234,"depth":15,"text":287},"--spacing 变量","深入理解 Tailwind CSS 间距的实现原理：`--spacing()` 函数与驱动整个间距体系的 `--spacing` 变量。",null,"spacing",{},"\u002Fblogs\u002Ftailwind\u002Fspacing",{"title":181,"description":288},{"loc":292},"blogs\u002Ftailwind\u002Fspacing",[138],"ugQBO9iFTJidOxCxlEXtCsEhrP0zaWRhP7t5fCla1xA",[299,289],{"title":300,"path":301,"stem":302,"description":303,"children":-1},"Tailwind CSS进阶：定制化与扩展","\u002Fblogs\u002Ftailwind\u002Fnext-level","blogs\u002Ftailwind\u002Fnext-level","本文介绍tailwindcss的高级用法，包括tailwind-merge、tailwind-variants等工具的使用，以及一些优秀的UI框架推荐。",1791865521375]