{"componentChunkName":"component---src-templates-tailwindclass-js","path":"/tailwindcss/classes/tailwind-list-style-position/","result":{"data":{"site":{"siteMetadata":{"title":"Resources to help developers | Contrast | Devwares","docsLocation":""}},"mdx":{"fields":{"id":"0b4033da-9614-5589-943e-79398df9e6db","title":"Tailwind CSS List Style Position","slug":"/classes/tailwind-list-style-position/"},"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\": \"1 May 2024\",\n \"title\": \"Tailwind CSS List Style Position\",\n \"metaTitle\": \"Tailwind CSS List Style Position\",\n \"metaDescription\": \"The list-style-position utility class in Tailwind CSS allows you to control the positioning of the list item markers (bullets or numbers) in unordered and ordered lists.\",\n \"canonicalUrl\": \"https://windframe.dev/tailwind/classes/tailwind-list-style-position\"\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 List Style Position\"), mdx(\"p\", null, \"The list-style-position utility class in Tailwind CSS allows you to control the positioning of the list item markers (bullets or numbers) in unordered and ordered lists. With Tailwind's list-style-position class, you can easily adjust the appearance and alignment of list item markers.\"), mdx(\"h2\", null, \"Applying List Style Position\"), mdx(\"p\", null, \"To apply a specific list style position to a list, you can use the \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"list-{value}\"), \" utility class, where {value} represents the desired list style position. Here are the available options:\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, \"list-inside: Positions the list item markers inside the list item container (default).\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"list-outside: Positions the list item markers outside the list item container.\")), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-html\"\n }, \"\\n - List item 1
\\n - List item 2
\\n - List item 3
\\n
\\n\")), mdx(\"h2\", null, \"Preview\"), mdx(\"div\", {\n className: \"rounded-t-xl overflow-hidden bg-green-100 p-4\"\n }, mdx(\"ul\", {\n className: \"list-disc list-inside align-middle max-w-xs m-5 px-2 py-4 bg-green-200 text-green-500 font-medium rounded-md\"\n }, mdx(\"li\", null, \"List item 1\"), mdx(\"li\", null, \"List item 2\"), mdx(\"li\", null, \"List item 3\"))), mdx(\"p\", null, \"In the above example, an unordered list \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"\"), \" element is styled with the list-inside class, which positions the list item markers inside the list item container.\"), mdx(\"h2\", null, \"Changing List Style Position\"), mdx(\"p\", null, \"If you want to change the list style position for a specific list or override the default positioning, you can simply apply the desired \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"list-{value}\"), \" class. For example, to position the list item markers outside the list item container, you can use the list-outside class.\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-html\"\n }, \"\\n - List item 1
\\n - List item 2
\\n - List item 3
\\n
\\n\")), mdx(\"h2\", null, \"Preview\"), mdx(\"div\", {\n className: \"rounded-t-xl overflow-hidden bg-yellow-100 p-4\"\n }, mdx(\"ul\", {\n className: \"list-disc list-outside align-middle max-w-xs m-5 py-4 bg-yellow-200 text-yellow-500 font-medium rounded-md\"\n }, mdx(\"li\", null, \"List item 1\"), mdx(\"li\", null, \"List item 2\"), mdx(\"li\", null, \"List item 3\"))), mdx(\"h2\", null, \"Responsive List Style Position\"), mdx(\"p\", null, \"Tailwind CSS allows you to apply list style position classes responsively at different breakpoints. To use responsive list style position classes, you can append the breakpoint prefix to the utility class. For example, md:list-inside positions the list item markers inside the list item container starting from the medium breakpoint and above.\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-html\"\n }, \"\\n - List item 1
\\n - List item 2
\\n - List item 3
\\n
\\n\")), mdx(\"p\", null, \"In the above example, the list item markers are positioned inside the list item container by default (list-inside), but starting from the medium breakpoint and above, they are positioned outside the list item container (md:list-outside).\"), mdx(\"h2\", null, \"Tailwind List Style Position 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 }, \"list-inside\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"list-style-position: inside;\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"list-outside\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"list-style-position: outside;\")))), mdx(\"h2\", null, \"Windframe Tailwind blocks\"), mdx(\"p\", null, mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://app.windframe.dev/editor?id=blog1\"\n }, \"blog\")));\n}\n;\nMDXContent.isMDXComponent = true;","tableOfContents":{"items":[{"url":"#tailwind-list-style-position","title":"Tailwind List Style Position","items":[{"url":"#applying-list-style-position","title":"Applying List Style Position"},{"url":"#preview","title":"Preview"},{"url":"#changing-list-style-position","title":"Changing List Style Position"},{"url":"#preview-1","title":"Preview"},{"url":"#responsive-list-style-position","title":"Responsive List Style Position"},{"url":"#tailwind-list-style-position-class-table","title":"Tailwind List Style Position Class Table"},{"url":"#windframe-tailwind-blocks","title":"Windframe Tailwind blocks"}]}]},"parent":{"__typename":"File","relativePath":"classes/tailwind-list-style-position.md"},"frontmatter":{"githubUrl":null,"metaTitle":"Tailwind CSS List Style Position","lastUpdated":"1 May 2024","metaDescription":"The list-style-position utility class in Tailwind CSS allows you to control the positioning of the list item markers (bullets or numbers) in unordered and ordered lists."}}},"pageContext":{"id":"0b4033da-9614-5589-943e-79398df9e6db"}},"staticQueryHashes":["2619113677","2619113677","2619113677","2619113677","2619113677","2619113677","2619113677","2619113677","3309287076","3309287076","3706406642","3706406642","3706406642","4045616534","4045616534","956403285"]}