Tailwind Stroke Width

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.

Applying Stroke Width

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:

• stroke-0: No stroke width. The stroke will not be visible.
• stroke-1: A thin stroke with a width of 1 pixel.
• stroke-2: A medium stroke with a width of 2 pixels.
• stroke-4: A thick stroke with a width of 4 pixels.
• stroke-{custom}: Allows you to define a custom stroke width. Replace {custom} with the desired width value. Here's an example:

<svg class="stroke-1">
  <!-- SVG content here -->
</svg>
<svg class="stroke-2">
  <!-- SVG content here -->
</svg>

Preview

Responsive Stroke Width

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.

<svg class="stroke-2 md:stroke-4">
  <!-- SVG content here -->
</svg>

In the above example, the stroke width of the <svg> element is set to 2 pixels by default, but starting from the medium breakpoint and above, it changes to 4 pixels.

Tailwind Stroke Width Class Table

Windframe Tailwind blocks

landing page