[{"data":1,"prerenderedAt":189},["ShallowReactive",2],{"content-seo":3,"en_topics":6,"en_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},"en_topics\u002Ftopics\u002Fbuilding.md","Building",{"type":11,"value":12,"toc":13},"minimark",[],{"title":14,"searchDepth":15,"depth":15,"links":16},"",2,[],"Ecommerce, products, AI-assisted work, and whatever I am building.","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","D8MrHsIWY95f50YFbUCRizJ45lPzun9zKcHplLIAnIA",{"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},"en_topics\u002Ftopics\u002Flearning.md","Learning",{"type":11,"value":32,"toc":33},[],{"title":14,"searchDepth":15,"depth":15,"links":34},[],"Tech, tools, and things I have picked up along the way.",{"icon":37,"created_at":21,"updated_at":21},"i-lucide-notebook-pen","\u002Ftopics\u002Flearning",{"title":30,"description":35},{"loc":38},"topics\u002Flearning","PBu6pRdEFIIqo-4gGIQK-VtKxkHWiHhbol7tuMjSeH4",{"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},"en_topics\u002Ftopics\u002Fliving.md","Living",{"type":11,"value":47,"toc":48},[],{"title":14,"searchDepth":15,"depth":15,"links":49},[],"Life outside of work.",{"icon":52,"created_at":21,"updated_at":21},"i-lucide-coffee",3,"\u002Ftopics\u002Fliving",{"title":45,"description":50},{"loc":54},"topics\u002Fliving","vawkwx5dEl7RjKhEeDFooT8j47erYZjWTAYpdFihJn8",{"page":60,"surround":178},{"id":61,"title":62,"body":63,"category":166,"created_at":167,"description":168,"excerpt":169,"extension":18,"guid":169,"icon":170,"image":169,"meta":171,"navigation":4,"path":172,"published_at":167,"seo":173,"sitemap":174,"stem":175,"topics":176,"updated_at":167,"__hash__":177},"en_posts\u002Fposts\u002Ftailwind-spacing.md","How Spacing Works in Tailwind CSS",{"type":11,"value":64,"toc":160},[65,69,79,87,96,105,108,114,121,127,136,150,156],[66,67,68],"p",{},"Spacing is one of the most frequently used groups of utility classes in Tailwind CSS. This article looks at how that spacing is implemented under the hood.",[70,71,73,74,78],"h2",{"id":72},"the-spacing-function","The ",[75,76,77],"code",{},"--spacing()"," function",[66,80,81],{},[82,83,84],"a",{"href":84,"rel":85},"https:\u002F\u002Ftailwindcss.com\u002Fdocs\u002Ffunctions-and-directives#spacing-function",[86],"nofollow",[66,88,89,91,92,95],{},[75,90,77],{}," is the core function Tailwind CSS uses to generate spacing values. It takes a single numeric argument — a multiple of the base spacing unit — and compiles down to a ",[75,93,94],{},"calc()"," expression that computes the actual length.",[97,98,103],"pre",{"className":99,"code":101,"language":102},[100],"language-text","--spacing(4) \n","text",[75,104,101],{"__ignoreMap":14},[66,106,107],{},"compiles to:",[97,109,112],{"className":110,"code":111,"language":102},[100],"calc(var(--spacing) * 4)\n",[75,113,111],{"__ignoreMap":14},[70,115,73,117,120],{"id":116},"the-spacing-variable",[75,118,119],{},"--spacing"," variable",[66,122,123],{},[82,124,125],{"href":125,"rel":126},"https:\u002F\u002Ftailwindcss.com\u002Fdocs\u002Ftheme#default-theme-variable-reference",[86],[66,128,129,131,132,135],{},[75,130,119],{}," is the core variable that defines the base spacing unit in Tailwind CSS. It defaults to ",[75,133,134],{},"0.25rem",", and you can redefine it to adjust the entire spacing scale.",[97,137,141],{"className":138,"code":139,"language":140,"meta":14,"style":14},"language-css shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","--spacing: 0.25rem;\n","css",[75,142,143],{"__ignoreMap":14},[144,145,147],"span",{"class":146,"line":22},"line",[144,148,139],{"class":149},"sTEyZ",[66,151,152,153,155],{},"Modern browsers use a default root font size of 16px, so the default ",[75,154,119],{}," value works out to 4px.",[157,158,159],"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":161},[162,164],{"id":72,"depth":15,"text":163},"The --spacing() function",{"id":116,"depth":15,"text":165},"The --spacing variable","learning","2025-03-26","How Tailwind CSS spacing works under the hood — the --spacing() function and the --spacing variable that drives the entire scale.",null,"i-lucide-wind",{},"\u002Fposts\u002Ftailwind-spacing",{"title":62,"description":168},{"loc":172},"posts\u002Ftailwind-spacing",[166],"QuBvCCIgmU6o6tuw-zyq9vbQyV8W7IVnM7PUYlmlMzw",[179,184],{"title":180,"path":181,"stem":182,"description":183,"children":-1},"Advanced Tailwind CSS: Customization and Extension","\u002Fposts\u002Ftailwind-advanced-customization","posts\u002Ftailwind-advanced-customization","An introduction to advanced Tailwind CSS techniques, including tools like tailwind-merge and tailwind-variants, plus a few recommended UI frameworks.",{"title":185,"path":186,"stem":187,"description":188,"children":-1},"Tunnel","\u002Fposts\u002Ftunneling-ngrok-frp","posts\u002Ftunneling-ngrok-frp","An overview of tunneling tools — ngrok and frp — that expose local services to the public internet through reverse proxies and NAT traversal.",1792164109185]