{"componentChunkName":"component---src-templates-tailwindclass-js","path":"/tailwindcss/classes/tailwind-object-positions/","result":{"data":{"site":{"siteMetadata":{"title":"Resources to help developers | Contrast | Devwares","docsLocation":""}},"mdx":{"fields":{"id":"5be057d2-bdd0-5f05-8cee-a54d278ff229","title":"Tailwind CSS Object Position","slug":"/classes/tailwind-object-positions/"},"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\": \"19 May 2024\",\n  \"title\": \"Tailwind CSS Object Position\",\n  \"metaTitle\": \"Tailwind CSS Object Position\",\n  \"metaDescription\": \"The object-{position} utility class in Tailwind CSS allows you to control the positioning of objects within their containing elements.\",\n  \"canonicalUrl\": \"https://windframe.dev/tailwind/classes/tailwind-object-position\"\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 object Position\"), mdx(\"p\", null, \"The \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"object-{position}\"), \" utility class in Tailwind CSS allows you to control the positioning of objects within their containing elements. With Tailwind's object-position class, you can easily adjust the horizontal and vertical position of images, videos, and other objects.\"), mdx(\"h2\", null, \"Applying Object Position\"), mdx(\"p\", null, \"To apply a specific object position to an element, you can use the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"object-{position}\"), \" utility class, where {position} represents the desired object position. Here are some common values you can use:\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"object-bottom: Positions the object at the bottom of its containing element.\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"object-center: Positions the object at the center both horizontally and vertically within its containing element.\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"object-left: Positions the object at the left edge of its containing element.\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"object-left-bottom: Positions the object at the left-bottom corner of its containing element.\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"object-left-top: Positions the object at the left-top corner of its containing element.\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"object-right: Positions the object at the right edge of its containing element.\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"object-right-bottom: Positions the object at the right-bottom corner of its containing element.\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"object-right-top: Positions the object at the right-top corner of its containing element.\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"object-top: Positions the object at the top of its containing element.\\nHere's an example:\")), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-html\"\n  }, \"<img src=\\\"image.jpg\\\" class=\\\"object-top-left\\\" alt=\\\"Object positioned at the top left\\\" />\\n<img src=\\\"image.jpg\\\" class=\\\"object-top\\\" alt=\\\"Object positioned at the top\\\" />\\n<img src=\\\"image.jpg\\\" class=\\\"object-right-top\\\" alt=\\\"Object positioned at the top right\\\" />\\n\")), mdx(\"h2\", null, \"Preview\"), mdx(\"div\", {\n    \"className\": \"rounded-t-xl overflow-hidden bg-blue-200 p-10\"\n  }, \" \\n\", mdx(\"div\", {\n    parentName: \"div\",\n    \"className\": \"grid grid-cols-3 gap-4\"\n  }, \"\\n  \", mdx(\"div\", {\n    parentName: \"div\",\n    \"className\": \"w-32 h-32 rounded-md bg-blue-100 shadow-lg\"\n  }, \"\\n  \", mdx(\"img\", {\n    parentName: \"div\",\n    \"className\": \"w-16 h-16 rounded-md overflow-hidden object-top-left object-none\",\n    \"src\": \"https://images.unsplash.com/photo-1687789903431-54cdeb56bb43?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=256&h=256&q=80\"\n  }), \"\\n  \"), \"\\n  \", mdx(\"div\", {\n    parentName: \"div\",\n    \"className\": \"w-32 h-32 rounded-md bg-blue-100 shadow-lg\"\n  }, \"\\n     \", mdx(\"img\", {\n    parentName: \"div\",\n    \"className\": \"mx-auto w-16 h-16 rounded-md overflow-hidden object-top\",\n    \"src\": \"https://images.unsplash.com/photo-1687789903431-54cdeb56bb43?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=256&h=256&q=80\"\n  }), \"\\n  \"), \"\\n   \", mdx(\"div\", {\n    parentName: \"div\",\n    \"className\": \"w-32 h-32 rounded-md bg-blue-100 shadow-lg\"\n  }, \"\\n     \", mdx(\"img\", {\n    parentName: \"div\",\n    \"className\": \"ml-16 w-16 h-16 rounded-md overflow-hidden object-right-top object-none\",\n    \"src\": \"https://images.unsplash.com/photo-1687789903431-54cdeb56bb43?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=256&h=256&q=80\"\n  }), \"\\n  \"))), mdx(\"h2\", null, \"Responsive Object Position\"), mdx(\"p\", null, \"Tailwind CSS allows you to apply object position classes responsively at different breakpoints. To use responsive object position classes, you can append the breakpoint prefix to the utility class. For example, \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"md:object-right-bottom\"), \" positions the object at the right-bottom corner starting from the medium breakpoint and above.\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-html\"\n  }, \"<div class=\\\"object-center md:object-right-bottom\\\">\\n  <!-- Content here -->\\n</div>\\n\")), mdx(\"p\", null, \"In the above example, the object position of the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"<div>\"), \" element is set to center by default (\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"object-center\"), \"), but starting from the medium breakpoint and above, it changes to the right-bottom corner (\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"md:object-right-bottom\"), \").\"), mdx(\"h2\", null, \"Tailwind CSS Object Position\"), 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  }, \"object-bottom\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"object-position: bottom;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"object-center\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"object-position: center;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"object-left\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"object-position: left;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"object-left-bottom\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"object-position: left bottom;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"object-left-top\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"object-position: left top;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"object-right\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"object-position: right;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"object-right-bottom\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"object-position: right bottom;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"object-right-top\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"object-position: right top;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"object-top\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"object-position: top;\")))), mdx(\"h2\", null, \"Windframe Tailwind blocks\"), mdx(\"p\", null, mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://app.windframe.dev/editor?id=pricing2\"\n  }, \"Pricing\")));\n}\n;\nMDXContent.isMDXComponent = true;","tableOfContents":{"items":[{"url":"#tailwind-object-position","title":"Tailwind object Position","items":[{"url":"#applying-object-position","title":"Applying Object Position"},{"url":"#preview","title":"Preview"},{"url":"#responsive-object-position","title":"Responsive Object Position"},{"url":"#tailwind-css-object-position","title":"Tailwind CSS Object Position"},{"url":"#windframe-tailwind-blocks","title":"Windframe Tailwind blocks"}]}]},"parent":{"__typename":"File","relativePath":"classes/tailwind-object-positions.md"},"frontmatter":{"githubUrl":null,"metaTitle":"Tailwind CSS Object Position","lastUpdated":"19 May 2024","metaDescription":"The object-{position} utility class in Tailwind CSS allows you to control the positioning of objects within their containing elements."}}},"pageContext":{"id":"5be057d2-bdd0-5f05-8cee-a54d278ff229"}},"staticQueryHashes":["2619113677","2619113677","2619113677","2619113677","2619113677","2619113677","2619113677","2619113677","3309287076","3309287076","3706406642","3706406642","3706406642","4045616534","4045616534","956403285"]}