{"componentChunkName":"component---src-templates-tailwindclass-js","path":"/tailwindcss/classes/tailwind-max-width/","result":{"data":{"site":{"siteMetadata":{"title":"Resources to help developers | Contrast | Devwares","docsLocation":""}},"mdx":{"fields":{"id":"51e03c75-ec5a-5e18-a441-644a56cac6ef","title":"Tailwind CSS Max-Width","slug":"/classes/tailwind-max-width/"},"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-Width\",\n  \"metaTitle\": \"Tailwind Max-Width\",\n  \"metaDescription\": \"The Tailwind max-width utility class provides a set of classes that enable you to set the maximum width to specific values, percentages, or use predefined max-width utilities for common use cases.\",\n  \"canonicalUrl\": \"https://windframe.dev/tailwind/classes/tailwind-max-width\"\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 Width\"), mdx(\"p\", null, \"The \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"max-width\"), \" utility class in Tailwind CSS allows you to control the maximum width of elements. It provides a set of classes that enable you to set the maximum width to specific values, percentages, or use predefined max-width utilities for common use cases.\"), mdx(\"h2\", null, \"Setting Tailwind Max Width\"), mdx(\"p\", null, \"To set the Tailwind max-width of an element, you can use the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"max-w-{size}\"), \" class, where {size} can be one of the following options:\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"max-w-{value}\"), \": This sets the maximum width to a specific value in pixels.\")), mdx(\"p\", null, mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"max-w-xs\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"max-w-sm\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"max-w-md\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"max-w-lg\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"max-w-xl\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"max-w-2xl\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"max-w-3xl\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"max-w-4xl\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"max-w-5xl\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"max-w-6xl\"), \": These are predefined max-width classes that provide commonly used maximum widths for different breakpoints.\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"max-w-full\"), \": This sets the maximum width to 100% of the parent container. \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"max-w-screen-sm\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"max-w-screen-md\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"max-w-screen-lg\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"max-w-screen-xl\"), \": These are predefined max-width classes that set the maximum width to the corresponding breakpoint size of the viewport.\")), mdx(\"p\", null, \"Here's an example of how to use the Tailwind max-width utility classes:\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-html\"\n  }, \"<div class=\\\"max-w-lg\\\">\\n  This div has a maximum width of large size.\\n</div>\\n\")), mdx(\"h2\", null, \"Preview\"), mdx(\"div\", {\n    className: \"rounded-t-xl overflow-hidden bg-purple-100 p-10 \"\n  }, mdx(\"div\", {\n    className: \"max-w-lg mx-auto text-2xl bg-purple-500 rounded-md flex items-center justify-center text-white font-extrabold py-3\"\n  }, \"  This div has a maximum width of large size.\")), mdx(\"h2\", null, \"Percentage-based Max-Width\"), mdx(\"p\", null, \"Tailwind CSS also provides utility classes for setting Tailwind max width as a percentage of the parent container's width. You can use the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"max-w-{percentage}\"), \" class to achieve this. Here's an example:\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-html\"\n  }, \"<div class=\\\"max-w-full\\\">\\n  This div has a maximum width of 100% of its parent container.\\n</div>\\n\")), mdx(\"h2\", null, \"Preview\"), mdx(\"div\", {\n    className: \"rounded-t-xl overflow-hidden bg-purple-100 p-10 \"\n  }, mdx(\"div\", {\n    className: \"max-w-full mx-auto text-2xl bg-purple-500 rounded-md flex items-center justify-center text-white font-extrabold py-3\"\n  }, \" This div has a maximum width of 100% of its parent container.\")), mdx(\"hr\", null), mdx(\"h2\", null, \"Responsive Tailwind Max Width\"), mdx(\"p\", null, \"Tailwind CSS allows you to control the maximum width of elements responsively at different breakpoints. To use responsive Tailwind max width classes, you can append the breakpoint prefix to the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"max-width\"), \" classes. For example, \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"md:max-w-48\"), \" sets the maximum width 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-w-lg md:max-w-48\\\">\\n  This div has a maximum width of large size 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-w-lg\"), \" class is applied by default, setting the Tailwind max width to a large size. However, starting from the medium breakpoint and above, the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"md:max-w-48\"), \" class is applied, changing the Tailwind max width to 48 pixels.\"), mdx(\"h2\", null, \"Tailwind Max Width 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  }, \"max-w-0\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"max-width: 0rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"max-w-none\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"max-width: none;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"max-w-xs\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"max-width: 20rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"max-w-sm\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"max-width: 24rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"max-w-md\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"max-width: 28rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"max-w-lg\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"max-width: 32rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"max-w-xl\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"max-width: 36rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"max-w-2xl\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"max-width: 42rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"max-w-3xl\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"max-width: 48rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"max-w-4xl\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"max-width: 56rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"max-w-5xl\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"max-width: 64rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"max-w-6xl\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"max-width: 72rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"max-w-7xl\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"max-width: 80rem;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"max-w-full\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"max-width: 100%;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"max-w-min\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"max-width: min-content;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"max-w-max\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"max-width: max-content;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"max-w-prose\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"max-width: 65ch;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"max-w-screen-sm\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"max-width: 640px;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"max-w-screen-md\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"max-width: 768px;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"max-w-screen-lg\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"max-width: 1024px;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"max-w-screen-xl\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"max-width: 1280px;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"max-w-screen-2xl\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"max-width: 1536px;\")))), 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-width","title":"Tailwind Max Width","items":[{"url":"#setting-tailwind-max-width","title":"Setting Tailwind Max Width"},{"url":"#preview","title":"Preview"},{"url":"#percentage-based-max-width","title":"Percentage-based Max-Width"},{"url":"#preview-1","title":"Preview"},{"url":"#responsive-tailwind-max-width","title":"Responsive Tailwind Max Width"},{"url":"#tailwind-max-width-class-table","title":"Tailwind Max Width class Table"},{"url":"#windframe-tailwind-blocks","title":"Windframe Tailwind blocks"}]}]},"parent":{"__typename":"File","relativePath":"classes/tailwind-max-width.md"},"frontmatter":{"githubUrl":null,"metaTitle":"Tailwind Max-Width","lastUpdated":"14 May 2024","metaDescription":"The Tailwind max-width utility class provides a set of classes that enable you to set the maximum width to specific values, percentages, or use predefined max-width utilities for common use cases."}}},"pageContext":{"id":"51e03c75-ec5a-5e18-a441-644a56cac6ef"}},"staticQueryHashes":["2619113677","2619113677","2619113677","2619113677","2619113677","2619113677","2619113677","2619113677","3309287076","3309287076","3706406642","3706406642","3706406642","4045616534","4045616534","956403285"]}