{"componentChunkName":"component---src-templates-tailwindclass-js","path":"/tailwindcss/classes/tailwind-order/","result":{"data":{"site":{"siteMetadata":{"title":"Resources to help developers | Contrast | Devwares","docsLocation":""}},"mdx":{"fields":{"id":"6986be48-052c-587b-9d82-193b035de03f","title":"Tailwind CSS Order","slug":"/classes/tailwind-order/"},"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\": \"17 May 2024\",\n \"title\": \"Tailwind CSS Order\",\n \"metaTitle\": \"Tailwind CSS Order\",\n \"metaDescription\": \"The order utility class in Tailwind CSS allows you to control the order of flex or grid items within a container.\",\n \"canonicalUrl\": \"https://windframe.dev/tailwind/classes/tailwind-order\"\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 Order\"), mdx(\"p\", null, \"The \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"order\"), \" utility class in Tailwind CSS allows you to control the order of flex or grid items within a container. With Tailwind's order class, you can easily adjust the positioning of elements within a flex or grid layout.\"), mdx(\"h2\", null, \"Applying Order\"), mdx(\"p\", null, \"To apply the order to an element, you can use the \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"order-{number}\"), \" utility class, where {number} represents the desired order. The order value can be positive or negative. By default, elements have an order value of 0, which means they appear in their natural order.\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-html\"\n }, \"\\n
Item 1
\\n
Item 2
\\n
Item 3
\\n
\\n
Item 1
\\n
Item 2
\\n
Item 3
\\n