{"componentChunkName":"component---src-templates-tailwindclass-js","path":"/tailwindcss/classes/tailwind-box-shadow/","result":{"data":{"site":{"siteMetadata":{"title":"Resources to help developers | Contrast | Devwares","docsLocation":""}},"mdx":{"fields":{"id":"06a3eeec-2001-5d90-a32d-3c1aee9d77e0","title":"Tailwind CSS Box Shadow","slug":"/classes/tailwind-box-shadow/"},"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\": \"10 May 2024\",\n  \"title\": \"Tailwind CSS Box Shadow\",\n  \"metaTitle\": \"Tailwind Box Shadow\",\n  \"metaDescription\": \"The tailwind box-shadow utility class allows you to add shadows to elements, giving them a three-dimensional effect and enhancing their visual appearance.\",\n  \"canonicalUrl\": \"https://windframe.dev/tailwind/classes/tailwind-box-shadow\"\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 box Shadow\"), mdx(\"p\", null, \"The tailwind box shadow utility class allows you to add shadows to elements, giving them a three-dimensional effect and enhancing their visual appearance. With Tailwind's box-shadow class, you can easily customize and apply different types of shadows to elements.\"), mdx(\"h2\", null, \"Applying Tailwind Box Shadow\"), mdx(\"p\", null, \"To apply a tailwind box shadow to an element, you can use the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"shadow-{value}\"), \" utility class, where \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"{value}\"), \" represents the desired shadow style. Here are the available options:\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"shadow-sm\"), \": Applies a small shadow.\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"shadow\"), \": Applies a medium shadow (default).\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"shadow-md\"), \": Applies a medium shadow.\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"shadow-lg\"), \": Applies a large shadow.\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"shadow-xl\"), \": Applies an extra-large shadow.\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"shadow-2xl\"), \": Applies a 2x extra-large shadow.\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"shadow-inner\"), \": Applies an inset shadow.\")), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-html\"\n  }, \"<div class=\\\"flex\\\">\\n  <div class=\\\"shadow-md\\\">Item 1</div>\\n  <div class=\\\"shadow-xl\\\">Item 2</div>\\n  <div class=\\\"shadow-2xl\\\">Item 3</div>\\n</div>\\n\")), mdx(\"h2\", null, \"Preview\"), mdx(\"div\", {\n    className: \"rounded-t-xl overflow-hidden bg-gray-100 p-10\"\n  }, mdx(\"div\", {\n    className: \"flex flex-cols items-center justify-center gap-6\"\n  }, mdx(\"div\", {\n    className: \"shadow-md h-32 w-32 bg-white-300 rounded-md flex items-center justify-center font-extrabold\"\n  }, \"Item 1\"), mdx(\"div\", {\n    className: \"shadow-xl h-32 w-32 bg-white-300 rounded-md flex items-center justify-center  font-extrabold\"\n  }, \"Item 2\"), mdx(\"div\", {\n    className: \"shadow-2xl h-32 w-32 bg-white-300 rounded-md flex items-center justify-center font-extrabold\"\n  }, \"Item 3\"))), mdx(\"h2\", null, \"Customizing Tailwind Box Shadow\"), mdx(\"p\", null, \"Tailwind CSS also provides utility classes to customize the color and size of the box shadow. You can use the following utility classes in conjunction with the shadow class:\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"shadow-{color}\"), \": Applies a custom color to the shadow. For example, shadow-red-500 applies a red-colored shadow.\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"shadow-{size}\"), \": Applies a custom size to the shadow. For example, \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"shadow-offset-2\"), \" moves the shadow 2 units from its default position.\")), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-html\"\n  }, \"<div>\\n  <div class=\\\"shadow-xl shadow-blue-500\\\">\\n    Item 1\\n  </div>\\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: \"flex flex-cols items-center justify-center gap-6\"\n  }, mdx(\"div\", {\n    className: \"shadow-xl shadow-blue-500 h-32 w-32 bg-white-300 rounded-md flex items-center justify-center font-extrabold\"\n  }, \"Item 1\"))), mdx(\"h2\", null, \"Responsive Tailwind Box Shadow\"), mdx(\"p\", null, \"Tailwind CSS allows you to apply box shadow classes responsively at different breakpoints. To use responsive tailwind box shadow classes, you can append the breakpoint prefix to the utility class. For example, \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"md:shadow-lg\"), \" applies a large shadow starting from the medium breakpoint and above.\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-html\"\n  }, \"<div class=\\\"shadow-lg md:shadow-xl\\\">\\n  <!-- Content here -->\\n</div>\\n\")), mdx(\"p\", null, \"In the above example, the shadow applied to the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"<div>\"), \" element is large by default (\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"shadow-lg\"), \"), but starting from the medium breakpoint and above, it changes to an extra-large shadow (\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"md:shadow-xl\"), \").\"), mdx(\"h2\", null, \"Tailwind Box-shadow 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  }, \"shadow-sm\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"shadow\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"shadow-md\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"shadow-lg\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"shadow-xl\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"shadow-2xl\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"shadow-inner\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"box-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"shadow-none\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"box-shadow: 0 0 #0000;\")))), 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-box-shadow","title":"Tailwind box Shadow","items":[{"url":"#applying-tailwind-box-shadow","title":"Applying Tailwind Box Shadow"},{"url":"#preview","title":"Preview"},{"url":"#customizing-tailwind-box-shadow","title":"Customizing Tailwind Box Shadow"},{"url":"#preview-1","title":"Preview"},{"url":"#responsive-tailwind-box-shadow","title":"Responsive Tailwind Box Shadow"},{"url":"#tailwind-box-shadow-class-table","title":"Tailwind Box-shadow Class Table"},{"url":"#windframe-tailwind-blocks","title":"Windframe Tailwind blocks"}]}]},"parent":{"__typename":"File","relativePath":"classes/tailwind-box-shadow.md"},"frontmatter":{"githubUrl":null,"metaTitle":"Tailwind Box Shadow","lastUpdated":"10 May 2024","metaDescription":"The tailwind box-shadow utility class allows you to add shadows to elements, giving them a three-dimensional effect and enhancing their visual appearance."}}},"pageContext":{"id":"06a3eeec-2001-5d90-a32d-3c1aee9d77e0"}},"staticQueryHashes":["2619113677","2619113677","2619113677","2619113677","2619113677","2619113677","2619113677","2619113677","3309287076","3309287076","3706406642","3706406642","3706406642","4045616534","4045616534","956403285"]}