[{"data":1,"prerenderedAt":186},["ShallowReactive",2],{"content-seo":3,"zh_topics":6,"zh_posts:\u002Fposts\u002Ftailwind-spacing":59},{"\u002F":4,"\u002Fposts":4,"\u002Ftopics":4,"\u002Fposts\u002Fmac-apps-i-use":4,"\u002Fposts\u002Fmacos-keyboard-shortcuts":4,"\u002Fposts\u002Fmacos-terminal-commands":4,"\u002Fposts\u002Ftailwind-advanced-customization":4,"\u002Fposts\u002Ftailwind-spacing":4,"\u002Fposts\u002Ftunneling-ngrok-frp":4,"\u002Fabout":4,"\u002Ftopics\u002Fbuilding":5,"\u002Ftopics\u002Flearning":4,"\u002Ftopics\u002Fliving":5,"\u002Fzh":4,"\u002Fzh\u002Fposts":4,"\u002Fzh\u002Ftopics":4,"\u002Fzh\u002Fposts\u002Fmac-apps-i-use":4,"\u002Fzh\u002Fposts\u002Fmacos-keyboard-shortcuts":4,"\u002Fzh\u002Fposts\u002Fmacos-terminal-commands":4,"\u002Fzh\u002Fposts\u002Ftailwind-advanced-customization":4,"\u002Fzh\u002Fposts\u002Ftailwind-spacing":4,"\u002Fzh\u002Fabout":4,"\u002Fzh\u002Ftopics\u002Fbuilding":5,"\u002Fzh\u002Ftopics\u002Flearning":4,"\u002Fzh\u002Ftopics\u002Fliving":5},true,false,{"building":7,"learning":28,"living":43},{"id":8,"title":9,"body":10,"description":17,"extension":18,"meta":19,"navigation":4,"order":22,"path":23,"published_at":21,"seo":24,"sitemap":25,"stem":26,"__hash__":27},"zh_topics\u002Ftopics\u002Fbuilding.md","造物",{"type":11,"value":12,"toc":13},"minimark",[],{"title":14,"searchDepth":15,"depth":15,"links":16},"",2,[],"把想法做成东西：电商、产品，与 AI 一起敲下的代码。","md",{"icon":20,"created_at":21,"updated_at":21},"i-lucide-hammer","2026-10-16",1,"\u002Ftopics\u002Fbuilding",{"title":9,"description":17},{"loc":23},"topics\u002Fbuilding","oVA9tu7sd_eyfR_zUjr2EW9XNPdrvDC5ZYfCECV2YEg",{"id":29,"title":30,"body":31,"description":35,"extension":18,"meta":36,"navigation":4,"order":15,"path":38,"published_at":21,"seo":39,"sitemap":40,"stem":41,"__hash__":42},"zh_topics\u002Ftopics\u002Flearning.md","札记",{"type":11,"value":32,"toc":33},[],{"title":14,"searchDepth":15,"depth":15,"links":34},[],"读过的、试过的、踩过的坑，随手记下。",{"icon":37,"created_at":21,"updated_at":21},"i-lucide-notebook-pen","\u002Ftopics\u002Flearning",{"title":30,"description":35},{"loc":38},"topics\u002Flearning","VaQVDFCd0NuNux8vegUbv3IYoq4IiZyaI111aR5vMGg",{"id":44,"title":45,"body":46,"description":50,"extension":18,"meta":51,"navigation":4,"order":53,"path":54,"published_at":21,"seo":55,"sitemap":56,"stem":57,"__hash__":58},"zh_topics\u002Ftopics\u002Fliving.md","日常",{"type":11,"value":47,"toc":48},[],{"title":14,"searchDepth":15,"depth":15,"links":49},[],"工作之外，一些寻常日子。",{"icon":52,"created_at":21,"updated_at":21},"i-lucide-coffee",3,"\u002Ftopics\u002Fliving",{"title":45,"description":50},{"loc":54},"topics\u002Fliving","hIq7MDKoWaRiwBdutiE3nn4YlsJzhlv7cwxDpXCLZPw",{"page":60,"surround":180},{"id":61,"title":62,"body":63,"category":168,"created_at":169,"description":170,"excerpt":171,"extension":18,"guid":171,"icon":172,"image":171,"meta":173,"navigation":4,"path":174,"published_at":169,"seo":175,"sitemap":176,"stem":177,"topics":178,"updated_at":169,"__hash__":179},"zh_posts\u002Fposts\u002Ftailwind-spacing.md","Tailwind CSS间距（Spacing）实现原理",{"type":11,"value":64,"toc":162},[65,69,78,86,95,104,107,113,120,126,138,152,158],[66,67,68],"p",{},"间距（Spacing）是Tailwind CSS中最常用的工具类之一，本文将探讨Tailwind CSS中间距的实现的一些内容。",[70,71,73,77],"h2",{"id":72},"spacing-方法",[74,75,76],"code",{},"--spacing()"," 方法",[66,79,80],{},[81,82,83],"a",{"href":83,"rel":84},"https:\u002F\u002Ftailwindcss.com\u002Fdocs\u002Ffunctions-and-directives#spacing-function",[85],"nofollow",[66,87,88,90,91,94],{},[74,89,76],{},"方法是Tailwind CSS中用于生成间距类名的核心方法，它接受一个参数，用于生成不同尺寸的间距类名。参数是一个数字，表示间距的倍数，编译后会生成一个",[74,92,93],{},"calc()","函数，用于计算间距的实际值。",[96,97,102],"pre",{"className":98,"code":100,"language":101},[99],"language-text","--spacing(4) \n","text",[74,103,100],{"__ignoreMap":14},[66,105,106],{},"编译后会生成以下：",[96,108,111],{"className":109,"code":110,"language":101},[99],"calc(var(--spacing) * 4)\n",[74,112,110],{"__ignoreMap":14},[70,114,116,119],{"id":115},"spacing-变量",[74,117,118],{},"--spacing"," 变量",[66,121,122],{},[81,123,124],{"href":124,"rel":125},"https:\u002F\u002Ftailwindcss.com\u002Fdocs\u002Ftheme#default-theme-variable-reference",[85],[66,127,128,130,131,134,135,137],{},[74,129,118],{}," 变量是Tailwind CSS中用于定义间距尺寸的核心变量，它默认值为",[74,132,133],{},"0.25rem","，可以通过",[74,136,118],{},"变量来定义不同尺寸的间距。",[96,139,143],{"className":140,"code":141,"language":142,"meta":14,"style":14},"language-css shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","--spacing: 0.25rem;\n","css",[74,144,145],{"__ignoreMap":14},[146,147,149],"span",{"class":148,"line":22},"line",[146,150,141],{"class":151},"sTEyZ",[66,153,154,155,157],{},"现代浏览器默认是 16px，所以 ",[74,156,118],{}," 默认值是 4px。",[159,160,161],"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":163},[164,166],{"id":72,"depth":15,"text":165},"--spacing() 方法",{"id":115,"depth":15,"text":167},"--spacing 变量","learning","2025-03-26","深入理解 Tailwind CSS 间距的实现原理：--spacing() 函数与驱动整个间距体系的 --spacing 变量。",null,"i-lucide-wind",{},"\u002Fposts\u002Ftailwind-spacing",{"title":62,"description":170},{"loc":174},"posts\u002Ftailwind-spacing",[168],"_nQNwY4Aqc2GYtbFhJ_XRqP-otMtwMRIlOCDp_fUYig",[181,171],{"title":182,"path":183,"stem":184,"description":185,"children":-1},"Tailwind CSS进阶：定制化与扩展","\u002Fposts\u002Ftailwind-advanced-customization","posts\u002Ftailwind-advanced-customization","本文介绍tailwindcss的高级用法，包括tailwind-merge、tailwind-variants等工具的使用，以及一些优秀的UI框架推荐。",1792197697619]