{"componentChunkName":"component---src-templates-tailwindclass-js","path":"/tailwindcss/classes/tailwind-gap/","result":{"data":{"site":{"siteMetadata":{"title":"Resources to help developers | Contrast | Devwares","docsLocation":""}},"mdx":{"fields":{"id":"712199e5-365d-562c-aa28-61a2b8e71979","title":"Tailwind CSS Gap","slug":"/classes/tailwind-gap/"},"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\": \"6 May 2024\",\n  \"title\": \"Tailwind CSS Gap\",\n  \"metaTitle\": \"Tailwind Gap\",\n  \"metaDescription\": \"The tailwind gap utility class allows you to easily control the spacing between grid or flex container children.\",\n  \"canonicalUrl\": \"https://windframe.dev/tailwind/classes/tailwind-gap\"\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 Gap\"), mdx(\"p\", null, \"The tailwind gap utility class allows you to easily control the spacing between grid or flex container children. With Tailwind's gap class, you can add consistent and visually appealing gaps between elements without writing custom CSS.\"), mdx(\"h2\", null, \"Applying Tailwind Gap\"), mdx(\"p\", null, \"To apply a Tailwind gap between container children, you can use the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"gap-{size}\"), \" utility class, where \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"{size}\"), \" represents the desired gap size. The \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"{size}\"), \" can be one of the predefined sizes in Tailwind CSS, such as \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"gap-1\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"gap-2\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"gap-4\"), \", or you can customize the gap size using the spacing scale. Here's an example:\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-html\"\n  }, \"<div class=\\\"gap-4\\\">\\n  <div class=\\\"bg-green-500\\\">Element 1</div>\\n  <div class=\\\"bg-green-500\\\">Element 2</div>\\n  <div class=\\\"bg-green-500\\\">Element 3</div>\\n  <div class=\\\"bg-green-500\\\">Element 4</div>\\n  <div class=\\\"bg-green-500\\\">Element 5</div>\\n  <div class=\\\"bg-green-500\\\">Element 6</div>\\n</div>\\n\")), mdx(\"h2\", null, \"Preview\"), mdx(\"div\", {\n    className: \"rounded-t-xl overflow-hidden bg-green-100 p-6\"\n  }, mdx(\"div\", {\n    className: \"grid grid-cols-3 grid-row-3 gap-4\"\n  }, mdx(\"div\", {\n    className: \"h-16 rounded-md text-center bg-green-500 flex justify-center items-center font-extrabold text-white\"\n  }, \"Element 1\"), mdx(\"div\", {\n    className: \"h-16 rounded-md text-center bg-green-500 flex justify-center items-center font-extrabold text-white\"\n  }, \"Element 2\"), mdx(\"div\", {\n    className: \"h-16 rounded-md text-center bg-green-500 flex justify-center items-center font-extrabold text-white\"\n  }, \"Element 3\"), mdx(\"div\", {\n    className: \"h-16 rounded-md text-center bg-green-500 flex justify-center items-center font-extrabold text-white\"\n  }, \"Element 4\"), mdx(\"div\", {\n    className: \"h-16 rounded-md text-center bg-green-500 flex justify-center items-center font-extrabold text-white\"\n  }, \"Element 5\"), mdx(\"div\", {\n    className: \"h-16 rounded-md text-center bg-green-500 flex justify-center items-center font-extrabold text-white\"\n  }, \"Element 6\"))), mdx(\"h2\", null, \"Responsive Tailwind Gap\"), mdx(\"p\", null, \"Tailwind CSS allows you to apply gap responsively at different breakpoints. To use responsive tailwind gap classes, you can append the breakpoint prefix to the gap class. For example, \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"md:gap-4 applies\"), \" a gap of size 4 starting from the medium breakpoint and above.\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-html\"\n  }, \"<div class=\\\"gap-2 md:gap-4\\\">\\n  <div class=\\\"bg-gray-200\\\">Element 1</div>\\n  <div class=\\\"bg-gray-200\\\">Element 2</div>\\n  <div class=\\\"bg-gray-200\\\">Element 3</div>\\n</div>\\n\")), mdx(\"p\", null, \"In the above example, a gap of size \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"gap-2\"), \" is applied by default, creating a 2-pixel gap between each child element. However, starting from the medium breakpoint and above \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"(md:gap-4)\"), \", the gap increases to 4 pixels.\"), mdx(\"h2\", null, \"Tailwind Gap with Grids\"), mdx(\"p\", null, \"When using the tailwind gap utility class with grid layouts, the gap will be applied between the grid cells. This allows you to easily create consistent spacing between grid items.\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-html\"\n  }, \"<div class=\\\"grid grid-cols-2 gap-4\\\">\\n  <div class=\\\"bg-gray-200\\\">Item 1</div>\\n  <div class=\\\"bg-gray-200\\\">Item 2</div>\\n  <div class=\\\"bg-gray-200\\\">Item 3</div>\\n  <div class=\\\"bg-gray-200\\\">Item 4</div>\\n</div>\\n\")), mdx(\"h2\", null, \"Preview\"), mdx(\"div\", {\n    className: \"rounded-t-xl overflow-hidden bg-red-100 p-6\"\n  }, mdx(\"div\", {\n    className: \"grid grid-cols-3 gap-4\"\n  }, mdx(\"div\", {\n    className: \"h-16 rounded-md text-center bg-red-500 flex justify-center items-center font-extrabold text-white\"\n  }, \"item 1\"), mdx(\"div\", {\n    className: \"h-16 rounded-md text-center bg-red-500 flex justify-center items-center font-extrabold text-white\"\n  }, \"item 2\"), mdx(\"div\", {\n    className: \"h-16 rounded-md text-center bg-red-500 flex justify-center items-center font-extrabold text-white\"\n  }, \"item 3\"), mdx(\"div\", {\n    className: \"h-16 rounded-md text-center bg-red-500 flex justify-center items-center font-extrabold text-white\"\n  }, \"item 4\"), mdx(\"div\", {\n    className: \"h-16 rounded-md text-center bg-red-500 flex justify-center items-center font-extrabold text-white\"\n  }, \"item 5\"), mdx(\"div\", {\n    className: \"h-16 rounded-md text-center bg-red-500 flex justify-center items-center font-extrabold text-white\"\n  }, \"item 6\"))), mdx(\"p\", null, \"In the above example, a gap of size \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"gap-4\"), \" is applied between each grid cell, creating a 4-pixel gap between the items.\"), mdx(\"h2\", null, \"Tailwind Gap for row and column\"), mdx(\"p\", null, \"Tailwind gap also allows you to change the gaps between rows and/ or columns independenty.\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-html\"\n  }, \"<div class=\\\"grid grid-cols-3 gap-x-4 gap-y-8\\\">\\n  <div class=\\\"bg-indigo-500\\\">Element 1</div>\\n  <div class=\\\"bg-indigo-500\\\">Element 2</div>\\n  <div class=\\\"bg-indigo-500\\\">Element 3</div>\\n  <div class=\\\"bg-indigo-500\\\">Element 4</div>\\n  <div class=\\\"bg-indigo-500\\\">Element 5</div>\\n  <div class=\\\"bg-indigo-500\\\">Element 6</div>\\n</div>\\n\")), mdx(\"h2\", null, \"Preview\"), mdx(\"div\", {\n    className: \"rounded-t-xl overflow-hidden p-8 text-center bg-indigo-200 text-white\"\n  }, mdx(\"div\", {\n    className: \"grid grid-cols-3 gap-x-4 gap-y-8 \"\n  }, mdx(\"div\", {\n    className: \"rounded-lg p-6 shadow-md bg-indigo-500\"\n  }, \"Element 1\"), mdx(\"div\", {\n    className: \"rounded-lg p-6 shadow-md bg-indigo-500\"\n  }, \"Element 2\"), mdx(\"div\", {\n    className: \"rounded-lg p-6 shadow-md bg-indigo-500\"\n  }, \"Element 3\"), mdx(\"div\", {\n    className: \"rounded-lg p-6 shadow-md bg-indigo-500\"\n  }, \"Element 4\"), mdx(\"div\", {\n    className: \"rounded-lg p-6 shadow-md bg-indigo-500\"\n  }, \"Element 5\"), mdx(\"div\", {\n    className: \"rounded-lg p-6 shadow-md bg-indigo-500\"\n  }, \"Element 6\"))), mdx(\"h2\", null, \"Tailwind Gap 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  }, \"gap-0\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"gap: 0px;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"gap-x-0\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"column-gap: 0px;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"gap-y-0\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"row-gap: 0px;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"gap-0.5\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"gap: 0.125rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"gap-x-0.5\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"column-gap: 0.125rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"gap-y-0.5\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"row-gap: 0.125rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"gap-1\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"gap: 0.25rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"gap-x-1\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"column-gap: 0.25rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"gap-y-1\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"row-gap: 0.25rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"gap-1.5\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"gap: 0.375rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"gap-x-1.5\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"column-gap: 0.375rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"gap-y-1.5\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"row-gap: 0.375rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"gap-2\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"gap: 0.5rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"gap-x-2\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"column-gap: 0.5rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"gap-y-2\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"row-gap: 0.5rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"gap-2.5\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"gap: 0.625rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"gap-x-2.5\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"column-gap: 0.625rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"gap-y-2.5\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"row-gap: 0.625rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"gap-3\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"gap: 0.75rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"gap-x-3\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"column-gap: 0.75rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"gap-y-3\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"row-gap: 0.75rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"gap-3.5\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"gap: 0.875rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"gap-x-3.5\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"column-gap: 0.875rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"gap-y-3.5\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"row-gap: 0.875rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"gap-4\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"gap: 1rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"gap-x-4\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"column-gap: 1rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"gap-y-4\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"row-gap: 1rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"gap-5\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"gap: 1.25rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"gap-x-5\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"column-gap: 1.25rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"gap-y-5\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"row-gap: 1.25rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"gap-6\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"gap: 1.5rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"gap-x-6\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"column-gap: 1.5rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"gap-y-6\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"row-gap: 1.5rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"gap-7\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"gap: 1.75rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"gap-x-7\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"column-gap: 1.75rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"gap-y-7\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"row-gap: 1.75rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"gap-8\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"gap: 2rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"gap-x-8\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"column-gap: 2rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"gap-y-8\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"row-gap: 2rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"gap-9\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"gap: 2.25rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"gap-x-9\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"column-gap: 2.25rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"gap-y-9\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"row-gap: 2.25rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"gap-10\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"gap: 2.5rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"gap-x-10\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"column-gap: 2.5rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"gap-y-10\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"row-gap: 2.5rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"gap-11\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"gap: 2.75rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"gap-x-11\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"column-gap: 2.75rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"gap-y-11\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"row-gap: 2.75rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"gap-12\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"gap: 3rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"gap-x-12\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"column-gap: 3rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"gap-y-12\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"row-gap: 3rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"gap-14\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"gap: 3.5rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"gap-x-14\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"column-gap: 3.5rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"gap-y-14\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"row-gap: 3.5rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"gap-16\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"gap: 4rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"gap-x-16\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"column-gap: 4rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"gap-y-16\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"row-gap: 4rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"gap-20\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"gap: 5rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"gap-x-20\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"column-gap: 5rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"gap-y-20\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"row-gap: 5rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"gap-24\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"gap: 6rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"gap-x-24\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"column-gap: 6rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"gap-y-24\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"row-gap: 6rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"gap-28\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"gap: 7rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"gap-x-28\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"column-gap: 7rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"gap-y-28\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"row-gap: 7rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"gap-32\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"gap: 8rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"gap-x-32\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"column-gap: 8rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"gap-y-32\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"row-gap: 8rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"gap-36\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"gap: 9rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"gap-x-36\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"column-gap: 9rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"gap-y-36\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"row-gap: 9rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"gap-40\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"gap: 10rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"gap-x-40\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"column-gap: 10rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"gap-y-40\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"row-gap: 10rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"gap-44\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"gap: 11rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"gap-x-44\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"column-gap: 11rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"gap-y-44\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"row-gap: 11rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"gap-48\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"gap: 12rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"gap-x-48\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"column-gap: 12rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"gap-y-48\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"row-gap: 12rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"gap-52\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"gap: 13rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"gap-x-52\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"column-gap: 13rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"gap-y-52\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"row-gap: 13rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"gap-56\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"gap: 14rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"gap-x-56\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"column-gap: 14rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"gap-y-56\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"row-gap: 14rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"gap-60\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"gap: 15rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"gap-x-60\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"column-gap: 15rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"gap-y-60\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"row-gap: 15rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"gap-64\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"gap: 16rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"gap-x-64\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"column-gap: 16rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"gap-y-64\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"row-gap: 16rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"gap-72\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"gap: 18rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"gap-x-72\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"column-gap: 18rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"gap-y-72\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"row-gap: 18rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"gap-80\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"gap: 20rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"gap-x-80\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"column-gap: 20rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"gap-y-80\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"row-gap: 20rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"gap-96\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"gap: 24rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"gap-x-96\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"column-gap: 24rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"gap-y-96\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"row-gap: 24rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"gap-px\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"gap: 1px;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"gap-x-px\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"column-gap: 1px;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"gap-y-px\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"row-gap: 1px;\")))), mdx(\"h2\", null, \"Windframe Tailwind blocks\"), mdx(\"p\", null, mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://app.windframe.dev/editor?id=teams10\"\n  }, \"Team\")));\n}\n;\nMDXContent.isMDXComponent = true;","tableOfContents":{"items":[{"url":"#tailwind-gap","title":"Tailwind Gap","items":[{"url":"#applying-tailwind-gap","title":"Applying Tailwind Gap"},{"url":"#preview","title":"Preview"},{"url":"#responsive-tailwind-gap","title":"Responsive Tailwind Gap"},{"url":"#tailwind-gap-with-grids","title":"Tailwind Gap with Grids"},{"url":"#preview-1","title":"Preview"},{"url":"#tailwind-gap-for-row-and-column","title":"Tailwind Gap for row and column"},{"url":"#preview-2","title":"Preview"},{"url":"#tailwind-gap-class-table","title":"Tailwind Gap Class Table"},{"url":"#windframe-tailwind-blocks","title":"Windframe Tailwind blocks"}]}]},"parent":{"__typename":"File","relativePath":"classes/tailwind-gap.md"},"frontmatter":{"githubUrl":null,"metaTitle":"Tailwind Gap","lastUpdated":"6 May 2024","metaDescription":"The tailwind gap utility class allows you to easily control the spacing between grid or flex container children."}}},"pageContext":{"id":"712199e5-365d-562c-aa28-61a2b8e71979"}},"staticQueryHashes":["2619113677","2619113677","2619113677","2619113677","2619113677","2619113677","2619113677","2619113677","3309287076","3309287076","3706406642","3706406642","3706406642","4045616534","4045616534","956403285"]}