{"componentChunkName":"component---src-templates-tailwindclass-js","path":"/tailwindcss/classes/tailwind-stroke-width/","result":{"data":{"site":{"siteMetadata":{"title":"Resources to help developers | Contrast | Devwares","docsLocation":""}},"mdx":{"fields":{"id":"a6caa7bf-1531-5b7b-91e5-555994da3ddd","title":"Tailwind CSS Stroke Width","slug":"/classes/tailwind-stroke-width/"},"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 Stroke Width\",\n \"metaTitle\": \"Tailwind CSS Stroke Width\",\n \"metaDescription\": \"The stroke-width utility class in Tailwind CSS allows you to control the width of strokes applied to SVG elements.\",\n \"canonicalUrl\": \"https://windframe.dev/tailwind/classes/tailwind-stroke-width\"\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 Stroke Width\"), mdx(\"p\", null, \"The stroke-width utility class in Tailwind CSS allows you to control the width of strokes applied to SVG elements. With Tailwind's stroke-width class, you can easily adjust the thickness of strokes to achieve the desired visual effect.\"), mdx(\"h2\", null, \"Applying Stroke Width\"), mdx(\"p\", null, \"To apply a specific stroke width to an SVG element, you can use the stroke-{width} utility class, where {width} represents the desired width value. The available width values are:\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, \"stroke-0: No stroke width. The stroke will not be visible.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"stroke-1: A thin stroke with a width of 1 pixel.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"stroke-2: A medium stroke with a width of 2 pixels.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"stroke-4: A thick stroke with a width of 4 pixels.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"stroke-{custom}: Allows you to define a custom stroke width. Replace {custom} with the desired width value.\\nHere's an example:\")), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-html\"\n }, \"\\n\\n\")), mdx(\"h2\", null, \"Preview\"), mdx(\"div\", {\n className: \"rounded-t-xl overflow-hidden bg-green-100 p-10 \"\n }, mdx(\"div\", {\n className: \"aspect-auto rounded-md h-full w-full flex items-center justify-center font-bold\"\n }, mdx(\"svg\", {\n className: \"stroke-green-400 stroke-1\",\n width: \"101px\",\n height: \"101px\",\n viewBox: \"0 0 24 24\",\n fill: \"none\",\n xmlns: \"http://www.w3.org/2000/svg\",\n stroke: \"#8f8f8f\"\n }, mdx(\"g\", {\n id: \"SVGRepo_bgCarrier\",\n strokeWidth: \"0\"\n }), mdx(\"g\", {\n id: \"SVGRepo_tracerCarrier\",\n strokeLinecap: \"round\",\n strokeLinejoin: \"round\"\n }), mdx(\"g\", {\n id: \"SVGRepo_iconCarrier\"\n }, mdx(\"path\", {\n d: \"M6 10L6.72147 5.6712C6.8822 4.70683 7.71658 4 8.69425 4H15.3057C16.2834 4 17.1178 4.70683 17.2785 5.6712L18 10M6 10H18M6 10C4.89543 10 4 10.8954 4 12V14C4 15.1046 4.89543 16 6 16M18 10C19.1046 10 20 10.8954 20 12V14C20 15.1046 19.1046 16 18 16M18 16H6M18 16L17.9999 17.5001C17.9999 18.3284 17.3283 19 16.4999 19C15.6715 19 15 18.3284 15 17.5001V16H18ZM6 16V17.5001C6 18.3284 6.67155 19 7.49995 19C8.32835 19 8.9999 18.3284 8.9999 17.5001V16H6Z\"\n }))), mdx(\"svg\", {\n className: \"stroke-green-400 stroke-2\",\n width: \"101px\",\n height: \"101px\",\n viewBox: \"0 0 24 24\",\n fill: \"none\",\n xmlns: \"http://www.w3.org/2000/svg\",\n stroke: \"#8f8f8f\"\n }, mdx(\"g\", {\n id: \"SVGRepo_bgCarrier\",\n strokeWidth: \"0\"\n }), mdx(\"g\", {\n id: \"SVGRepo_tracerCarrier\",\n strokeLinecap: \"round\",\n strokeLinejoin: \"round\"\n }), mdx(\"g\", {\n id: \"SVGRepo_iconCarrier\"\n }, mdx(\"path\", {\n d: \"M6 10L6.72147 5.6712C6.8822 4.70683 7.71658 4 8.69425 4H15.3057C16.2834 4 17.1178 4.70683 17.2785 5.6712L18 10M6 10H18M6 10C4.89543 10 4 10.8954 4 12V14C4 15.1046 4.89543 16 6 16M18 10C19.1046 10 20 10.8954 20 12V14C20 15.1046 19.1046 16 18 16M18 16H6M18 16L17.9999 17.5001C17.9999 18.3284 17.3283 19 16.4999 19C15.6715 19 15 18.3284 15 17.5001V16H18ZM6 16V17.5001C6 18.3284 6.67155 19 7.49995 19C8.32835 19 8.9999 18.3284 8.9999 17.5001V16H6Z\"\n }))))), mdx(\"h2\", null, \"Responsive Stroke Width\"), mdx(\"p\", null, \"Tailwind CSS allows you to apply stroke width classes responsively at different breakpoints. To use responsive stroke width classes, you can append the breakpoint prefix to the utility class. For example, md:stroke-4 sets the stroke width to 4 pixels starting from the medium breakpoint and above.\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-html\"\n }, \"\\n\")), mdx(\"p\", null, \"In the above example, the stroke width of the \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"