{"componentChunkName":"component---src-templates-tailwindclass-js","path":"/tailwindcss/classes/tailwind-text-indent/","result":{"data":{"site":{"siteMetadata":{"title":"Resources to help developers | Contrast | Devwares","docsLocation":""}},"mdx":{"fields":{"id":"87f6d2de-3c0a-5a9c-aeb1-4f8171d3b52b","title":"Tailwind CSS Text Indent","slug":"/classes/tailwind-text-indent/"},"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\": \"9 May 2024\",\n  \"title\": \"Tailwind CSS Text Indent\",\n  \"metaTitle\": \"Tailwind CSS Text Indent\",\n  \"metaDescription\": \"The text-indent utility class in Tailwind CSS allows you to control the indentation of text within an element.\",\n  \"canonicalUrl\": \"https://windframe.dev/tailwind/classes/tailwind-text-indent\"\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 Indent\"), mdx(\"p\", null, \"The \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"text-indent\"), \" utility class in Tailwind CSS allows you to control the indentation of text within an element. With Tailwind's text-indent class, you can easily apply left indentation to paragraphs, lists, or any other text content.\"), mdx(\"h2\", null, \"Applying Text Indent\"), mdx(\"p\", null, \"To apply text indentation to an element, you can use the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"indent-{value}\"), \" utility class, where {value} represents the desired indentation value. The {value} can be a fixed number or a relative length. Here are some examples:\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"indent-0: No indentation (default).\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"indent-4: Indentation of 4 units (e.g., 1rem or 16px).\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"indent-8: Indentation of 2rem.\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"indent-16: Indentation of 4rem (64px).\")), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-html\"\n  }, \"<p class=\\\"indent-16\\\">\\n  Far away, on a secluded beach, the waves crashed against the shore, creating a soothing rhythm.\\n  The sand, warm beneath my toes, embraced me like an old friend. Seagulls soared gracefully\\n  overhead, their cries mingling with the laughter of children building sandcastles.\\n</p>\\n\")), mdx(\"h2\", null, \"Preview\"), mdx(\"div\", {\n    className: \"relative rounded-xl overflow-auto bg-gray-100 p-8\"\n  }, mdx(\"div\", {\n    className: \"shadow-xl m-4 text-gray-900 bg-gray-300\"\n  }, mdx(\"p\", {\n    className: \"indent-16 p-8\"\n  }, \" Far away, on a secluded beach, the waves crashed against the shore, creating a soothing rhythm. The sand, warm beneath my toes, embraced me like an old friend. Seagulls soared gracefully overhead, their cries mingling with the laughter of children building sandcastles.\"))), mdx(\"h2\", null, \"Responsive Text Indent\"), mdx(\"p\", null, \"Tailwind CSS allows you to apply text indentation classes responsively at different breakpoints. To use responsive text indentation classes, you can append the breakpoint prefix to the utility class. For example, md:indent-8 applies an indentation of 8 units starting from the medium breakpoint and above.\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-html\"\n  }, \"<p class=\\\"indent-4 md:indent-8\\\">\\n  Lorem ipsum dolor sit amet, consectetur adipiscing elit.\\n</p>\\n\")), mdx(\"p\", null, \"In the above example, the paragraph has a left indentation of 4 units by default (text-indent-4), but starting from the medium breakpoint and above, the indentation is increased to 8 units (md:text-indent-8).\"), mdx(\"h2\", null, \"Tailwind Text Indent 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  }, \"indent-0\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"text-indent: 0px;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"indent-px\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"text-indent: 1px;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"indent-0.5\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"text-indent: 0.125rem; /\", mdx(\"em\", {\n    parentName: \"td\"\n  }, \" 2px \"), \"/\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"indent-1\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"text-indent: 0.25rem; /\", mdx(\"em\", {\n    parentName: \"td\"\n  }, \" 4px \"), \"/\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"indent-1.5\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"text-indent: 0.375rem; /\", mdx(\"em\", {\n    parentName: \"td\"\n  }, \" 6px \"), \"/\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"indent-2\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"text-indent: 0.5rem; /\", mdx(\"em\", {\n    parentName: \"td\"\n  }, \" 8px \"), \"/\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"indent-2.5\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"text-indent: 0.625rem; /\", mdx(\"em\", {\n    parentName: \"td\"\n  }, \" 10px \"), \"/\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"indent-3\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"text-indent: 0.75rem; /\", mdx(\"em\", {\n    parentName: \"td\"\n  }, \" 12px \"), \"/\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"indent-3.5\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"text-indent: 0.875rem; /\", mdx(\"em\", {\n    parentName: \"td\"\n  }, \" 14px \"), \"/\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"indent-4\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"text-indent: 1rem; /\", mdx(\"em\", {\n    parentName: \"td\"\n  }, \" 16px \"), \"/\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"indent-5\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"text-indent: 1.25rem; /\", mdx(\"em\", {\n    parentName: \"td\"\n  }, \" 20px \"), \"/\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"indent-6\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"text-indent: 1.5rem; /\", mdx(\"em\", {\n    parentName: \"td\"\n  }, \" 24px \"), \"/\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"indent-7\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"text-indent: 1.75rem; /\", mdx(\"em\", {\n    parentName: \"td\"\n  }, \" 28px \"), \"/\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"indent-8\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"text-indent: 2rem; /\", mdx(\"em\", {\n    parentName: \"td\"\n  }, \" 32px \"), \"/\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"indent-9\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"text-indent: 2.25rem; /\", mdx(\"em\", {\n    parentName: \"td\"\n  }, \" 36px \"), \"/\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"indent-10\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"text-indent: 2.5rem; /\", mdx(\"em\", {\n    parentName: \"td\"\n  }, \" 40px \"), \"/\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"indent-11\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"text-indent: 2.75rem; /\", mdx(\"em\", {\n    parentName: \"td\"\n  }, \" 44px \"), \"/\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"indent-12\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"text-indent: 3rem; /\", mdx(\"em\", {\n    parentName: \"td\"\n  }, \" 48px \"), \"/\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"indent-14\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"text-indent: 3.5rem; /\", mdx(\"em\", {\n    parentName: \"td\"\n  }, \" 56px \"), \"/\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"indent-16\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"text-indent: 4rem; /\", mdx(\"em\", {\n    parentName: \"td\"\n  }, \" 64px \"), \"/\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"indent-20\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"text-indent: 5rem; /\", mdx(\"em\", {\n    parentName: \"td\"\n  }, \" 80px \"), \"/\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"indent-24\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"text-indent: 6rem; /\", mdx(\"em\", {\n    parentName: \"td\"\n  }, \" 96px \"), \"/\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"indent-28\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"text-indent: 7rem; /\", mdx(\"em\", {\n    parentName: \"td\"\n  }, \" 112px \"), \"/\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"indent-32\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"text-indent: 8rem; /\", mdx(\"em\", {\n    parentName: \"td\"\n  }, \" 128px \"), \"/\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"indent-36\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"text-indent: 9rem; /\", mdx(\"em\", {\n    parentName: \"td\"\n  }, \" 144px \"), \"/\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"indent-40\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"text-indent: 10rem; /\", mdx(\"em\", {\n    parentName: \"td\"\n  }, \" 160px \"), \"/\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"indent-44\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"text-indent: 11rem; /\", mdx(\"em\", {\n    parentName: \"td\"\n  }, \" 176px \"), \"/\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"indent-48\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"text-indent: 12rem; /\", mdx(\"em\", {\n    parentName: \"td\"\n  }, \" 192px \"), \"/\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"indent-52\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"text-indent: 13rem; /\", mdx(\"em\", {\n    parentName: \"td\"\n  }, \" 208px \"), \"/\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"indent-56\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"text-indent: 14rem; /\", mdx(\"em\", {\n    parentName: \"td\"\n  }, \" 224px \"), \"/\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"indent-60\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"text-indent: 15rem; /\", mdx(\"em\", {\n    parentName: \"td\"\n  }, \" 240px \"), \"/\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"indent-64\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"text-indent: 16rem; /\", mdx(\"em\", {\n    parentName: \"td\"\n  }, \" 256px \"), \"/\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"indent-72\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"text-indent: 18rem; /\", mdx(\"em\", {\n    parentName: \"td\"\n  }, \" 288px \"), \"/\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"indent-80\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"text-indent: 20rem; /\", mdx(\"em\", {\n    parentName: \"td\"\n  }, \" 320px \"), \"/\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"indent-96\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"text-indent: 24rem; /\", mdx(\"em\", {\n    parentName: \"td\"\n  }, \" 384px \"), \"/\")))), 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-indent","title":"Tailwind Text Indent","items":[{"url":"#applying-text-indent","title":"Applying Text Indent"},{"url":"#preview","title":"Preview"},{"url":"#responsive-text-indent","title":"Responsive Text Indent"},{"url":"#tailwind-text-indent-class-table","title":"Tailwind Text Indent Class Table"},{"url":"#windframe-tailwind-blocks","title":"Windframe Tailwind blocks"}]}]},"parent":{"__typename":"File","relativePath":"classes/tailwind-text-indent.md"},"frontmatter":{"githubUrl":null,"metaTitle":"Tailwind CSS Text Indent","lastUpdated":"9 May 2024","metaDescription":"The text-indent utility class in Tailwind CSS allows you to control the indentation of text within an element."}}},"pageContext":{"id":"87f6d2de-3c0a-5a9c-aeb1-4f8171d3b52b"}},"staticQueryHashes":["2619113677","2619113677","2619113677","2619113677","2619113677","2619113677","2619113677","2619113677","3309287076","3309287076","3706406642","3706406642","3706406642","4045616534","4045616534","956403285"]}