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