{"componentChunkName":"component---src-templates-tailwindclass-js","path":"/tailwindcss/classes/tailwind-border-spacing/","result":{"data":{"site":{"siteMetadata":{"title":"Resources to help developers | Contrast | Devwares","docsLocation":""}},"mdx":{"fields":{"id":"ee01610c-e679-5005-95b6-7df3185e1079","title":"Tailwind CSS Border Spacing","slug":"/classes/tailwind-border-spacing/"},"body":"var _excluded = [\"components\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }\n/* @jsxRuntime classic */\n/* @jsx mdx */\n\nvar _frontmatter = {\n  \"lastUpdated\": \"8 May 2024\",\n  \"title\": \"Tailwind CSS Border Spacing\",\n  \"metaTitle\": \"Tailwind border spacing\",\n  \"metaDescription\": \"The tailwind border spacing utility class allows you to control the spacing between cells in a table or the spacing between images in a grid layout.\",\n  \"canonicalUrl\": \"https://windframe.dev/tailwind/classes/tailwind-border-spacing\"\n};\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n    props = _objectWithoutProperties(_ref, _excluded);\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"h1\", null, \"Tailwind Border Spacing\"), mdx(\"p\", null, \"The tailwind border-spacing utility class allows you to control the spacing between cells in a table or the spacing between images in a grid layout. With Tailwind's border-spacing class, you can easily adjust the spacing to create the desired visual separation.\"), mdx(\"h2\", null, \"Applying Tailwind Border Spacing\"), mdx(\"p\", null, \"To apply border spacing to a table or grid layout, you can use the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"border-spacing-{value}\"), \" utility class, where {value} represents the desired spacing value. Here are the available options:\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"border-spacing-0\"), \": No spacing between cells or images (default).\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"border-spacing-2\"), \": Spacing of 2 units (e.g., 0.5rem or 8px).\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"border-spacing-4\"), \": Spacing of 4 units (e.g., 1rem or 16px).\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"border-spacing-8\"), \": Spacing of 8 units (e.g., 2rem or 32px). -\", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"border-spacing-px\"), \": Spacing of 1 pixel.\")), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-html\"\n  }, \"<table class=\\\"border-collapse border-spacing-3\\\">\\n  <!-- Table content here -->\\n</table>\\n\")), mdx(\"h2\", null, \"Preview\"), mdx(\"div\", {\n    className: \"rounded-t-xl overflow-hidden bg-blue-100 p-10\"\n  }, mdx(\"table\", {\n    className: \"border-separate border-spacing-3 w-full border border-blue-400 bg-white text-sm shadow-sm\"\n  }, mdx(\"thead\", {\n    className: \"bg-blue-50\"\n  }, mdx(\"tr\", null, mdx(\"th\", {\n    className: \"w-1/2 border border-blue-300 dark:border-blue-600 font-semibold p-4 text-blue-900 dark:text-blue-200 text-left\"\n  }, \"Country\"), mdx(\"th\", {\n    className: \"w-1/2 border border- blue-300 dark:border-blue-600 font-semibold p-4 text-blue-900 dark:text-blue-200 text-left\"\n  }, \"Capital\"))), mdx(\"tbody\", null, mdx(\"tr\", null, mdx(\"td\", {\n    className: \"border border-blue-300 dark:border-blue-700 p-4 text-blue-500 dark:text-blue-400\"\n  }, \"USA\"), mdx(\"td\", {\n    className: \"border border-blue-300 dark:border-blue-700 p-4 text-blue-500 dark:text-blue-400\"\n  }, \"Washington, D.C.\")), mdx(\"tr\", null, mdx(\"td\", {\n    className: \"border border-blue-300 p-4 text-blue-500 dark:text-slate-400\"\n  }, \"Australia\"), mdx(\"td\", {\n    className: \"border border-blue-300 dark:border-blue-700 p-4 text-blue-500\"\n  }, \"Canberra\")), mdx(\"tr\", null, mdx(\"td\", {\n    className: \"border border-blue-300 p-4 text-blue-500\"\n  }, \"China\"), mdx(\"td\", {\n    className: \"border border-blue-300 p-4 text-blue-500\"\n  }, \"Beijing\"))))), mdx(\"h2\", null, \"Responsive Tailwind Border Spacing\"), mdx(\"p\", null, \"Tailwind CSS allows you to apply border spacing classes responsively at different breakpoints. To use responsive tailwind border spacing classes, you can append the breakpoint prefix to the utility class. For example, \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"md:border-spacing-8\"), \" applies a spacing of 8 units starting from the medium breakpoint and above.\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-html\"\n  }, \"<table class=\\\"border-collapse border-spacing-4 md:border-spacing-8\\\">\\n  <!-- Table content here -->\\n</table>\\n\")), mdx(\"p\", null, \"In the above example, the table has a spacing of 4 units by default (\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"border-spacing-4\"), \"), but starting from the medium breakpoint and above, the spacing is increased to 8 units (\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"md:border-spacing-8\"), \").\"), mdx(\"h2\", null, \"Tailwind Border Spacing Class Table\"), mdx(\"table\", null, mdx(\"thead\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"thead\"\n  }, mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Class\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Properties\"))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-spacing-0\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-spacing: 0px 0px;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-spacing-x-0\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-spacing: 0px var(--tw-border-spacing-y);\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-spacing-y-0\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-spacing: var(--tw-border-spacing-x) 0px;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-spacing-px\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-spacing: 1px 1px;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-spacing-x-px\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-spacing: 1px var(--tw-border-spacing-y);\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-spacing-y-px\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-spacing: var(--tw-border-spacing-x) 1px;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-spacing-0.5\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-spacing: 0.125rem 0.125rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-spacing-x-0.5\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-spacing: 0.125rem var(--tw-border-spacing-y);\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-spacing-y-0.5\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-spacing: var(--tw-border-spacing-x) 0.125rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-spacing-1\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-spacing: 0.25rem 0.25rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-spacing-x-1\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-spacing: 0.25rem var(--tw-border-spacing-y);\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-spacing-y-1\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-spacing: var(--tw-border-spacing-x) 0.25rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-spacing-1.5\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-spacing: 0.375rem 0.375rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-spacing-x-1.5\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-spacing: 0.375rem var(--tw-border-spacing-y);\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-spacing-y-1.5\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-spacing: var(--tw-border-spacing-x) 0.375rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-spacing-2\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-spacing: 0.5rem 0.5rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-spacing-x-2\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-spacing: 0.5rem var(--tw-border-spacing-y);\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-spacing-y-2\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-spacing: var(--tw-border-spacing-x) 0.5rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-spacing-2.5\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-spacing: 0.625rem 0.625rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-spacing-x-2.5\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-spacing: 0.625rem var(--tw-border-spacing-y);\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-spacing-y-2.5\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-spacing: var(--tw-border-spacing-x) 0.625rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-spacing-3\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-spacing: 0.75rem 0.75rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-spacing-x-3\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-spacing: 0.75rem var(--tw-border-spacing-y);\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-spacing-y-3\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-spacing: var(--tw-border-spacing-x) 0.75rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-spacing-3.5\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-spacing: 0.875rem 0.875rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-spacing-x-3.5\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-spacing: 0.875rem var(--tw-border-spacing-y);\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-spacing-y-3.5\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-spacing: var(--tw-border-spacing-x) 0.875rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-spacing-4\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-spacing: 1rem 1rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-spacing-x-4\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-spacing: 1rem var(--tw-border-spacing-y);\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-spacing-y-4\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-spacing: var(--tw-border-spacing-x) 1rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-spacing-5\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-spacing: 1.25rem 1.25rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-spacing-x-5\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-spacing: 1.25rem var(--tw-border-spacing-y);\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-spacing-y-5\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-spacing: var(--tw-border-spacing-x) 1.25rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-spacing-6\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-spacing: 1.5rem 1.5rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-spacing-x-6\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-spacing: 1.5rem var(--tw-border-spacing-y);\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-spacing-y-6\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-spacing: var(--tw-border-spacing-x) 1.5rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-spacing-7\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-spacing: 1.75rem 1.75rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-spacing-x-7\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-spacing: 1.75rem var(--tw-border-spacing-y);\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-spacing-y-7\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-spacing: var(--tw-border-spacing-x) 1.75rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-spacing-8\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-spacing: 2rem 2rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-spacing-x-8\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-spacing: 2rem var(--tw-border-spacing-y);\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-spacing-y-8\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-spacing: var(--tw-border-spacing-x) 2rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-spacing-9\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-spacing: 2.25rem 2.25rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-spacing-x-9\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-spacing: 2.25rem var(--tw-border-spacing-y);\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-spacing-y-9\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-spacing: var(--tw-border-spacing-x) 2.25rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-spacing-10\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-spacing: 2.5rem 2.5rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-spacing-x-10\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-spacing: 2.5rem var(--tw-border-spacing-y);\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-spacing-y-10\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-spacing: var(--tw-border-spacing-x) 2.5rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-spacing-11\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-spacing: 2.75rem 2.75rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-spacing-x-11\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-spacing: 2.75rem var(--tw-border-spacing-y);\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-spacing-y-11\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-spacing: var(--tw-border-spacing-x) 2.75rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-spacing-12\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-spacing: 3rem 3rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-spacing-x-12\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-spacing: 3rem var(--tw-border-spacing-y);\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-spacing-y-12\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-spacing: var(--tw-border-spacing-x) 3rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-spacing-14\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-spacing: 3.5rem 3.5rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-spacing-x-14\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-spacing: 3.5rem var(--tw-border-spacing-y);\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-spacing-y-14\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-spacing: var(--tw-border-spacing-x) 3.5rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-spacing-16\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-spacing: 4rem 4rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-spacing-x-16\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-spacing: 4rem var(--tw-border-spacing-y);\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-spacing-y-16\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-spacing: var(--tw-border-spacing-x) 4rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-spacing-20\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-spacing: 5rem 5rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-spacing-x-20\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-spacing: 5rem var(--tw-border-spacing-y);\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-spacing-y-20\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-spacing: var(--tw-border-spacing-x) 5rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-spacing-24\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-spacing: 6rem 6rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-spacing-x-24\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-spacing: 6rem var(--tw-border-spacing-y);\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-spacing-y-24\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-spacing: var(--tw-border-spacing-x) 6rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-spacing-28\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-spacing: 7rem 7rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-spacing-x-28\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-spacing: 7rem var(--tw-border-spacing-y);\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-spacing-y-28\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-spacing: var(--tw-border-spacing-x) 7rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-spacing-32\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-spacing: 8rem 8rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-spacing-x-32\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-spacing: 8rem var(--tw-border-spacing-y);\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-spacing-y-32\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-spacing: var(--tw-border-spacing-x) 8rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-spacing-36\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-spacing: 9rem 9rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-spacing-x-36\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-spacing: 9rem var(--tw-border-spacing-y);\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-spacing-y-36\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-spacing: var(--tw-border-spacing-x) 9rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-spacing-40\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-spacing: 10rem 10rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-spacing-x-40\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-spacing: 10rem var(--tw-border-spacing-y);\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-spacing-y-40\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-spacing: var(--tw-border-spacing-x) 10rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-spacing-44\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-spacing: 11rem 11rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-spacing-x-44\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-spacing: 11rem var(--tw-border-spacing-y);\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-spacing-y-44\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-spacing: var(--tw-border-spacing-x) 11rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-spacing-48\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-spacing: 12rem 12rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-spacing-x-48\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-spacing: 12rem var(--tw-border-spacing-y);\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-spacing-y-48\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-spacing: var(--tw-border-spacing-x) 12rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-spacing-52\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-spacing: 13rem 13rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-spacing-x-52\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-spacing: 13rem var(--tw-border-spacing-y);\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-spacing-y-52\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-spacing: var(--tw-border-spacing-x) 13rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-spacing-56\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-spacing: 14rem 14rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-spacing-x-56\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-spacing: 14rem var(--tw-border-spacing-y);\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-spacing-y-56\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-spacing: var(--tw-border-spacing-x) 14rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-spacing-60\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-spacing: 15rem 15rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-spacing-x-60\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-spacing: 15rem var(--tw-border-spacing-y);\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-spacing-y-60\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-spacing: var(--tw-border-spacing-x) 15rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-spacing-64\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-spacing: 16rem 16rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-spacing-x-64\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-spacing: 16rem var(--tw-border-spacing-y);\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-spacing-y-64\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-spacing: var(--tw-border-spacing-x) 16rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-spacing-72\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-spacing: 18rem 18rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-spacing-x-72\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-spacing: 18rem var(--tw-border-spacing-y);\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-spacing-y-72\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-spacing: var(--tw-border-spacing-x) 18rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-spacing-80\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-spacing: 20rem 20rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-spacing-x-80\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-spacing: 20rem var(--tw-border-spacing-y);\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-spacing-y-80\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-spacing: var(--tw-border-spacing-x) 20rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-spacing-96\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-spacing: 24rem 24rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-spacing-x-96\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-spacing: 24rem var(--tw-border-spacing-y);\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-spacing-y-96\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-spacing: var(--tw-border-spacing-x) 24rem;\")))), mdx(\"h2\", null, \"Windframe Tailwind blocks\"), mdx(\"p\", null, mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://app.windframe.dev/editor?id=content2\"\n  }, \"Content\")));\n}\n;\nMDXContent.isMDXComponent = true;","tableOfContents":{"items":[{"url":"#tailwind-border-spacing","title":"Tailwind Border Spacing","items":[{"url":"#applying-tailwind-border-spacing","title":"Applying Tailwind Border Spacing"},{"url":"#preview","title":"Preview"},{"url":"#responsive-tailwind-border-spacing","title":"Responsive Tailwind Border Spacing"},{"url":"#tailwind-border-spacing-class-table","title":"Tailwind Border Spacing Class Table"},{"url":"#windframe-tailwind-blocks","title":"Windframe Tailwind blocks"}]}]},"parent":{"__typename":"File","relativePath":"classes/tailwind-border-spacing.md"},"frontmatter":{"githubUrl":null,"metaTitle":"Tailwind border spacing","lastUpdated":"8 May 2024","metaDescription":"The tailwind border spacing utility class allows you to control the spacing between cells in a table or the spacing between images in a grid layout."}}},"pageContext":{"id":"ee01610c-e679-5005-95b6-7df3185e1079"}},"staticQueryHashes":["2619113677","2619113677","2619113677","2619113677","2619113677","2619113677","2619113677","2619113677","3309287076","3309287076","3706406642","3706406642","3706406642","4045616534","4045616534","956403285"]}