{"componentChunkName":"component---src-templates-tailwindclass-js","path":"/tailwindcss/classes/tailwind-width/","result":{"data":{"site":{"siteMetadata":{"title":"Resources to help developers | Contrast | Devwares","docsLocation":""}},"mdx":{"fields":{"id":"5e030043-d449-5925-9526-167156ed43b5","title":"Tailwind CSS Width","slug":"/classes/tailwind-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\": \"20 May 2024\",\n \"title\": \"Tailwind CSS Width\",\n \"metaTitle\": \"Tailwind Width\",\n \"metaDescription\": \"The tailwind width utility classes allow you to easily control the width of elements in your web applications.\",\n \"canonicalUrl\": \"https://windframe.dev/tailwind/classes/tailwind-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 Width\"), mdx(\"p\", null, \"The tailwind width utility classes allow you to easily control the width of elements in your web applications. With a wide range of options and flexibility, you can achieve responsive designs and fine-grained control over the width of your elements.\"), mdx(\"h2\", null, \"How to set Tailwind Width\"), mdx(\"p\", null, \"You can set the Tailwind width of an element using the \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"w-{size}\"), \" utility class, where \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"{size}\"), \" represents the desired width. The \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"{size}\"), \" can be a fixed width in pixels (e.g., w-64), a relative width using a fraction (e.g., w-1/2), or a percentage width (e.g., w-1/4 or w-25).\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-html\"\n }, \"
\\n
w-14
\\n
w-16
\\n
w-32
\\n
\\n\")), mdx(\"h2\", null, \"Preview\"), mdx(\"div\", {\n className: \"rounded-t-xl overflow-hidden bg-yellow-100 p-10\"\n }, mdx(\"div\", {\n className: \"flex flex-row justify-center items-center gap-8 my-auto font-mono font-bold text-white text-center\"\n }, mdx(\"div\", {\n className: \"flex items-center justify-center rounded-md h-14 w-14 bg-yellow-500 shadow-lg\"\n }, \"w-14\"), mdx(\"div\", {\n className: \"flex items-center justify-center rounded-md h-16 w-16 bg-yellow-500 shadow-lg\"\n }, \"w-16\"), mdx(\"div\", {\n className: \"flex items-center justify-center rounded-md h-32 w-32 bg-yellow-500 shadow-lg\"\n }, \"w-32\"))), mdx(\"h2\", null, \"Tailwind Fixed Width\"), mdx(\"p\", null, \"To apply a fixed width to an element, you can use classes like \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"w-px\"), \", \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"w-1\"), \", \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"w-4\"), \", \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"w-8\"), \", etc. Each of these classes corresponds to a specific width in pixels, calculated based on the root font size (by default, 1rem is equal to 16px).\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-html\"\n }, \"
\\n
w-20
\\n
w-32
\\n
w-40
\\n
w-60
\\n
w-80
\\n
w-96
\\n
\\n\")), mdx(\"h2\", null, \"Preview\"), mdx(\"div\", {\n className: \"flex justify-center bg-indigo-100 rounded-t-xl overflow-hidden\"\n }, mdx(\"div\", {\n className: \"space-y-4 font-mono font-bold text-xs text-center text-white\"\n }, mdx(\"div\", {\n className: \"px-4 py-2 bg-indigo-500 rounded-lg shadow-lg w-20\"\n }, \"w-20\"), mdx(\"div\", {\n className: \"px-4 py-2 bg-indigo-500 rounded-lg shadow-lg w-32\"\n }, \"w-32\"), mdx(\"div\", {\n className: \"px-4 py-2 bg-indigo-500 rounded-lg shadow-lg w-40\"\n }, \"w-40\"), mdx(\"div\", {\n className: \"px-4 py-2 bg-indigo-500 rounded-lg shadow-lg w-60 hidden sm:block\"\n }, \" w-60\"), mdx(\"div\", {\n className: \"px-4 py-2 bg-indigo-500 rounded-lg shadow-lg w-80 hidden sm:block\"\n }, \"w-80\"), mdx(\"div\", {\n className: \"px-4 py-2 bg-indigo-500 rounded-lg shadow-lg w-96 hidden sm:block\"\n }, \"W-96\"))), mdx(\"h2\", null, \"Tailwind Width Percentage\"), mdx(\"p\", null, \"For a more fluid design, Tailwind provides classes for percentage-based widths. These are especially useful for creating responsive layouts.\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-html\"\n }, \"\\n
w-full
\\n
\\n
w-4/5
\\n
w-1/2
\\n
\\n
\\n
w-4/5
\\n
w-1/5
\\n
\\n
\\n
w-3/4
\\n
w-1/4
\\n
\\n
\\n
w-2/3
\\n
w-1/3
\\n
\\n
\\n
w-1/2
\\n
w-1/2
\\n\\n\\n\")), mdx(\"h2\", null, \"Preview\"), mdx(\"div\", {\n className: \"bg-green-100 rounded-t-xl overflow-hidden\"\n }, mdx(\"div\", {\n className: \"space-y-4 font-mono font-bold text-xs text-center text-white\"\n }, mdx(\"div\", {\n className: \"w-full px-4 py-2 bg-green-500 rounded-lg shadow-lg text-center text-white font-mono\"\n }, \"w-full\"), mdx(\"div\", {\n className: \"flex gap-4\"\n }, mdx(\"div\", {\n className: \"px-4 py-2 bg-green-500 rounded-lg shadow-lg w-4/5\"\n }, \"w-4/5\"), mdx(\"div\", {\n className: \"px-4 py-2 bg-green-500 rounded-lg shadow-lg w-1/6\"\n }, \"w-1/2\")), mdx(\"div\", {\n className: \"flex gap-4\"\n }, mdx(\"div\", {\n className: \"px-4 py-2 bg-green-500 rounded-lg shadow-lg w-4/5\"\n }, \"w-4/5\"), mdx(\"div\", {\n className: \"px-4 py-2 bg-green-500 rounded-lg shadow-lg w-1/5\"\n }, \"w-1/5\")), mdx(\"div\", {\n className: \"flex gap-4\"\n }, mdx(\"div\", {\n className: \"px-4 py-2 bg-green-500 rounded-lg shadow-lg w-3/4\"\n }, \"w-3/4\"), mdx(\"div\", {\n className: \"px-4 py-2 bg-green-500 rounded-lg shadow-lg w-1/4\"\n }, \"w-1/4\")), mdx(\"div\", {\n className: \"flex gap-4\"\n }, mdx(\"div\", {\n className: \"px-4 py-2 bg-green-500 rounded-lg shadow-lg w-2/3\"\n }, \"w-2/3\"), mdx(\"div\", {\n className: \"px-4 py-2 bg-green-500 rounded-lg shadow-lg w-1/3\"\n }, \"w-1/3\")), mdx(\"div\", {\n className: \"flex gap-4\"\n }, mdx(\"div\", {\n className: \"px-4 py-2 bg-green-500 rounded-lg shadow-lg w-1/2\"\n }, \"w-1/2\"), mdx(\"div\", {\n className: \"px-4 py-2 bg-green-500 rounded-lg shadow-lg w-1/2\"\n }, \"w-1/2\")))), mdx(\"h2\", null, \"Tailwind ViewPoint Width\"), mdx(\"p\", null, \"Sometimes, you might want an element to span the entire width of the viewport. Tailwind has classes like w-screen for full viewport width.\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-html\"\n }, \"
...
\\n\")), mdx(\"h2\", null, \"Responsive Tailwind Width\"), mdx(\"p\", null, \"Tailwind CSS also offers responsive width utility classes, allowing you to control the width of elements at different breakpoints. To use responsive \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://www.devwares.com/blog/tailwind-width/\"\n }, \"tailwind width\"), \" classes, you can append the breakpoint prefix to the width class. For example, \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"md:w-1/2\"), \" sets the width to 50% starting from the medium breakpoint and above\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-html\"\n }, \"
\\n Full width on mobile, half width on medium screens, and quarter width on large screens\\n
\\n\")), mdx(\"h2\", null, \"Customizing Tailwind Width\"), mdx(\"p\", null, \"Tailwind CSS provides an extensive configuration file that allows you to customize various aspects of the framework, including width values. You can refer to the official \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://tailwindcss.com/docs/width\"\n }, \"Tailwind CSS documentation\"), \" on customizing the configuration to learn more about modifying the default width values.\"), mdx(\"h2\", null, \"Tailwind Width Class\"), 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 }, \"w-0\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"width: 0px;\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"w-0.5\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"width: 0.125rem;\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"w-1\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"width: 0.25rem;\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"w-1.5\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"width: 0.375rem;\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"w-2\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"width: 0.5rem;\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"w-2.5\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"width: 0.625rem;\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"w-3\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"width: 0.75rem;\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"w-3.5\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"width: 0.875rem;\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"w-4\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"width: 1rem;\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"w-5\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"width: 1.25rem;\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"w-6\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"width: 1.5rem;\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"w-7\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"width: 1.75rem;\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"w-8\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"width: 2rem;\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"w-9\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"width: 2.25rem;\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"w-10\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"width: 2.5rem;\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"w-11\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"width: 2.75rem;\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"w-12\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"width: 3rem;\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"w-14\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"width: 3.5rem;\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"w-16\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"width: 4rem;\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"w-20\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"width: 5rem;\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"w-24\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"width: 6rem;\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"w-28\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"width: 7rem;\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"w-32\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"width: 8rem;\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"w-36\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"width: 9rem;\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"w-40\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"width: 10rem;\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"w-44\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"width: 11rem;\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"w-48\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"width: 12rem;\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"w-52\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"width: 13rem;\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"w-56\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"width: 14rem;\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"w-60\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"width: 15rem;\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"w-64\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"width: 16rem;\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"w-72\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"width: 18rem;\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"w-80\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"width: 20rem;\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"w-96\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"width: 24rem;\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"w-auto\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"width: auto;\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"w-px\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"width: 1px;\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"w-1/2\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"width: 50%;\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"w-1/3\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"width: 33.333333%;\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"w-2/3\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"width: 66.666667%;\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"w-1/4\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"width: 25%;\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"w-2/4\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"width: 50%;\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"w-3/4\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"width: 75%;\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"w-1/5\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"width: 20%;\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"w-2/5\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"width: 40%;\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"w-3/5\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"width: 60%;\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"w-4/5\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"width: 80%;\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"w-1/6\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"width: 16.666667%;\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"w-2/6\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"width: 33.333333%;\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"w-3/6\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"width: 50%;\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"w-4/6\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"width: 66.666667%;\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"w-5/6\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"width: 83.333333%;\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"w-1/12\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"width: 8.333333%;\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"w-2/12\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"width: 16.666667%;\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"w-3/12\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"width: 25%;\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"w-4/12\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"width: 33.333333%;\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"w-5/12\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"width: 41.666667%;\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"w-6/12\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"width: 50%;\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"w-7/12\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"width: 58.333333%;\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"w-8/12\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"width: 66.666667%;\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"w-9/12\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"width: 75%;\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"w-10/12\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"width: 83.333333%;\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"w-11/12\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"width: 91.666667%;\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"w-full\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"width: 100%;\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"w-screen\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"width: 100vw;\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"w-min\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"width: min-content;\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"w-max\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"width: max-content;\")))), mdx(\"h2\", null, \"Windframe Tailwind blocks\"), mdx(\"p\", null, mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://app.windframe.dev/editor?id=header16\"\n }, \"landing page\")));\n}\n;\nMDXContent.isMDXComponent = true;","tableOfContents":{"items":[{"url":"#tailwind-width","title":"Tailwind Width","items":[{"url":"#how-to-set-tailwind-width","title":"How to set Tailwind Width"},{"url":"#preview","title":"Preview"},{"url":"#tailwind-fixed-width","title":"Tailwind Fixed Width"},{"url":"#preview-1","title":"Preview"},{"url":"#tailwind-width-percentage","title":"Tailwind Width Percentage"},{"url":"#preview-2","title":"Preview"},{"url":"#tailwind-viewpoint-width","title":"Tailwind ViewPoint Width"},{"url":"#responsive-tailwind-width","title":"Responsive Tailwind Width"},{"url":"#customizing-tailwind-width","title":"Customizing Tailwind Width"},{"url":"#tailwind-width-class","title":"Tailwind Width Class"},{"url":"#windframe-tailwind-blocks","title":"Windframe Tailwind blocks"}]}]},"parent":{"__typename":"File","relativePath":"classes/tailwind-width.md"},"frontmatter":{"githubUrl":null,"metaTitle":"Tailwind Width","lastUpdated":"20 May 2024","metaDescription":"The tailwind width utility classes allow you to easily control the width of elements in your web applications."}}},"pageContext":{"id":"5e030043-d449-5925-9526-167156ed43b5"}},"staticQueryHashes":["2619113677","2619113677","2619113677","2619113677","2619113677","2619113677","2619113677","2619113677","3309287076","3309287076","3706406642","3706406642","3706406642","4045616534","4045616534","956403285"]}