{"componentChunkName":"component---src-templates-tailwindclass-js","path":"/tailwindcss/classes/tailwind-align-items/","result":{"data":{"site":{"siteMetadata":{"title":"Resources to help developers | Contrast | Devwares","docsLocation":""}},"mdx":{"fields":{"id":"a82bb33b-14b6-5f55-a14f-a494f2e2a24c","title":"Tailwind Align Items","slug":"/classes/tailwind-align-items/"},"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\": \"2 May 2024\",\n  \"title\": \"Tailwind Align Items\",\n  \"metaTitle\": \"Tailwind Align Items\",\n  \"metaDescription\": \"The tailwind align-items utility class allows you to control the vertical alignment of flex items within a flex container.\",\n  \"canonicalUrl\": \"https://windframe.dev/tailwind/classes/tailwind-align-items\"\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 Align Items\"), mdx(\"p\", null, \"The tailwind \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"align-items\"), \" utility class allows you to control the vertical alignment of flex items within a flex container. With Tailwind align items class, you can easily adjust the positioning of flex items along the cross-axis.\"), mdx(\"h2\", null, \"Applying Align Items\"), mdx(\"p\", null, \"To apply the alignment to a flex container, you can use the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"items-{alignment}\"), \" utility class, where \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"{alignment}\"), \" represents the desired alignment. Here are the available alignment options:\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"items-start\"), \": Aligns flex items to the start of the cross-axis.\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"items-end\"), \": Aligns flex items to the end of the cross-axis.\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"items-center\"), \": Aligns flex items to the center of the cross-axis. -\", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"items-baseline\"), \": Aligns flex items to the baseline of the cross-axis.\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"items-stretch\"), \": Stretches flex items to fill the cross-axis.\")), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-html\"\n  }, \"<div class=\\\"flex items-center\\\">\\n  <div class=\\\"bg-blue-500 h-8 w-8\\\">Items 1</div>\\n  <div class=\\\"bg-blue-500 h-4 w-4\\\">Items 2</div>\\n  <div class=\\\"bg-blue-500 h-6 w-6\\\">Items 3</div>\\n</div>\\n\")), mdx(\"h2\", null, \"Preview\"), mdx(\"div\", {\n    className: \"rounded-t-xl overflow-hidden bg-blue-100 p-4\"\n  }, mdx(\"div\", {\n    className: \"flex items-center p-4 space-x-4 rounded-lg\"\n  }, mdx(\"div\", {\n    className: \"flex-1 py-2 rounded-md bg-blue-500 text-white text-2xl font-extrabold flex items-center justify-center\"\n  }, \"Item 1\"), mdx(\"div\", {\n    className: \"flex-1 py-2 rounded-md bg-blue-500 text-white text-2xl font-extrabold flex items-center justify-center\"\n  }, \" items 2\"), mdx(\"div\", {\n    className: \"flex-1 py-2 rounded-md bg-blue-500 text-white text-2xl font-extrabold flex items-center justify-center\"\n  }, \"items 3\"))), mdx(\"h2\", null, \"Responsive Tailwind Align Items\"), mdx(\"p\", null, \"Tailwind CSS allows you to apply align items classes responsively at different breakpoints. To use responsive tailwind align items classes, you can append the breakpoint prefix to the utility class. For example, \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"md:items-center\"), \" applies the center alignment starting from the medium breakpoint and above.\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-html\"\n  }, \"<div class=\\\"flex items-start md:items-center\\\">\\n  <!-- Flex items here -->\\n</div>\\n\")), mdx(\"p\", null, \"In the above example, the flex items are aligned to the start of the cross-axis by default \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"(items-start)\"), \", but starting from the medium breakpoint and above, the alignment is changed to center \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"(items-center)\"), \".\"), mdx(\"h2\", null, \"Tailwind Align Items 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  }, \"items-start\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"align-items: flex-start;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"items-end\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"align-items: flex-end;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"items-center\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"align-items: center;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"items-baseline\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"align-items: baseline;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"items-stretch\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"align-items: stretch;\")))), mdx(\"h2\", null, \"Windframe Tailwind blocks\"), mdx(\"p\", null, mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://app.windframe.dev/editor?id=header16\"\n  }, \"header\")));\n}\n;\nMDXContent.isMDXComponent = true;","tableOfContents":{"items":[{"url":"#tailwind-align-items","title":"Tailwind Align Items","items":[{"url":"#applying-align-items","title":"Applying Align Items"},{"url":"#preview","title":"Preview"},{"url":"#responsive-tailwind-align-items","title":"Responsive Tailwind Align Items"},{"url":"#tailwind-align-items-class-table","title":"Tailwind Align Items Class Table"},{"url":"#windframe-tailwind-blocks","title":"Windframe Tailwind blocks"}]}]},"parent":{"__typename":"File","relativePath":"classes/tailwind-align-items.md"},"frontmatter":{"githubUrl":null,"metaTitle":"Tailwind Align Items","lastUpdated":"2 May 2024","metaDescription":"The tailwind align-items utility class allows you to control the vertical alignment of flex items within a flex container."}}},"pageContext":{"id":"a82bb33b-14b6-5f55-a14f-a494f2e2a24c"}},"staticQueryHashes":["2619113677","2619113677","2619113677","2619113677","2619113677","2619113677","2619113677","2619113677","3309287076","3309287076","3706406642","3706406642","3706406642","4045616534","4045616534","956403285"]}