{"componentChunkName":"component---src-templates-tailwindclass-js","path":"/tailwindcss/classes/tailwind-background-clip/","result":{"data":{"site":{"siteMetadata":{"title":"Resources to help developers | Contrast | Devwares","docsLocation":""}},"mdx":{"fields":{"id":"275701f8-a9a4-527a-b17a-c9dce0c272ef","title":"Tailwind Background Clip","slug":"/classes/tailwind-background-clip/"},"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\": \"12 May 2024\",\n  \"title\": \"Tailwind Background Clip\",\n  \"metaTitle\": \"Tailwind Background Clip\",\n  \"metaDescription\": \"The bg-{clip} utility class in Tailwind CSS allows you to control the clipping behavior of background images applied to elements.\",\n  \"canonicalUrl\": \"https://windframe.dev/tailwind/classes/tailwind-background-clip\"\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 Background Clip\"), mdx(\"p\", null, \"The \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"bg-{clip}\"), \" utility class in Tailwind CSS allows you to control the clipping behavior of background images applied to elements. With Tailwind's bg-{clip} class, you can easily adjust how the background image is clipped to the element's box model.\"), mdx(\"h2\", null, \"Applying Tailwind Background Clip\"), mdx(\"p\", null, \"To apply a specific tailwind background clip behavior to an element, you can use the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"bg-{clip}\"), \" utility class, where {clip} represents the desired background clip. Here are some common values you can use:\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"bg-clip-border\"), \": The background image is clipped to the border box.\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"bg-clip-padding\"), \": The background image is clipped to the padding box.\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"bg-clip-content\"), \": The background image is clipped to the content box.\\nHere's an example:\")), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-html\"\n  }, \"<div class=\\\"bg-clip-padding\\\">\\n  This element has a background image that is clipped to the border.\\n</div>\\n<div class=\\\"bg-clip-padding\\\">\\n  This element has a background image that is clipped to the padding box.\\n</div>\\n<div class=\\\"bg-clip-padding\\\">\\n  This element has a background image that is clipped to the content.\\n</div>\\n\")), mdx(\"h2\", null, \"Preview\"), mdx(\"div\", {\n    className: \"rounded-t-xl overflow-hidden bg-blue-100 p-10\"\n  }, mdx(\"div\", {\n    className: \"grid grid-cols-3 gap-2 lg:grid-cols-3\"\n  }, mdx(\"div\", {\n    className: \"bg-clip-border p-6 rounded-md bg-blue-600 border-4 border-blue-300 border-dashed font-extrabold text-white flex justify-center items-center\"\n  }, \" This element has a background image that is clipped to the border.\"), mdx(\"div\", {\n    className: \"bg-clip-padding p-6 rounded-md bg-blue-600 border-4 border-blue-300 border-dashed font-extrabold text-white flex justify-center items-center\"\n  }, \" This element has a background image that is clipped to the padding box.\"), mdx(\"div\", {\n    className: \"bg-clip-content p-4 rounded-md bg-blue-600 border-4 border-blue-300 border-dashed font-extrabold text-white flex justify-center items-center\"\n  }, \" This element has a background image that is clipped to the content.\"))), mdx(\"h2\", null, \"Responsive Tailwind Background Clip\"), mdx(\"p\", null, \"Tailwind CSS allows you to apply background clip classes responsively at different breakpoints. To use responsive tailwind background clip classes, you can append the breakpoint prefix to the utility class. For example, \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"md:bg-clip-content\"), \" sets the tailwind background clip to the content box starting from the medium breakpoint and above.\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-html\"\n  }, \"<div class=\\\"bg-clip-border md:bg-clip-content\\\">\\n  This element has a background image that is clipped to the border box by default, but starting\\n  from the medium breakpoint and above, it changes to be clipped to the content box.\\n</div>\\n\")), mdx(\"p\", null, \"In the above example, the background clip of the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"<div>\"), \" element is set to the border box by default (bg-clip-border), but starting from the medium breakpoint and above, it changes to be clipped to the content box (md:bg-clip-content).\"), mdx(\"h2\", null, \"Tailwind Background Clip ClassN 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  }, \"bg-clip-border\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"background-clip: border-box;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"bg-clip-padding\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"background-clip: padding-box;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"bg-clip-content\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"background-clip: content-box;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"bg-clip-text\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"background-clip: text;\")))), mdx(\"h2\", null, \"Windframe Tailwind blocks\"), mdx(\"p\", null, mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://app.windframe.dev/editor?id=timelines1\"\n  }, \"Timeline\")));\n}\n;\nMDXContent.isMDXComponent = true;","tableOfContents":{"items":[{"url":"#tailwind-background-clip","title":"Tailwind Background Clip","items":[{"url":"#applying-tailwind-background-clip","title":"Applying Tailwind Background Clip"},{"url":"#preview","title":"Preview"},{"url":"#responsive-tailwind-background-clip","title":"Responsive Tailwind Background Clip"},{"url":"#tailwind-background-clip-classn-table","title":"Tailwind Background Clip ClassN Table"},{"url":"#windframe-tailwind-blocks","title":"Windframe Tailwind blocks"}]}]},"parent":{"__typename":"File","relativePath":"classes/tailwind-background-clip.md"},"frontmatter":{"githubUrl":null,"metaTitle":"Tailwind Background Clip","lastUpdated":"12 May 2024","metaDescription":"The bg-{clip} utility class in Tailwind CSS allows you to control the clipping behavior of background images applied to elements."}}},"pageContext":{"id":"275701f8-a9a4-527a-b17a-c9dce0c272ef"}},"staticQueryHashes":["2619113677","2619113677","2619113677","2619113677","2619113677","2619113677","2619113677","2619113677","3309287076","3309287076","3706406642","3706406642","3706406642","4045616534","4045616534","956403285"]}