{"componentChunkName":"component---src-templates-tailwindclass-js","path":"/tailwindcss/classes/tailwind-max-height/","result":{"data":{"site":{"siteMetadata":{"title":"Resources to help developers | Contrast | Devwares","docsLocation":""}},"mdx":{"fields":{"id":"f38e53b0-0a4b-5824-b532-214026c5706c","title":"Tailwind CSS Max-Height","slug":"/classes/tailwind-max-height/"},"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\": \"14 May 2024\",\n  \"title\": \"Tailwind CSS Max-Height\",\n  \"metaTitle\": \"Tailwind CSS Max-Height\",\n  \"metaDescription\": \"Tailwind max-height utility class allows you to control the maximum height of elements. To set the Tailwind maximum height of an element, you can use the max-h-{size} class\",\n  \"canonicalUrl\": \"https://windframe.dev/tailwind/classes/tailwind-max-height\"\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 Max Height\"), mdx(\"p\", null, \"The \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"max-height\"), \" utility class in Tailwind CSS allows you to control the maximum height of elements. It provides a set of classes that enable you to set the Tailwind max height to specific values, percentages, or use predefined max-height utilities for common use cases.\"), mdx(\"h2\", null, \"Applying Tailwind Max Height\"), mdx(\"p\", null, \"To set the Tailwind maximum height of an element, you can use the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"max-h-{size}\"), \" class, where {size} can be one of the following options:\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"max-h-{value}\"), \": This sets the maximum height to a specific value in pixels.\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"max-h-screen\"), \": This sets the maximum height to the full height of the viewport.\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"max-h-full\"), \": This sets the maximum height to 100% of the parent container.\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"max-h-0\"), \": This sets the maximum height to 0, effectively hiding the element.\"))), mdx(\"p\", null, \"Here's an example of how to use the Tailwind max height utility classes:\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-html\"\n  }, \"<div class=\\\"h-96\\\">\\n  <div class=\\\"max-h-80\\\">max-h-80</div>\\n  <div class=\\\"max-h-40\\\">max-h-80</div>\\n  <div class=\\\"max-h-24\\\">max-h-24</div>\\n</div>\\n\")), mdx(\"h2\", null, \"Preview\"), mdx(\"div\", {\n    className: \"relative rounded-xl overflow-auto p-8\"\n  }, mdx(\"div\", {\n    className: \"h-96 flex justify-center items-end space-x-4 font-mono font-bold text-xs text-center text-white\"\n  }, mdx(\"div\", {\n    className: \"w-8 grid items-end bg-indigo-100 rounded-lg h-full\"\n  }, mdx(\"div\", {\n    className: \"w-full bg-indigo-500 rounded-lg shadow-lg h-full max-h-80 relative\"\n  }, mdx(\"div\", {\n    className: \"absolute w-8 text-nowrap bottom-6\"\n  }, mdx(\"div\", {\n    className: \"-rotate-90\"\n  }, \"max-h-80\")))), mdx(\"div\", {\n    className: \"w-8 grid items-end bg-indigo-100 rounded-lg h-full\"\n  }, mdx(\"div\", {\n    className: \"w-full bg-indigo-500 rounded-lg max-h-40 h-full shadow-lg relative\"\n  }, mdx(\"div\", {\n    className: \"absolute w-8 text-nowrap bottom-6\"\n  }, mdx(\"div\", {\n    className: \"-rotate-90\"\n  }, \"max-h-40\")))), mdx(\"div\", {\n    className: \"w-8 grid items-end bg-indigo-100 rounded-lg h-full\"\n  }, mdx(\"div\", {\n    className: \"w-full bg-indigo-500  rounded-lg max-h-24 h-full shadow-lg relative\"\n  }, mdx(\"div\", {\n    className: \"absolute w-8 text-nowrap bottom-6\"\n  }, mdx(\"div\", {\n    className: \"-rotate-90\"\n  }, \"max-h-24\")))))), mdx(\"h2\", null, \"Percentage-based Tailwind Max Height\"), mdx(\"p\", null, \"Tailwind CSS also provides utility classes for setting maximum height as a percentage of the parent container's height. You can use the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"max-h-{percentage}\"), \" class to achieve this. Here's an example:\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-html\"\n  }, \"<div class=\\\"h-96\\\">\\n <div class=\\\"max-h-full\\\"></div>\\n <div class=\\\"max-h-screen\\\"></div>\\n</div>\\n\")), mdx(\"h2\", null, \"Preview\"), mdx(\"div\", {\n    className: \"relative rounded-xl overflow-auto p-4\"\n  }, mdx(\"div\", {\n    className: \"h-96 flex justify-center items-end gap-4 font-mono font-bold text-xl text-center text-white\"\n  }, mdx(\"div\", {\n    className: \"grid w-28 items-end bg-indigo-100 rounded-lg h-full\"\n  }, mdx(\"div\", {\n    className: \"w-full bg-indigo-500 rounded-lg shadow-lg h-full max-h-full relative\"\n  }, mdx(\"div\", {\n    className: \"absolute left-10 w-8 text-nowrap  bottom-6\"\n  }, mdx(\"div\", {\n    className: \"-rotate-90\"\n  }, \"max-h-full\")))), mdx(\"div\", {\n    className: \"grid w-28 items-end bg-indigo-100 rounded-lg h-full\"\n  }, mdx(\"div\", {\n    className: \"w-full bg-indigo-500 rounded-lg shadow-lg h-full max-h-screen relative\"\n  }, mdx(\"div\", {\n    className: \"absolute left-10 w-8 text-nowrap bottom-6\"\n  }, mdx(\"div\", {\n    className: \"-rotate-90\"\n  }, \"max-h-screen\")))))), mdx(\"h2\", null, \"Responsive Tailwind Max Height\"), mdx(\"p\", null, \"Tailwind CSS allows you to control the maximum height of elements responsively at different breakpoints. To use responsive \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"max-height\"), \" classes, you can append the breakpoint prefix to the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"max-height\"), \" classes. For example, \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"md:max-h-48\"), \" sets the maximum height to 48 pixels starting from the medium breakpoint and above. Here's an example:\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-html\"\n  }, \"<div class=\\\"max-h-64 md:max-h-48\\\">\\n  This div has a maximum height of 64 pixels by default, and 48 pixels starting from the medium\\n  breakpoint.\\n</div>\\n\")), mdx(\"p\", null, \"In the above example, the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"max-h-64\"), \" class is applied by default, setting the tailwind max height to 64 pixels. However, starting from the medium breakpoint and above, the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"md:max-h-48\"), \" class is applied, changing the tailwind max height to 48 pixels.\"), mdx(\"h2\", null, \"Tailwind Max Height Classes\"), 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  }, \"max-h-0\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"max-height: 0px;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"max-h-0.5\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"max-height: 0.125rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"max-h-1\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"max-height: 0.25rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"max-h-1.5\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"max-height: 0.375rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"max-h-2\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"max-height: 0.5rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"max-h-2.5\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"max-height: 0.625rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"max-h-3\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"max-height: 0.75rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"max-h-3.5\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"max-height: 0.875rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"max-h-4\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"max-height: 1rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"max-h-5\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"max-height: 1.25rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"max-h-6\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"max-height: 1.5rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"max-h-7\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"max-height: 1.75rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"max-h-8\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"max-height: 2rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"max-h-9\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"max-height: 2.25rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"max-h-10\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"max-height: 2.5rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"max-h-11\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"max-height: 2.75rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"max-h-12\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"max-height: 3rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"max-h-14\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"max-height: 3.5rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"max-h-16\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"max-height: 4rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"max-h-20\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"max-height: 5rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"max-h-24\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"max-height: 6rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"max-h-28\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"max-height: 7rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"max-h-32\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"max-height: 8rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"max-h-36\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"max-height: 9rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"max-h-40\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"max-height: 10rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"max-h-44\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"max-height: 11rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"max-h-48\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"max-height: 12rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"max-h-52\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"max-height: 13rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"max-h-56\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"max-height: 14rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"max-h-60\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"max-height: 15rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"max-h-64\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"max-height: 16rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"max-h-72\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"max-height: 18rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"max-h-80\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"max-height: 20rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"max-h-96\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"max-height: 24rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"max-h-px\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"max-height: 1px;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"max-h-full\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"max-height: 100%;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"max-h-screen\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"max-height: 100vh;\")))), 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-max-height","title":"Tailwind Max Height","items":[{"url":"#applying-tailwind-max-height","title":"Applying Tailwind Max Height"},{"url":"#preview","title":"Preview"},{"url":"#percentage-based-tailwind-max-height","title":"Percentage-based Tailwind Max Height"},{"url":"#preview-1","title":"Preview"},{"url":"#responsive-tailwind-max-height","title":"Responsive Tailwind Max Height"},{"url":"#tailwind-max-height-classes","title":"Tailwind Max Height Classes"},{"url":"#windframe-tailwind-blocks","title":"Windframe Tailwind blocks"}]}]},"parent":{"__typename":"File","relativePath":"classes/tailwind-max-height.md"},"frontmatter":{"githubUrl":null,"metaTitle":"Tailwind CSS Max-Height","lastUpdated":"14 May 2024","metaDescription":"Tailwind max-height utility class allows you to control the maximum height of elements. To set the Tailwind maximum height of an element, you can use the max-h-{size} class"}}},"pageContext":{"id":"f38e53b0-0a4b-5824-b532-214026c5706c"}},"staticQueryHashes":["2619113677","2619113677","2619113677","2619113677","2619113677","2619113677","2619113677","2619113677","3309287076","3309287076","3706406642","3706406642","3706406642","4045616534","4045616534","956403285"]}