{"componentChunkName":"component---src-templates-tailwindclass-js","path":"/tailwindcss/classes/tailwind-align-self/","result":{"data":{"site":{"siteMetadata":{"title":"Resources to help developers | Contrast | Devwares","docsLocation":""}},"mdx":{"fields":{"id":"a7360944-c374-5ae1-b8d2-9dafce92e038","title":"Tailwind Align Self","slug":"/classes/tailwind-align-self/"},"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 Align Self\",\n \"metaTitle\": \"Tailwind Align Self\",\n \"metaDescription\": \"The align-self utility class in Tailwind CSS allows you to control the vertical alignment of individual flex items within a flex containers.\",\n \"canonicalUrl\": \"https://windframe.dev/tailwind/classes/tailwind-align-self\"\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 Self\"), mdx(\"p\", null, \"The \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"align-self\"), \" utility class in Tailwind CSS allows you to control the vertical alignment of individual flex items within a flex container. With Tailwind align-self class, you can easily adjust the positioning of specific flex items along the cross-axis, overriding the default alignment set by the flex container.\"), mdx(\"h2\", null, \"Applying Tailwind Align Self\"), mdx(\"p\", null, \"To apply the alignment to a specific flex item, you can use the tailwind self-{alignment} utility class, where {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 }, \"self-auto\"), \": Resets the alignment to the value set by the flex container.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"self-start\"), \": Aligns the flex item to the start of the cross-axis. -\", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"self-end\"), \": Aligns the flex item to the end of the cross-axis.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"self-center\"), \": Aligns the flex item to the center of the cross-axis.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"self-baseline\"), \": Aligns the flex item to the baseline of the cross-axis.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"self-stretch\"), \": Stretches the flex item to fill the cross-axis.\")), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-html\"\n }, \"
\\n
Item 1
\\n
Item 2
\\n
Item 3
\\n
\\n\")), mdx(\"h2\", null, \"Preview\"), mdx(\"div\", {\n className: \"rounded-t-xl overflow-hidden bg-purple-100 p-4\"\n }, mdx(\"div\", {\n className: \"flex items-center p-4 space-x-4 rounded-lg\"\n }, mdx(\"div\", {\n className: \"self-start flex-1 py-2 rounded-md bg-purple-500 text-white text-2xl font-extrabold flex items-center justify-center\"\n }, \"Item 1\"), mdx(\"div\", {\n className: \"self-end flex-1 py-2 rounded-md bg-purple-500 text-white text-2xl font-extrabold flex items-center justify-center\"\n }, \" items 2\"), mdx(\"div\", {\n className: \"self-center flex-1 py-2 rounded-md bg-purple-500 text-white text-2xl font-extrabold flex items-center justify-center\"\n }, \"items 3\"))), mdx(\"h2\", null, \"Responsive Tailwind Align Self\"), mdx(\"p\", null, \"Tailwind CSS allows you to apply align self classes responsively at different breakpoints. To use responsive tailwind align self classes, you can append the breakpoint prefix to the utility class. For example, \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"md:self-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 }, \"
\\n
\\n \\n
\\n\")), mdx(\"p\", null, \"In the above example, the first flex item is aligned to the start of the cross-axis by default \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"(self-start)\"), \", but starting from the medium breakpoint and above, the alignment is changed to center \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"(self-center)\"), \".\"), mdx(\"h2\", null, \"Tailwind Align-self 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 }, \"self-auto\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"align-self: auto;\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"self-start\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"align-self: flex-start;\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"self-end\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"align-self: flex-end;\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"self-center\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"align-self: center;\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"self-stretch\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"align-self: stretch;\")))), mdx(\"h2\", null, \"Windframe Tailwind blocks\"), mdx(\"p\", null, mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://app.windframe.dev/editor?id=header17\"\n }, \"landing page\")));\n}\n;\nMDXContent.isMDXComponent = true;","tableOfContents":{"items":[{"url":"#tailwind-align-self","title":"Tailwind Align Self","items":[{"url":"#applying-tailwind-align-self","title":"Applying Tailwind Align Self"},{"url":"#preview","title":"Preview"},{"url":"#responsive-tailwind-align-self","title":"Responsive Tailwind Align Self"},{"url":"#tailwind-align-self-class-table","title":"Tailwind Align-self class Table"},{"url":"#windframe-tailwind-blocks","title":"Windframe Tailwind blocks"}]}]},"parent":{"__typename":"File","relativePath":"classes/tailwind-align-self.md"},"frontmatter":{"githubUrl":null,"metaTitle":"Tailwind Align Self","lastUpdated":"20 May 2024","metaDescription":"The align-self utility class in Tailwind CSS allows you to control the vertical alignment of individual flex items within a flex containers."}}},"pageContext":{"id":"a7360944-c374-5ae1-b8d2-9dafce92e038"}},"staticQueryHashes":["2619113677","2619113677","2619113677","2619113677","2619113677","2619113677","2619113677","2619113677","3309287076","3309287076","3706406642","3706406642","3706406642","4045616534","4045616534","956403285"]}