{"componentChunkName":"component---src-templates-tailwindclass-js","path":"/tailwindcss/classes/tailwind-skew/","result":{"data":{"site":{"siteMetadata":{"title":"Resources to help developers | Contrast | Devwares","docsLocation":""}},"mdx":{"fields":{"id":"ccefd64c-4c00-5f27-91e4-b382538e1cc0","title":"Tailwind CSS Skew","slug":"/classes/tailwind-skew/"},"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 Skew\",\n \"metaTitle\": \"Tailwind CSS Skew\",\n \"metaDescription\": \"The skew utility class in Tailwind CSS allows you to apply skew transformations to elements.\",\n \"canonicalUrl\": \"https://windframe.dev/tailwind/classes/tailwind-skew\"\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 Skew\"), mdx(\"p\", null, \"The skew utility class in Tailwind CSS allows you to apply skew transformations to elements. Skewing is a transformation that tilts or slants an element along either the horizontal or vertical axis, giving it a unique visual effect.\"), mdx(\"h2\", null, \"Applying Skew Transformations\"), mdx(\"p\", null, \"To apply a skew transformation to an element, you can use the skew-{value} utility class, where {value} represents the desired angle of skewing. The available values range from -180 to 180, allowing you to skew elements in both positive and negative directions.\"), 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-purple-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-purple-400 rounded-md\"\n }, \"\\n \", mdx(\"img\", {\n parentName: \"div\",\n \"className\": \"w-24 h-24 transform skew-y-0\",\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-purple-400\"\n }, \"\\n \", mdx(\"img\", {\n parentName: \"div\",\n \"className\": \"w-24 h-24 transform skew-x-12\",\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-purple-400\"\n }, \"\\n \", mdx(\"img\", {\n parentName: \"div\",\n \"className\": \"w-24 h-24 transform skew-y-12\",\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 Skew Transformations\"), mdx(\"p\", null, \"Tailwind CSS allows you to apply skew transformations responsively at different breakpoints. To use responsive skew classes, you can append the breakpoint prefix to the utility class. For example, md:skew-x-4 applies a skew transformation to the element along the horizontal axis starting from the medium breakpoint and above.\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-html\"\n }, \"