text: (self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[6723],{71407:function(a){a.exports=function(a,b){if(!Array.isArray(a))throw new Error("expected an array for first argument");if("function"!=typeof b)throw new Error("expected a function for second argument");for(var c={},d=0;d<a.length;d++){var e=a[d],f=b(e),g=c[f];Array.isArray(g)?c[f].push(e):c[f]=[e]}return c}},77925:function(a,b,c){(window.__NEXT_P=window.__NEXT_P||[]).push(["/docs/space",function(){return c(91031)}])},91031:function(a,b,c){"use strict";c.r(b),c.d(b,{"default":function(){return t}});var d=c(67294),e=c(3905),f=c(41664),g=c(59533),h=c(5679),i=c(83434),j=c(53339),k=c(74296),l=c(83629),m=c(38139),n=c(89934),o=c(28368),p=j.DocumentationLayout,q=function(a){return console.warn("Component Heading was not imported, exported, or provided by MDXProvider as global scope"),(0,e.kt)("div",Object.assign({},a))},r={Layout:p,classes:{utilities:{".space-x-0 > :not([hidden]) ~ :not([hidden])":{"--tw-space-x-reverse":"0","margin-right":"calc(0px * var(--tw-space-x-reverse))","margin-left":"calc(0px * calc(1 - var(--tw-space-x-reverse)))"},".space-x-1 > :not([hidden]) ~ :not([hidden])":{"--tw-space-x-reverse":"0","margin-right":"calc(0.25rem * var(--tw-space-x-reverse))","margin-left":"calc(0.25rem * calc(1 - var(--tw-space-x-reverse)))"},".space-x-2 > :not([hidden]) ~ :not([hidden])":{"--tw-space-x-reverse":"0","margin-right":"calc(0.5rem * var(--tw-space-x-reverse))","margin-left":"calc(0.5rem * calc(1 - var(--tw-space-x-reverse)))"},".space-x-3 > :not([hidden]) ~ :not([hidden])":{"--tw-space-x-reverse":"0","margin-right":"calc(0.75rem * var(--tw-space-x-reverse))","margin-left":"calc(0.75rem * calc(1 - var(--tw-space-x-reverse)))"},".space-x-4 > :not([hidden]) ~ :not([hidden])":{"--tw-space-x-reverse":"0","margin-right":"calc(1rem * var(--tw-space-x-reverse))","margin-left":"calc(1rem * calc(1 - var(--tw-space-x-reverse)))"},".space-x-5 > :not([hidden]) ~ :not([hidden])":{"--tw-space-x-reverse":"0","margin-right":"calc(1.25rem * var(--tw-space-x-reverse))","margin-left":"calc(1.25rem * calc(1 - var(--tw-space-x-reverse)))"},".space-x-6 > :not([hidden]) ~ :not([hidden])":{"--tw-space-x-reverse":"0","margin-right":"calc(1.5rem * var(--tw-space-x-reverse))","margin-left":"calc(1.5rem * calc(1 - var(--tw-space-x-reverse)))"},".space-x-7 > :not([hidden]) ~ :not([hidden])":{"--tw-space-x-reverse":"0","margin-right":"calc(1.75rem * var(--tw-space-x-reverse))","margin-left":"calc(1.75rem * calc(1 - var(--tw-space-x-reverse)))"},".space-x-8 > :not([hidden]) ~ :not([hidden])":{"--tw-space-x-reverse":"0","margin-right":"calc(2rem * var(--tw-space-x-reverse))","margin-left":"calc(2rem * calc(1 - var(--tw-space-x-reverse)))"},".space-x-9 > :not([hidden]) ~ :not([hidden])":{"--tw-space-x-reverse":"0","margin-right":"calc(2.25rem * var(--tw-space-x-reverse))","margin-left":"calc(2.25rem * calc(1 - var(--tw-space-x-reverse)))"},".space-x-10 > :not([hidden]) ~ :not([hidden])":{"--tw-space-x-reverse":"0","margin-right":"calc(2.5rem * var(--tw-space-x-reverse))","margin-left":"calc(2.5rem * calc(1 - var(--tw-space-x-reverse)))"},".space-x-11 > :not([hidden]) ~ :not([hidden])":{"--tw-space-x-reverse":"0","margin-right":"calc(2.75rem * var(--tw-space-x-reverse))","margin-left":"calc(2.75rem * calc(1 - var(--tw-space-x-reverse)))"},".space-x-12 > :not([hidden]) ~ :not([hidden])":{"--tw-space-x-reverse":"0","margin-right":"calc(3rem * var(--tw-space-x-reverse))","margin-left":"calc(3rem * calc(1 - var(--tw-space-x-reverse)))"},".space-x-14 > :not([hidden]) ~ :not([hidden])":{"--tw-space-x-reverse":"0","margin-right":"calc(3.5rem * var(--tw-space-x-reverse))","margin-left":"calc(3.5rem * calc(1 - var(--tw-space-x-reverse)))"},".space-x-16 > :not([hidden]) ~ :not([hidden])":{"--tw-space-x-reverse":"0","margin-right":"calc(4rem * var(--tw-space-x-reverse))","margin-left":"calc(4rem * calc(1 - var(--tw-space-x-reverse)))"},".space-x-20 > :not([hidden]) ~ :not([hidden])":{"--tw-space-x-reverse":"0","margin-right":"calc(5rem * var(--tw-space-x-reverse))","margin-left":"calc(5rem * calc(1 - var(--tw-space-x-reverse)))"},".space-x-24 > :not([hidden]) ~ :not([hidden])":{"--tw-space-x-reverse":"0","margin-right":"calc(6rem * var(--tw-space-x-reverse))","margin-left":"calc(6rem * calc(1 - var(--tw-space-x-reverse)))"},".space-x-28 > :not([hidden]) ~ :not([hidden])":{"--tw-space-x-reverse":"0","margin-right":"calc(7rem * var(--tw-space-x-reverse))","margin-left":"calc(7rem * calc(1 - var(--tw-space-x-reverse)))"},".space-x-32 > :not([hidden]) ~ :not([hidden])":{"--tw-space-x-reverse":"0","margin-right":"calc(8rem * var(--tw-space-x-reverse))","margin-left":"calc(8rem * calc(1 - var(--tw-space-x-reverse)))"},".space-x-36 > :not([hidden]) ~ :not([hidden])":{"--tw-space-x-reverse":"0","margin-right":"calc(9rem * var(--tw-space-x-reverse))","margin-left":"calc(9rem * calc(1 - var(--tw-space-x-reverse)))"},".space-x-40 > :not([hidden]) ~ :not([hidden])":{"--tw-space-x-reverse":"0","margin-right":"calc(10rem * var(--tw-space-x-reverse))","margin-left":"calc(10rem * calc(1 - var(--tw-space-x-reverse)))"},".space-x-44 > :not([hidden]) ~ :not([hidden])":{"--tw-space-x-reverse":"0","margin-right":"calc(11rem * var(--tw-space-x-reverse))","margin-left":"calc(11rem * calc(1 - var(--tw-space-x-reverse)))"},".space-x-48 > :not([hidden]) ~ :not([hidden])":{"--tw-space-x-reverse":"0","margin-right":"calc(12rem * var(--tw-space-x-reverse))","margin-left":"calc(12rem * calc(1 - var(--tw-space-x-reverse)))"},".space-x-52 > :not([hidden]) ~ :not([hidden])":{"--tw-space-x-reverse":"0","margin-right":"calc(13rem * var(--tw-space-x-reverse))","margin-left":"calc(13rem * calc(1 - var(--tw-space-x-reverse)))"},".space-x-56 > :not([hidden]) ~ :not([hidden])":{"--tw-space-x-reverse":"0","margin-right":"calc(14rem * var(--tw-space-x-reverse))","margin-left":"calc(14rem * calc(1 - var(--tw-space-x-reverse)))"},".space-x-60 > :not([hidden]) ~ :not([hidden])":{"--tw-space-x-reverse":"0","margin-right":"calc(15rem * var(--tw-space-x-reverse))","margin-left":"calc(15rem * calc(1 - var(--tw-space-x-reverse)))"},".space-x-64 > :not([hidden]) ~ :not([hidden])":{"--tw-space-x-reverse":"0","margin-right":"calc(16rem * var(--tw-space-x-reverse))","margin-left":"calc(16rem * calc(1 - var(--tw-space-x-reverse)))"},".space-x-72 > :not([hidden]) ~ :not([hidden])":{"--tw-space-x-reverse":"0","margin-right":"calc(18rem * var(--tw-space-x-reverse))","margin-left":"calc(18rem * calc(1 - var(--tw-space-x-reverse)))"},".space-x-80 > :not([hidden]) ~ :not([hidden])":{"--tw-space-x-reverse":"0","margin-right":"calc(20rem * var(--tw-space-x-reverse))","margin-left":"calc(20rem * calc(1 - var(--tw-space-x-reverse)))"},".space-x-96 > :not([hidden]) ~ :not([hidden])":{"--tw-space-x-reverse":"0","margin-right":"calc(24rem * var(--tw-space-x-reverse))","margin-left":"calc(24rem * calc(1 - var(--tw-space-x-reverse)))"},".space-x-px > :not([hidden]) ~ :not([hidden])":{"--tw-space-x-reverse":"0","margin-right":"calc(1px * var(--tw-space-x-reverse))","margin-left":"calc(1px * calc(1 - var(--tw-space-x-reverse)))"},".space-x-0\\.5 > :not([hidden]) ~ :not([hidden])":{"--tw-space-x-reverse":"0","margin-right":"calc(0.125rem * var(--tw-space-x-reverse))","margin-left":"calc(0.125rem * calc(1 - var(--tw-space-x-reverse)))"},".space-x-1\\.5 > :not([hidden]) ~ :not([hidden])":{"--tw-space-x-reverse":"0","margin-right":"calc(0.375rem * var(--tw-space-x-reverse))","margin-left":"calc(0.375rem * calc(1 - var(--tw-space-x-reverse)))"},".space-x-2\\.5 > :not([hidden]) ~ :not([hidden])":{"--tw-space-x-reverse":"0","margin-right":"calc(0.625rem * var(--tw-space-x-reverse))","margin-left":"calc(0.625rem * calc(1 - var(--tw-space-x-reverse)))"},".space-x-3\\.5 > :not([hidden]) ~ :not([hidden])":{"--tw-space-x-reverse":"0","margin-right":"calc(0.875rem * var(--tw-space-x-reverse))","margin-left":"calc(0.875rem * calc(1 - var(--tw-space-x-reverse)))"},".space-y-0 > :not([hidden]) ~ :not([hidden])":{"--tw-space-y-reverse":"0","margin-top":"calc(0px * calc(1 - var(--tw-space-y-reverse)))","margin-bottom":"calc(0px * var(--tw-space-y-reverse))"},".space-y-1 > :not([hidden]) ~ :not([hidden])":{"--tw-space-y-reverse":"0","margin-top":"calc(0.25rem * calc(1 - var(--tw-space-y-reverse)))","margin-bottom":"calc(0.25rem * var(--tw-space-y-reverse))"},".space-y-2 > :not([hidden]) ~ :not([hidden])":{"--tw-space-y-reverse":"0","margin-top":"calc(0.5rem * calc(1 - var(--tw-space-y-reverse)))","margin-bottom":"calc(0.5rem * var(--tw-space-y-reverse))"},".space-y-3 > :not([hidden]) ~ :not([hidden])":{"--tw-space-y-reverse":"0","margin-top":"calc(0.75rem * calc(1 - var(--tw-space-y-reverse)))","margin-bottom":"calc(0.75rem * var(--tw-space-y-reverse))"},".space-y-4 > :not([hidden]) ~ :not([hidden])":{"--tw-space-y-reverse":"0","margin-top":"calc(1rem * calc(1 - var(--tw-space-y-reverse)))","margin-bottom":"calc(1rem * var(--tw-space-y-reverse))"},".space-y-5 > :not([hidden]) ~ :not([hidden])":{"--tw-space-y-reverse":"0","margin-top":"calc(1.25rem * calc(1 - var(--tw-space-y-reverse)))","margin-bottom":"calc(1.25rem * var(--tw-space-y-reverse))"},".space-y-6 > :not([hidden]) ~ :not([hidden])":{"--tw-space-y-reverse":"0","margin-top":"calc(1.5rem * calc(1 - var(--tw-space-y-reverse)))","margin-bottom":"calc(1.5rem * var(--tw-space-y-reverse))"},".space-y-7 > :not([hidden]) ~ :not([hidden])":{"--tw-space-y-reverse":"0","margin-top":"calc(1.75rem * calc(1 - var(--tw-space-y-reverse)))","margin-bottom":"calc(1.75rem * var(--tw-space-y-reverse))"},".space-y-8 > :not([hidden]) ~ :not([hidden])":{"--tw-space-y-reverse":"0","margin-top":"calc(2rem * calc(1 - var(--tw-space-y-reverse)))","margin-bottom":"calc(2rem * var(--tw-space-y-reverse))"},".space-y-9 > :not([hidden]) ~ :not([hidden])":{"--tw-space-y-reverse":"0","margin-top":"calc(2.25rem * calc(1 - var(--tw-space-y-reverse)))","margin-bottom":"calc(2.25rem * var(--tw-space-y-reverse))"},".space-y-10 > :not([hidden]) ~ :not([hidden])":{"--tw-space-y-reverse":"0","margin-top":"calc(2.5rem * calc(1 - var(--tw-space-y-reverse)))","margin-bottom":"calc(2.5rem * var(--tw-space-y-reverse))"},".space-y-11 > :not([hidden]) ~ :not([hidden])":{"--tw-space-y-reverse":"0","margin-top":"calc(2.75rem * calc(1 - var(--tw-space-y-reverse)))","margin-bottom":"calc(2.75rem * var(--tw-space-y-reverse))"},".space-y-12 > :not([hidden]) ~ :not([hidden])":{"--tw-space-y-reverse":"0","margin-top":"calc(3rem * calc(1 - var(--tw-space-y-reverse)))","margin-bottom":"calc(3rem * var(--tw-space-y-reverse))"},".space-y-14 > :not([hidden]) ~ :not([hidden])":{"--tw-space-y-reverse":"0","margin-top":"calc(3.5rem * calc(1 - var(--tw-space-y-reverse)))","margin-bottom":"calc(3.5rem * var(--tw-space-y-reverse))"},".space-y-16 > :not([hidden]) ~ :not([hidden])":{"--tw-space-y-reverse":"0","margin-top":"calc(4rem * calc(1 - var(--tw-space-y-reverse)))","margin-bottom":"calc(4rem * var(--tw-space-y-reverse))"},".space-y-20 > :not([hidden]) ~ :not([hidden])":{"--tw-space-y-reverse":"0","margin-top":"calc(5rem * calc(1 - var(--tw-space-y-reverse)))","margin-bottom":"calc(5rem * var(--tw-space-y-reverse))"},".space-y-24 > :not([hidden]) ~ :not([hidden])":{"--tw-space-y-reverse":"0","margin-top":"calc(6rem * calc(1 - var(--tw-space-y-reverse)))","margin-bottom":"calc(6rem * var(--tw-space-y-reverse))"},".space-y-28 > :not([hidden]) ~ :not([hidden])":{"--tw-space-y-reverse":"0","margin-top":"calc(7rem * calc(1 - var(--tw-space-y-reverse)))","margin-bottom":"calc(7rem * var(--tw-space-y-reverse))"},".space-y-32 > :not([hidden]) ~ :not([hidden])":{"--tw-space-y-reverse":"0","margin-top":"calc(8rem * calc(1 - var(--tw-space-y-reverse)))","margin-bottom":"calc(8rem * var(--tw-space-y-reverse))"},".space-y-36 > :not([hidden]) ~ :not([hidden])":{"--tw-space-y-reverse":"0","margin-top":"calc(9rem * calc(1 - var(--tw-space-y-reverse)))","margin-bottom":"calc(9rem * var(--tw-space-y-reverse))"},".space-y-40 > :not([hidden]) ~ :not([hidden])":{"--tw-space-y-reverse":"0","margin-top":"calc(10rem * calc(1 - var(--tw-space-y-reverse)))","margin-bottom":"calc(10rem * var(--tw-space-y-reverse))"},".space-y-44 > :not([hidden]) ~ :not([hidden])":{"--tw-space-y-reverse":"0","margin-top":"calc(11rem * calc(1 - var(--tw-space-y-reverse)))","margin-bottom":"calc(11rem * var(--tw-space-y-reverse))"},".space-y-48 > :not([hidden]) ~ :not([hidden])":{"--tw-space-y-reverse":"0","margin-top":"calc(12rem * calc(1 - var(--tw-space-y-reverse)))","margin-bottom":"calc(12rem * var(--tw-space-y-reverse))"},".space-y-52 > :not([hidden]) ~ :not([hidden])":{"--tw-space-y-reverse":"0","margin-top":"calc(13rem * calc(1 - var(--tw-space-y-reverse)))","margin-bottom":"calc(13rem * var(--tw-space-y-reverse))"},".space-y-56 > :not([hidden]) ~ :not([hidden])":{"--tw-space-y-reverse":"0","margin-top":"calc(14rem * calc(1 - var(--tw-space-y-reverse)))","margin-bottom":"calc(14rem * var(--tw-space-y-reverse))"},".space-y-60 > :not([hidden]) ~ :not([hidden])":{"--tw-space-y-reverse":"0","margin-top":"calc(15rem * calc(1 - var(--tw-space-y-reverse)))","margin-bottom":"calc(15rem * var(--tw-space-y-reverse))"},".space-y-64 > :not([hidden]) ~ :not([hidden])":{"--tw-space-y-reverse":"0","margin-top":"calc(16rem * calc(1 - var(--tw-space-y-reverse)))","margin-bottom":"calc(16rem * var(--tw-space-y-reverse))"},".space-y-72 > :not([hidden]) ~ :not([hidden])":{"--tw-space-y-reverse":"0","margin-top":"calc(18rem * calc(1 - var(--tw-space-y-reverse)))","margin-bottom":"calc(18rem * var(--tw-space-y-reverse))"},".space-y-80 > :not([hidden]) ~ :not([hidden])":{"--tw-space-y-reverse":"0","margin-top":"calc(20rem * calc(1 - var(--tw-space-y-reverse)))","margin-bottom":"calc(20rem * var(--tw-space-y-reverse))"},".space-y-96 > :not([hidden]) ~ :not([hidden])":{"--tw-space-y-reverse":"0","margin-top":"calc(24rem * calc(1 - var(--tw-space-y-reverse)))","margin-bottom":"calc(24rem * var(--tw-space-y-reverse))"},".space-y-px > :not([hidden]) ~ :not([hidden])":{"--tw-space-y-reverse":"0","margin-top":"calc(1px * calc(1 - var(--tw-space-y-reverse)))","margin-bottom":"calc(1px * var(--tw-space-y-reverse))"},".space-y-0\\.5 > :not([hidden]) ~ :not([hidden])":{"--tw-space-y-reverse":"0","margin-top":"calc(0.125rem * calc(1 - var(--tw-space-y-reverse)))","margin-bottom":"calc(0.125rem * var(--tw-space-y-reverse))"},".space-y-1\\.5 > :not([hidden]) ~ :not([hidden])":{"--tw-space-y-reverse":"0","margin-top":"calc(0.375rem * calc(1 - var(--tw-space-y-reverse)))","margin-bottom":"calc(0.375rem * var(--tw-space-y-reverse))"},".space-y-2\\.5 > :not([hidden]) ~ :not([hidden])":{"--tw-space-y-reverse":"0","margin-top":"calc(0.625rem * calc(1 - var(--tw-space-y-reverse)))","margin-bottom":"calc(0.625rem * var(--tw-space-y-reverse))"},".space-y-3\\.5 > :not([hidden]) ~ :not([hidden])":{"--tw-space-y-reverse":"0","margin-top":"calc(0.875rem * calc(1 - var(--tw-space-y-reverse)))","margin-bottom":"calc(0.875rem * var(--tw-space-y-reverse))"},".space-y-reverse > :not([hidden]) ~ :not([hidden])":{"--tw-space-y-reverse":"1"},".space-x-reverse > :not([hidden]) ~ :not([hidden])":{"--tw-space-x-reverse":"1"}},sort:function(a){return(0,l.nR)(a)},transformSelector:function(a){return(0,e.kt)(d.Fragment,null,a.split(">").shift().trim().replace(/^\./,"").replace(/\\/g,"")," ",(0,e.kt)("span",{className:"ml-1 text-purple-300"},"> * + *"))},transformProperties:function(a){var b,c=a.properties;for(var d in c)d.startsWith("--")?Object.keys(c).length>1&&delete c[d]:c[d]=(null===(b=c[d].match(/([\d.]+[a-z]+) /))|| void 0===b?void 0:b[1])||c[d];return delete c["margin-right"],delete c["margin-bottom"],c}},meta:{title:"Space Between",description:"Utilities for controlling the space between child elements."},slug:"space",tableOfContents:[{title:"Basic usage",slug:"basic-usage",children:[{title:"Add horizontal space between children",slug:"add-horizontal-space-between-children",children:[]},{title:"Add vertical space between children",slug:"add-vertical-space-between-children",children:[]},{title:"Reversing children order",slug:"reversing-children-order",children:[]},{title:"Using negative values",slug:"using-negative-values",children:[]}]},{title:"Limitations",slug:"limitations",children:[{title:"Cannot be paired with divide utilities",slug:"cannot-be-paired-with-divide-utilities",children:[]}]},{title:"Applying conditionally",slug:"applying-conditionally",children:[{title:"Hover, focus, and other states",slug:"hover-focus-and-other-states",children:[]},{title:"Breakpoints and media queries",slug:"breakpoints-and-media-queries",children:[]}]},{title:"Using custom values",slug:"using-custom-values",children:[{title:"Customizing your theme",slug:"customizing-your-theme",children:[]},{title:"Arbitrary values",slug:"arbitrary-values",children:[]}]}]},s=k.X_;function t(a){var b=a.components,c=function(a,b){if(null==a)return{};var c,d,e=function(a,b){if(null==a)return{};var c,d,e={},f=Object.keys(a);for(d=0;d<f.length;d++)c=f[d],b.indexOf(c)>=0||(e[c]=a[c]);return e}(a,b);if(Object.getOwnPropertySymbols){var f=Object.getOwnPropertySymbols(a);for(d=0;d<f.length;d++)c=f[d],!(b.indexOf(c)>=0)&&Object.prototype.propertyIsEnumerable.call(a,c)&&(e[c]=a[c])}return e}(a,["components"]);return(0,e.kt)(s,Object.assign({},r,c,{components:b,mdxType:"MDXLayout"}),(0,e.kt)(h.X,{level:2,id:"basic-usage",nextElement:{type:"heading",depth:3}},"Basic usage"),(0,e.kt)(h.X,{level:3,id:"add-horizontal-space-between-children",nextElement:{type:"paragraph"}},"Add horizontal space between children"),(0,e.kt)("p",null,"Control the horizontal space between elements using the ",(0,e.kt)("inlineCode",{parentName:"p"},"space-x-{amount}")," utilities."),(0,e.kt)(i.e,{containerClassName:"mt-4 -mb-3",html:"\n  <div class=\"flex justify-start font-mono text-white text-sm font-bold leading-6\">\n    <div class=\"flex space-x-4 bg-stripes-fuchsia rounded-lg\">\n      <div class=\"w-14 h-14 flex items-center justify-center shadow-lg rounded-lg bg-fuchsia-500\">01</div>\n      <div class=\"w-14 h-14 flex items-center justify-center shadow-lg rounded-lg bg-fuchsia-500\">02</div>\n      <div class=\"w-14 h-14 flex items-center justify-center shadow-lg rounded-lg bg-fuchsia-500\">03</div>\n    </div>\n  </div>\n"}),(0,e.kt)("pre",Object.assign({},{className:"language-html"}),(0,e.kt)("code",Object.assign({parentName:"pre"},{className:"language-html"}),(0,e.kt)("span",Object.assign({parentName:"code"},{className:"token tag"}),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token tag"}),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"<"),"div")," ",(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token attr-name"}),"class"),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token attr-value"}),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token punctuation attr-equals"}),"="),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"\""),"flex ",(0,e.kt)("span",Object.assign({parentName:"span"},{className:"code-highlight bg-code-highlight"}),"space-x-4")," ...",(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"\"")),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),">")),"\n  ",(0,e.kt)("span",Object.assign({parentName:"code"},{className:"token tag"}),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token tag"}),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"<"),"div"),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),">")),"01",(0,e.kt)("span",Object.assign({parentName:"code"},{className:"token tag"}),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token tag"}),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"</"),"div"),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),">")),"\n  ",(0,e.kt)("span",Object.assign({parentName:"code"},{className:"token tag"}),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token tag"}),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"<"),"div"),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),">")),"02",(0,e.kt)("span",Object.assign({parentName:"code"},{className:"token tag"}),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token tag"}),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"</"),"div"),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),">")),"\n  ",(0,e.kt)("span",Object.assign({parentName:"code"},{className:"token tag"}),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token tag"}),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"<"),"div"),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),">")),"03",(0,e.kt)("span",Object.assign({parentName:"code"},{className:"token tag"}),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token tag"}),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"</"),"div"),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),">")),"\n",(0,e.kt)("span",Object.assign({parentName:"code"},{className:"token tag"}),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token tag"}),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"</"),"div"),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),">")))),(0,e.kt)(h.X,{level:3,id:"add-vertical-space-between-children",nextElement:{type:"paragraph"}},"Add vertical space between children"),(0,e.kt)("p",null,"Control the vertical space between elements using the ",(0,e.kt)("inlineCode",{parentName:"p"},"space-y-{amount}")," utilities."),(0,e.kt)(i.e,{containerClassName:"mt-4 -mb-3",html:"\n  <div class=\"flex flex-col justify-center text-center w-full font-mono text-white text-sm font-bold leading-6\">\n    <div class=\"flex flex-col space-y-4 bg-stripes-indigo rounded-lg\">\n      <div class=\"p-4 flex items-center justify-center shadow-lg rounded-lg bg-indigo-500\">01</div>\n      <div class=\"p-4 flex items-center justify-center shadow-lg rounded-lg bg-indigo-500\">02</div>\n      <div class=\"p-4 flex items-center justify-center shadow-lg rounded-lg bg-indigo-500\">03</div>\n    </div>\n  </div>\n"}),(0,e.kt)("pre",Object.assign({},{className:"language-html"}),(0,e.kt)("code",Object.assign({parentName:"pre"},{className:"language-html"}),(0,e.kt)("span",Object.assign({parentName:"code"},{className:"token tag"}),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token tag"}),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"<"),"div")," ",(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token attr-name"}),"class"),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token attr-value"}),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token punctuation attr-equals"}),"="),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"\""),"flex flex-col ",(0,e.kt)("span",Object.assign({parentName:"span"},{className:"code-highlight bg-code-highlight"}),"space-y-4")," ...",(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"\"")),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),">")),"\n  ",(0,e.kt)("span",Object.assign({parentName:"code"},{className:"token tag"}),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token tag"}),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"<"),"div"),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),">")),"01",(0,e.kt)("span",Object.assign({parentName:"code"},{className:"token tag"}),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token tag"}),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"</"),"div"),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),">")),"\n  ",(0,e.kt)("span",Object.assign({parentName:"code"},{className:"token tag"}),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token tag"}),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"<"),"div"),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),">")),"02",(0,e.kt)("span",Object.assign({parentName:"code"},{className:"token tag"}),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token tag"}),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"</"),"div"),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),">")),"\n  ",(0,e.kt)("span",Object.assign({parentName:"code"},{className:"token tag"}),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token tag"}),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"<"),"div"),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),">")),"03",(0,e.kt)("span",Object.assign({parentName:"code"},{className:"token tag"}),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token tag"}),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"</"),"div"),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),">")),"\n",(0,e.kt)("span",Object.assign({parentName:"code"},{className:"token tag"}),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token tag"}),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"</"),"div"),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),">")))),(0,e.kt)(h.X,{level:3,id:"reversing-children-order",nextElement:{type:"paragraph"}},"Reversing children order"),(0,e.kt)("p",null,"If your elements are in reverse order (using say ",(0,e.kt)("inlineCode",{parentName:"p"},"flex-row-reverse")," or ",(0,e.kt)("inlineCode",{parentName:"p"},"flex-col-reverse"),"), use the ",(0,e.kt)("inlineCode",{parentName:"p"},"space-x-reverse")," or ",(0,e.kt)("inlineCode",{parentName:"p"},"space-y-reverse")," utilities to ensure the space is added to the correct side of each element."),(0,e.kt)(i.e,{containerClassName:"mt-4 -mb-3",html:"\n  <div class=\"flex justify-end font-mono text-white text-sm font-bold leading-6\">\n    <div class=\"flex flex-row-reverse space-x-4 space-x-reverse bg-stripes-cyan rounded-lg\">\n      <div class=\"w-14 h-14 flex items-center justify-center shadow-lg rounded-lg bg-cyan-500\">01</div>\n      <div class=\"w-14 h-14 flex items-center justify-center shadow-lg rounded-lg bg-cyan-500\">02</div>\n      <div class=\"w-14 h-14 flex items-center justify-center shadow-lg rounded-lg bg-cyan-500\">03</div>\n    </div>\n  </div>\n"}),(0,e.kt)("pre",Object.assign({},{className:"language-html"}),(0,e.kt)("code",Object.assign({parentName:"pre"},{className:"language-html"}),(0,e.kt)("span",Object.assign({parentName:"code"},{className:"token tag"}),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token tag"}),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"<"),"div")," ",(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token attr-name"}),"class"),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token attr-value"}),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token punctuation attr-equals"}),"="),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"\""),"flex flex-row-reverse ",(0,e.kt)("span",Object.assign({parentName:"span"},{className:"code-highlight bg-code-highlight"}),"space-x-4 space-x-reverse")," ...",(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"\"")),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),">")),"\n  ",(0,e.kt)("span",Object.assign({parentName:"code"},{className:"token tag"}),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token tag"}),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"<"),"div"),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),">")),"01",(0,e.kt)("span",Object.assign({parentName:"code"},{className:"token tag"}),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token tag"}),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"</"),"div"),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),">")),"\n  ",(0,e.kt)("span",Object.assign({parentName:"code"},{className:"token tag"}),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token tag"}),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"<"),"div"),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),">")),"02",(0,e.kt)("span",Object.assign({parentName:"code"},{className:"token tag"}),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token tag"}),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"</"),"div"),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),">")),"\n  ",(0,e.kt)("span",Object.assign({parentName:"code"},{className:"token tag"}),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token tag"}),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"<"),"div"),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),">")),"03",(0,e.kt)("span",Object.assign({parentName:"code"},{className:"token tag"}),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token tag"}),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"</"),"div"),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),">")),"\n",(0,e.kt)("span",Object.assign({parentName:"code"},{className:"token tag"}),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token tag"}),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"</"),"div"),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),">")))),(0,e.kt)(h.X,{level:3,id:"using-negative-values",nextElement:{type:"paragraph"}},"Using negative values"),(0,e.kt)("p",null,"To use a negative space value, prefix the class name with a dash to convert it to a negative value."),(0,e.kt)("pre",Object.assign({},{className:"language-html"}),(0,e.kt)("code",Object.assign({parentName:"pre"},{className:"language-html"}),(0,e.kt)("span",Object.assign({parentName:"code"},{className:"token tag"}),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token tag"}),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"<"),"div")," ",(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token attr-name"}),"class"),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token attr-value"}),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token punctuation attr-equals"}),"="),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"\""),"flex ",(0,e.kt)("span",Object.assign({parentName:"span"},{className:"code-highlight bg-code-highlight"}),"-space-x-4")," ...",(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"\"")),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),">")),"\n  ",(0,e.kt)("span",Object.assign({parentName:"code"},{className:"token comment"}),"<!-- ... -->"),"\n",(0,e.kt)("span",Object.assign({parentName:"code"},{className:"token tag"}),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token tag"}),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"</"),"div"),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),">")))),(0,e.kt)(h.X,{level:2,id:"limitations",nextElement:{type:"paragraph"}},"Limitations"),(0,e.kt)("p",null,"These utilities are really just a shortcut for adding margin to all-but-the-first-item in a group, and aren’t designed to handle complex cases like grids, layouts that wrap, or situations where the children are rendered in a complex custom order rather than their natural DOM order."),(0,e.kt)("p",null,"For those situations, it’s better to use the ",(0,e.kt)("a",Object.assign({parentName:"p"},{href:"https://tailwindcss.com/docs/gap"}),"gap utilities")," when possible, or add margin to every element with a matching negative margin on the parent:"),(0,e.kt)("pre",Object.assign({},{className:"language-html"}),(0,e.kt)("code",Object.assign({parentName:"pre"},{className:"language-html"}),(0,e.kt)("span",Object.assign({parentName:"code"},{className:"token tag"}),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token tag"}),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"<"),"div")," ",(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token attr-name"}),"class"),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token attr-value"}),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token punctuation attr-equals"}),"="),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"\""),"flow-root",(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"\"")),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),">")),"\n  ",(0,e.kt)("span",Object.assign({parentName:"code"},{className:"token tag"}),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token tag"}),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"<"),"div")," ",(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token attr-name"}),"class"),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token attr-value"}),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token punctuation attr-equals"}),"="),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"\""),"-m-2 flex flex-wrap",(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"\"")),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),">")),"\n    ",(0,e.kt)("span",Object.assign({parentName:"code"},{className:"token tag"}),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token tag"}),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"<"),"div")," ",(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token attr-name"}),"class"),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token attr-value"}),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token punctuation attr-equals"}),"="),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"\""),"m-2 ...",(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"\"")),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),">")),(0,e.kt)("span",Object.assign({parentName:"code"},{className:"token tag"}),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token tag"}),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"</"),"div"),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),">")),"\n    ",(0,e.kt)("span",Object.assign({parentName:"code"},{className:"token tag"}),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token tag"}),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"<"),"div")," ",(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token attr-name"}),"class"),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token attr-value"}),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token punctuation attr-equals"}),"="),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"\""),"m-2 ...",(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"\"")),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),">")),(0,e.kt)("span",Object.assign({parentName:"code"},{className:"token tag"}),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token tag"}),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"</"),"div"),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),">")),"\n    ",(0,e.kt)("span",Object.assign({parentName:"code"},{className:"token tag"}),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token tag"}),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"<"),"div")," ",(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token attr-name"}),"class"),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token attr-value"}),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token punctuation attr-equals"}),"="),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"\""),"m-2 ...",(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"\"")),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),">")),(0,e.kt)("span",Object.assign({parentName:"code"},{className:"token tag"}),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token tag"}),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"</"),"div"),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),">")),"\n  ",(0,e.kt)("span",Object.assign({parentName:"code"},{className:"token tag"}),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token tag"}),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"</"),"div"),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),">")),"\n",(0,e.kt)("span",Object.assign({parentName:"code"},{className:"token tag"}),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token tag"}),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"</"),"div"),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),">")))),(0,e.kt)(h.X,{level:3,id:"cannot-be-paired-with-divide-utilities",nextElement:{type:"paragraph"}},"Cannot be paired with divide utilities"),(0,e.kt)("p",null,"The ",(0,e.kt)("inlineCode",{parentName:"p"},"space-*")," utilities are not designed to work together with the ",(0,e.kt)("a",Object.assign({parentName:"p"},{href:"https://tailwindcss.com/docs/divide-width"}),"divide utilities"),". For those situations, consider adding margin/padding utilities to the children instead."),(0,e.kt)("hr",null),(0,e.kt)(q,{level:2,id:"applying-conditionally",nextElement:{type:"heading",depth:3},ignore:!0,mdxType:"Heading"},"Applying conditionally"),(0,e.kt)(q,{level:3,id:"hover-focus-and-other-states",nextElement:{type:"jsx"},ignore:!0,mdxType:"Heading"},"Hover, focus, and other states"),(0,e.kt)(o.k,{defaultClass:"flex space-x-2",featuredClass:"space-x-8",mdxType:"HoverFocusAndOtherStates"}),(0,e.kt)(q,{level:3,id:"breakpoints-and-media-queries",nextElement:{type:"jsx"},ignore:!0,mdxType:"Heading"},"Breakpoints and media queries"),(0,e.kt)(n.p,{defaultClass:"flex space-x-2",featuredClass:"space-x-8",mdxType:"BreakpointsAndMediaQueries"}),(0,e.kt)("hr",null),(0,e.kt)(h.X,{level:2,id:"using-custom-values",nextElement:{type:"heading",depth:3}},"Using custom values"),(0,e.kt)(h.X,{level:3,id:"customizing-your-theme",nextElement:{type:"paragraph"}},"Customizing your theme"),(0,e.kt)("p",null,"By default, Tailwind’s space scale uses the ",(0,e.kt)(f.default,{href:"/docs/customizing-spacing",passHref:!0},(0,e.kt)("a",null,"default spacing scale")),". You can customize your spacing scale by editing ",(0,e.kt)("inlineCode",{parentName:"p"},"theme.spacing")," or ",(0,e.kt)("inlineCode",{parentName:"p"},"theme.extend.spacing")," in your ",(0,e.kt)("inlineCode",{parentName:"p"},"tailwind.config.js")," file."),(0,e.kt)(g.M,{filename:"tailwind.config.js"},(0,e.kt)("pre",Object.assign({},{className:"language-diff-js"}),(0,e.kt)("code",Object.assign({parentName:"pre"},{className:"language-diff-js"}),(0,e.kt)("span",Object.assign({parentName:"code"},{className:"token language-js unchanged"}),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token plain"}),"module"),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"."),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token property-access"}),"exports"),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token plain"})," "),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token operator"}),"="),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token plain"})," "),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"{"),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token plain"}))),(0,e.kt)("span",Object.assign({parentName:"code"},{className:"token language-js unchanged"}),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token plain"}),"  theme"),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token operator"}),":"),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token plain"})," "),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"{"),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token plain"}))),(0,e.kt)("span",Object.assign({parentName:"code"},{className:"token language-js unchanged"}),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token plain"}),"    extend"),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token operator"}),":"),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token plain"})," "),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"{"),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token plain"}))),(0,e.kt)("span",Object.assign({parentName:"code"},{className:"token language-js inserted"}),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token plain"}),"      spacing"),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token operator"}),":"),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token plain"})," "),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"{"),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token plain"}))),(0,e.kt)("span",Object.assign({parentName:"code"},{className:"token language-js inserted"}),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token plain"}),"        "),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token string"}),"'5px'"),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token operator"}),":"),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token plain"})," "),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token string"}),"'5px'"),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),","),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token plain"}))),(0,e.kt)("span",Object.assign({parentName:"code"},{className:"token language-js inserted"}),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token plain"}),"      "),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"}"),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token plain"}))),(0,e.kt)("span",Object.assign({parentName:"code"},{className:"token language-js unchanged"}),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token plain"}),"    "),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"}"),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token plain"}))),(0,e.kt)("span",Object.assign({parentName:"code"},{className:"token language-js unchanged"}),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token plain"}),"  "),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"}"),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token plain"}))),(0,e.kt)("span",Object.assign({parentName:"code"},{className:"token language-js unchanged"}),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token plain"})),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"}"))))),(0,e.kt)("p",null,"Alternatively, you can customize just the space scale by editing ",(0,e.kt)("inlineCode",{parentName:"p"},"theme.space")," or ",(0,e.kt)("inlineCode",{parentName:"p"},"theme.extend.space")," in your ",(0,e.kt)("inlineCode",{parentName:"p"},"tailwind.config.js")," file."),(0,e.kt)(g.M,{filename:"tailwind.config.js"},(0,e.kt)("pre",Object.assign({},{className:"language-diff-js"}),(0,e.kt)("code",Object.assign({parentName:"pre"},{className:"language-diff-js"}),(0,e.kt)("span",Object.assign({parentName:"code"},{className:"token language-js unchanged"}),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token plain"}),"module"),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"."),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token property-access"}),"exports"),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token plain"})," "),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token operator"}),"="),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token plain"})," "),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"{"),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token plain"}))),(0,e.kt)("span",Object.assign({parentName:"code"},{className:"token language-js unchanged"}),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token plain"}),"  theme"),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token operator"}),":"),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token plain"})," "),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"{"),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token plain"}))),(0,e.kt)("span",Object.assign({parentName:"code"},{className:"token language-js unchanged"}),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token plain"}),"    extend"),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token operator"}),":"),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token plain"})," "),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"{"),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token plain"}))),(0,e.kt)("span",Object.assign({parentName:"code"},{className:"token language-js inserted"}),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token plain"}),"      space"),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token operator"}),":"),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token plain"})," "),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"{"),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token plain"}))),(0,e.kt)("span",Object.assign({parentName:"code"},{className:"token language-js inserted"}),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token plain"}),"        "),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token string"}),"'5px'"),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token operator"}),":"),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token plain"})," "),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token string"}),"'5px'"),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),","),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token plain"}))),(0,e.kt)("span",Object.assign({parentName:"code"},{className:"token language-js inserted"}),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token plain"}),"      "),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"}"),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token plain"}))),(0,e.kt)("span",Object.assign({parentName:"code"},{className:"token language-js unchanged"}),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token plain"}),"    "),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"}"),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token plain"}))),(0,e.kt)("span",Object.assign({parentName:"code"},{className:"token language-js unchanged"}),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token plain"}),"  "),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"}"),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token plain"}))),(0,e.kt)("span",Object.assign({parentName:"code"},{className:"token language-js unchanged"}),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token plain"})),(0,e.kt)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"}"))))),(0,e.kt)("p",null,"Learn more about customizing the default theme in the ",(0,e.kt)(f.default,{href:"/docs/theme#customizing-the-default-theme",passHref:!0},(0,e.kt)("a",null,"theme customization"))," documentation."),(0,e.kt)(h.X,{level:3,id:"arbitrary-values",nextElement:{type:"jsx"}},"Arbitrary values"),(0,e.kt)(m.k,{property:"space-{x|y}",featuredClass:"space-y-[5px]",mdxType:"ArbitraryValues"}))}t.isMDXComponent=!0,t.layoutProps=r},59533:function(a,b,c){"use strict";c.d(b,{M:function(){return f}});var d=c(85893),e=c(6774);function f(a){var b=a.filename,c=a.children;return(0,d.jsxs)("div",{className:"mt-5 mb-8 first:mt-0 last:mb-0 pt-2 bg-gray-800 rounded-xl shadow-lg overflow-hidden",children:[(0,d.jsx)(e.n,{primary:{name:b},showTabMarkers:!1}),(0,d.jsx)("div",{className:"children:my-0",children:c})]})}},83434:function(a,b,c){"use strict";c.d(b,{e:function(){return l}});var d=c(85893),e=c(86010),f=c(3605),g=c(67294);function h(a,b,c){return b in a?Object.defineProperty(a,b,{value:c,enumerable:!0,configurable:!0,writable:!0}):a[b]=c,a}function i(a){for(var b=1;b<arguments.length;b++){var c=null!=arguments[b]?arguments[b]:{},d=Object.keys(c);"function"==typeof Object.getOwnPropertySymbols&&(d=d.concat(Object.getOwnPropertySymbols(c).filter(function(a){return Object.getOwnPropertyDescriptor(c,a).enumerable}))),d.forEach(function(b){h(a,b,c[b])})}return a}var j={none:"",md:"p-8"};function k(a){var b=a.as,c=a.style,f=a.padding,g=a.p,h=a.className,k=a.containerClassName,l=a.html,m=a.children,n=a.hint,o=null!=f?f:void 0===g?"md":g,p=j[o];if(void 0===p)throw Error("Invalid padding value: ".concat(JSON.stringify(o)));return(0,d.jsxs)("div",{className:k,children:[void 0!==n&&(0,d.jsxs)("div",{className:"not-prose mb-4 flex space-x-2",children:[(0,d.jsx)("svg",{className:"flex-none w-5 h-5 text-gray-400",viewBox:"0 0 20 20",fill:"none","aria-hidden":"true",children:(0,d.jsx)("path",{d:"m9.813 9.25.346-5.138a1.276 1.276 0 0 0-2.54-.235L6.75 11.25 5.147 9.327a1.605 1.605 0 0 0-2.388-.085.018.018 0 0 0-.004.019l1.98 4.87a5 5 0 0 0 4.631 3.119h3.885a4 4 0 0 0 4-4v-1a3 3 0 0 0-3-3H9.813ZM3 5s.35-.47 1.25-.828m9.516-.422c2.078.593 3.484 1.5 3.484 1.5",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})}),(0,d.jsx)("p",{className:"text-gray-700 text-sm font-medium",children:n})]}),(0,d.jsxs)(void 0===b?"div":b,{style:i({backgroundPosition:"10px 10px"},c),className:"not-prose relative bg-grid-gray-100 bg-gray-50 rounded-xl overflow-hidden",children:[(0,d.jsx)("div",{className:"absolute inset-0 bg-gradient-to-b from-gray-50 opacity-60"}),(0,d.jsx)("div",i({className:(0,e.Z)("relative rounded-xl overflow-auto",p,h)},l?{dangerouslySetInnerHTML:{__html:l}}:{children:m})),(0,d.jsx)("div",{className:"absolute inset-0 pointer-events-none border border-black/5 rounded-xl"})]})]})}function l(a){return a.resizable?(0,d.jsx)(m,i({},a)):(0,d.jsx)(k,i({},a))}function m(a){var b=(0,g.useRef)(),c=(0,f.c$)(0),e=(0,g.useRef)(),h=(0,g.useRef)();return(0,g.useEffect)(function(){var a=new window.ResizeObserver(function(){c.set(0)});return a.observe(b.current),function(){a.disconnect()}},[]),(0,g.useEffect)(function(){h.current.onselectstart=function(){return!1}},[]),(0,d.jsxs)("div",{ref:b,className:"relative",children:[(0,d.jsx)(k,i({as:f.ww.div,style:{marginRight:(0,f.Hm)(c,function(a){return-a})}},a)),(0,d.jsx)("div",{ref:e,className:"absolute inset-y-0 right-[-1.375rem] left-80 ml-4 pointer-events-none",children:(0,d.jsx)(f.ww.div,{ref:h,drag:"x",_dragX:c,dragMomentum:!1,dragElastic:0,dragConstraints:e,className:"pointer-events-auto absolute top-1/2 right-0 -mt-6 p-2 hidden md:block cursor-ew-resize",style:{x:c},onDragStart:function(){document.documentElement.classList.add("dragging-ew")},onDragEnd:function(){document.documentElement.classList.remove("dragging-ew")},children:(0,d.jsx)("div",{className:"w-1.5 h-8 bg-gray-500/60 rounded-full"})})})]})}},6774:function(a,b,c){"use strict";c.d(b,{n:function(){return f}});var d=c(85893),e=c(86010);function f(a){var b=a.primary,c=a.secondary,f=a.showTabMarkers,g=a.side,h=a.children;return(0,d.jsxs)("div",{className:"flex text-gray-400 text-xs leading-6",children:[(0,d.jsxs)("div",{className:"flex-none text-sky-300 border-t border-b border-t-transparent border-b-sky-300 px-4 py-1 flex items-center",children:[b.name,(void 0===f||f)&&(b.saved?(0,d.jsx)("svg",{viewBox:"0 0 4 4",className:"ml-2.5 flex-none w-1 h-1 text-gray-500 overflow-visible",children:(0,d.jsx)("path",{d:"M-1 -1L5 5M5 -1L-1 5",fill:"none",stroke:"currentColor",strokeLinecap:"round"})}):(0,d.jsx)("div",{className:"ml-2.5 flex-none w-1 h-1 rounded-full bg-current"}))]}),(0,d.jsxs)("div",{className:(0,e.Z)("flex-auto flex items-center bg-gray-700/50 border border-gray-500/30","left"===g?"rounded-tl lg:rounded-tr":"rounded-tl"),children:[(void 0===c?[]:c).map(function(a){var b=a.name,c=a.open,f=a.className;return(0,d.jsx)("div",{className:(0,e.Z)("px-4 py-1 border-r border-gray-200/5",f,{italic:!(void 0===c||c)}),children:b},b)}),h&&(0,d.jsx)("div",{className:"flex-auto flex items-center justify-end px-4 space-x-4",children:h})]})]})}},83629:function(a,b,c){"use strict";c.d(b,{nR:function(){return f},Pg:function(){return g}});var d=c(71407);function e(a){return(function(a){if(Array.isArray(a)){for(var b=0,c=new Array(a.length);b<a.length;b++)c[b]=a[b];return c}})(a)||(function(a){if(Symbol.iterator in Object(a)||"[object Arguments]"===Object.prototype.toString.call(a))return Array.from(a)})(a)||(function(){throw new TypeError("Invalid attempt to spread non-iterable instance")})()}function f(a){return e(a).sort(function(a,b){a=a.endsWith("-px")?a.replace(/-px$/,"-0.25"):a,b=b.endsWith("-px")?b.replace(/-px$/,"-0.25"):b;var c=a.split(/\s+/)[0].replace(/\\/g,"").match(/-([0-9.]+)$/);c=null===c?NaN:parseFloat(c[1]);var d=b.split(/\s+/)[0].replace(/\\/g,"").match(/-([0-9.]+)$/);return(d=null===d?NaN:parseFloat(d[1]),isNaN(c)&&isNaN(d))?0:isNaN(c)?1:isNaN(d)?-1:c-d})}function g(a){return e(a).sort(function(a,b){a=a.endsWith("-px")?a.replace(/-px$/,"-0.25"):a,b=b.endsWith("-px")?b.replace(/-px$/,"-0.25"):b;var c=a.split(/\s+/)[0].replace(/\\/g,"").match(/-([0-9.]+)$/);c=null===c?NaN:parseFloat(c[1]);var d=b.split(/\s+/)[0].replace(/\\/g,"").match(/-([0-9.]+)$/);return(d=null===d?NaN:parseFloat(d[1]),isNaN(c)&&isNaN(d))?0:isNaN(c)?-1:isNaN(d)?1:c-d})}c.n(d)}},function(a){a.O(0,[9774,3430,6401,4756,6852,2474,4713,2428,2888,179],function(){return a(a.s=77925)}),_N_E=a.O()}])