{"componentChunkName":"component---src-templates-tailwindclass-js","path":"/tailwindcss/classes/tailwind-text-align/","result":{"data":{"site":{"siteMetadata":{"title":"Resources to help developers | Contrast | Devwares","docsLocation":""}},"mdx":{"fields":{"id":"a2962847-0854-524a-aebf-ced39fa3b2af","title":"Tailwind CSS Text-align","slug":"/classes/tailwind-text-align/"},"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\": \"19 May 2024\",\n  \"title\": \"Tailwind CSS Text-align\",\n  \"metaTitle\": \"Tailwind CSS Text-align\",\n  \"metaDescription\": \"The text-align utility class in Tailwind CSS allows you to control the horizontal alignment of text within an element.\",\n  \"canonicalUrl\": \"https://windframe.dev/tailwind/classes/tailwind-text-align\"\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 Text align\"), mdx(\"p\", null, \"The \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"text-align\"), \" utility class in Tailwind CSS allows you to control the horizontal alignment of text within an element. With Tailwind's text-align class, you can easily align text to the left, center, right, or justify it.\"), mdx(\"h2\", null, \"Applying Text Align\"), mdx(\"p\", null, \"To apply the text alignment to an element, you can use the text-{alignment} utility class, where {alignment} represents the desired alignment. Here are the available alignment options:\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"text-left: Aligns the text to the left.\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"text-center: Centers the text horizontally.\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"text-right: Aligns the text to the right.\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"text-justify: Justifies the text, spreading it evenly across the container.\")), mdx(\"h3\", null, \"Text-center\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-html\"\n  }, \"<div class=\\\"text-center\\\">\\n  In a bustling city, cars whizzed by, their honks echoing through the streets. Pedestrians\\n  hurriedly walked, lost in their own thoughts, while street vendors enticed passersby with the\\n  aroma of freshly brewed coffee and sizzling delicacies. Neon lights illuminated the night sky,\\n  painting the cityscape in a kaleidoscope of colors.\\n</div>\\n\")), mdx(\"h2\", null, \"Preview\"), mdx(\"div\", {\n    className: \" bg-blue-50 shadow-xl p-8 rounded-md text-sm leading-6 sm:text-base sm:leading-7 \"\n  }, mdx(\"div\", {\n    className: \"text-center text-black\"\n  }, \"In a bustling city, cars whizzed by, their honks echoing through the streets. Pedestrians hurriedly walked, lost in their own thoughts, while street vendors enticed passersby with the aroma of freshly brewed coffee and sizzling delicacies. Neon lights illuminated the night sky, painting the cityscape in a kaleidoscope of colors.\")), mdx(\"h3\", null, \"Text-right\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-html\"\n  }, \"<div class=\\\"text-right\\\">\\n  In a bustling city, cars whizzed by, their honks echoing through the streets. Pedestrians\\n  hurriedly walked, lost in their own thoughts, while street vendors enticed passersby with the\\n  aroma of freshly brewed coffee and sizzling delicacies. Neon lights illuminated the night sky,\\n  painting the cityscape in a kaleidoscope of colors.\\n</div>\\n\")), mdx(\"h2\", null, \"Preview\"), mdx(\"div\", {\n    className: \" bg-blue-50 shadow-xl p-8 rounded-md text-sm leading-6 sm:text-base sm:leading-7 \"\n  }, mdx(\"div\", {\n    className: \"text-right text-black\"\n  }, \"In a bustling city, cars whizzed by, their honks echoing through the streets. Pedestrians hurriedly walked, lost in their own thoughts, while street vendors enticed passersby with the aroma of freshly brewed coffee and sizzling delicacies. Neon lights illuminated the night sky, painting the cityscape in a kaleidoscope of colors.\")), mdx(\"h3\", null, \"Text-left\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-html\"\n  }, \"<div class=\\\"text-left\\\">\\n  In a bustling city, cars whizzed by, their honks echoing through the streets. Pedestrians\\n  hurriedly walked, lost in their own thoughts, while street vendors enticed passersby with the\\n  aroma of freshly brewed coffee and sizzling delicacies. Neon lights illuminated the night sky,\\n  painting the cityscape in a kaleidoscope of colors.\\n</div>\\n\")), mdx(\"h2\", null, \"Preview\"), mdx(\"div\", {\n    className: \" bg-blue-50 shadow-xl p-8 rounded-md text-sm leading-6 sm:text-base sm:leading-7 \"\n  }, mdx(\"div\", {\n    className: \"text-left text-black\"\n  }, \"In a bustling city, cars whizzed by, their honks echoing through the streets. Pedestrians hurriedly walked, lost in their own thoughts, while street vendors enticed passersby with the aroma of freshly brewed coffee and sizzling delicacies. Neon lights illuminated the night sky, painting the cityscape in a kaleidoscope of colors.\")), mdx(\"h3\", null, \"Text-justify\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-html\"\n  }, \"<div class=\\\"text-justify\\\">\\n  In a bustling city, cars whizzed by, their honks echoing through the streets. Pedestrians\\n  hurriedly walked, lost in their own thoughts, while street vendors enticed passersby with the\\n  aroma of freshly brewed coffee and sizzling delicacies. Neon lights illuminated the night sky,\\n  painting the cityscape in a kaleidoscope of colors.\\n</div>\\n\")), mdx(\"h2\", null, \"Preview\"), mdx(\"div\", {\n    className: \" bg-blue-50 shadow-xl p-8 rounded-md text-sm leading-6 sm:text-base sm:leading-7 \"\n  }, mdx(\"div\", {\n    className: \"text-justify text-black\"\n  }, \"In a bustling city, cars whizzed by, their honks echoing through the streets. Pedestrians hurriedly walked, lost in their own thoughts, while street vendors enticed passersby with the aroma of freshly brewed coffee and sizzling delicacies. Neon lights illuminated the night sky, painting the cityscape in a kaleidoscope of colors.\")), mdx(\"h2\", null, \"Responsive Text Align\"), mdx(\"p\", null, \"Tailwind CSS allows you to apply text alignment classes responsively at different breakpoints. To use responsive text alignment classes, you can append the breakpoint prefix to the utility class. For example, md:text-right aligns the text to the right starting from the medium breakpoint and above.\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-html\"\n  }, \"<div class=\\\"text-left md:text-right\\\">\\n  <!-- Text content here -->\\n</div>\\n\")), mdx(\"p\", null, \"In the above example, the text is aligned to the left by default (text-left), but starting from the medium breakpoint and above, the text alignment is changed to the right (md:text-right).\"), mdx(\"h2\", null, \"Tailwind Text Align 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  }, \"text-left\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"text-align: left;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"text-center\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"text-align: center;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"text-right\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"text-align: right;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"text-justify\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"text-align: justify;\")))), 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-text-align","title":"Tailwind Text align","items":[{"url":"#applying-text-align","title":"Applying Text Align","items":[{"url":"#text-center","title":"Text-center"}]},{"url":"#preview","title":"Preview","items":[{"url":"#text-right","title":"Text-right"}]},{"url":"#preview-1","title":"Preview","items":[{"url":"#text-left","title":"Text-left"}]},{"url":"#preview-2","title":"Preview","items":[{"url":"#text-justify","title":"Text-justify"}]},{"url":"#preview-3","title":"Preview"},{"url":"#responsive-text-align","title":"Responsive Text Align"},{"url":"#tailwind-text-align-class-table","title":"Tailwind Text Align Class Table"},{"url":"#windframe-tailwind-blocks","title":"Windframe Tailwind blocks"}]}]},"parent":{"__typename":"File","relativePath":"classes/tailwind-text-align.md"},"frontmatter":{"githubUrl":null,"metaTitle":"Tailwind CSS Text-align","lastUpdated":"19 May 2024","metaDescription":"The text-align utility class in Tailwind CSS allows you to control the horizontal alignment of text within an element."}}},"pageContext":{"id":"a2962847-0854-524a-aebf-ced39fa3b2af"}},"staticQueryHashes":["2619113677","2619113677","2619113677","2619113677","2619113677","2619113677","2619113677","2619113677","3309287076","3309287076","3706406642","3706406642","3706406642","4045616534","4045616534","956403285"]}