{"componentChunkName":"component---src-templates-tailwindclass-js","path":"/tailwindcss/classes/tailwind-scale/","result":{"data":{"site":{"siteMetadata":{"title":"Resources to help developers | Contrast | Devwares","docsLocation":""}},"mdx":{"fields":{"id":"3dda6b18-1219-589b-98de-cb158a82048c","title":"Tailwind CSS Scale","slug":"/classes/tailwind-scale/"},"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\": \"4 May 2024\",\n \"title\": \"Tailwind CSS Scale\",\n \"metaTitle\": \"Tailwind CSS Scale\",\n \"metaDescription\": \"The scale utility class in Tailwind CSS allows you to apply scaling transformations to elements.\",\n \"canonicalUrl\": \"https://windframe.dev/tailwind/classes/tailwind-scale\"\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 Scale\"), mdx(\"p\", null, \"The scale utility class in Tailwind CSS allows you to apply scaling transformations to elements. It provides a convenient way to resize and adjust the size of elements on the web page.\"), mdx(\"h2\", null, \"Applying Scale Transformations\"), mdx(\"p\", null, \"To apply a scale transformation to an element, you can use the scale-{value} utility class, where {value} represents the desired scaling factor. The available values range from 0 to 100, allowing you to scale elements up or down.\"), mdx(\"p\", null, \"Here's an example:\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-html\"\n }, \"
\\n \\n
\\n
\\n \\n
\\n
\\n \\n
\\n\")), mdx(\"h2\", null, \"Preview\"), mdx(\"div\", {\n \"className\": \"rounded-t-xl overflow-hidden bg-yellow-100 p-10\"\n }, \"\\n \", mdx(\"div\", {\n parentName: \"div\",\n \"className\": \"flex flex-row justify-around space-x-12 md:flex-col md:space-y-0 md:space-x-12\"\n }, \"\\n \", mdx(\"div\", {\n parentName: \"div\",\n \"className\": \"w-24 h-24 bg-yellow-400 rounded-md\"\n }, \"\\n \", mdx(\"img\", {\n parentName: \"div\",\n \"className\": \"w-24 h-24 transform scale-50\",\n \"src\": \"https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=256&q=80\"\n }), \"\\n \"), \"\\n \", mdx(\"div\", {\n parentName: \"div\",\n \"className\": \"w-24 h-24 bg-yellow-400\"\n }, \"\\n \", mdx(\"img\", {\n parentName: \"div\",\n \"className\": \"w-24 h-24 transform scale-100\",\n \"src\": \"https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=256&q=80\"\n }), \"\\n \"), \"\\n \", mdx(\"div\", {\n parentName: \"div\",\n \"className\": \"w-24 h-24 bg-yellow-400\"\n }, \"\\n \", mdx(\"img\", {\n parentName: \"div\",\n \"className\": \"w-24 h-24 transform scale-125\",\n \"src\": \"https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=256&q=80\"\n }), \"\\n \"), \"\\n \")), mdx(\"h2\", null, \"Responsive Scale Transformations\"), mdx(\"p\", null, \"Tailwind CSS allows you to apply scale transformations responsively at different breakpoints. To use responsive scale classes, you can append the breakpoint prefix to the utility class. For example, md:scale-90 applies a scale transformation to the element starting from the medium breakpoint and above.\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-html\"\n }, \"