graphql
react

Tailwind CSS 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:
html
<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.

html
<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

ClassProperties
stroke-0stroke-width: 0;
stroke-1stroke-width: 1;
stroke-2stroke-width: 2;

Windframe Tailwind blocks

landing page

Build modern projects using Bootstrap 5 and Contrast

Trying to create components and pages for a web app or website from scratch while maintaining a modern User interface can be very tedious. This is why we created Contrast, to help drastically reduce the amount of time we spend doing that. so we can focus on building some other aspects of the project.

Contrast Bootstrap PRO consists of a Premium UI Kit Library featuring over 10000+ component variants. Which even comes bundled together with its own admin template comprising of 5 admin dashboards and 23+ additional admin and multipurpose pages for building almost any type of website or web app.
See a demo and learn more about Contrast Bootstrap Pro by clicking here.

ad-banner