Tailwind CSS - Stroke Width

Tailwind CSS - SVG Stroke Width

Tailwind provides utility classes to control the stroke width of SVG elements. This allows you to style icons and other vector graphics directly within your HTML, keeping your styling consistent with your design system.

Stroke Width Classes

By default, Tailwind includes a few basic stroke width utilities. This scale can be easily customized in your tailwind.config.js file.

Class	CSS Properties
stroke-0	stroke-width: 0;
stroke-1	stroke-width: 1;
stroke-2	stroke-width: 2;

Practical Application

Styling SVGs is a common task in modern web development. Let’s explore how to use stroke width utilities to create interactive and visually appealing icons.

Example: Interactive Icon Styling

In this example, we’ll style a simple checkmark icon. The stroke width will change on hover, providing visual feedback to the user. We also use stroke-current to make the icon’s color inherit from its parent’s text color.

<!--
  For modern development, it's recommended to set up Tailwind CSS with a build tool like Vite or Next.js.
  For simplicity in this demo, we use the Tailwind Play CDN.
-->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Tailwind SVG Stroke Width Example</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 p-8 flex flex-col items-center justify-center min-h-screen">

  <h2 class="text-2xl font-bold mb-6 text-gray-800">
   Interactive SVG Icon
  </h2>

  <button class="px-6 py-3 bg-blue-600 text-white font-semibold rounded-lg shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 flex items-center space-x-2 transition-all">
    <span>Confirm Action</span>
    <!--
      - `size-6` sets width and height.
      - `stroke-current` makes the stroke color match the parent's text color (white).
      - `stroke-2` sets the default stroke width.
      - `group-hover:stroke-1` is an example of changing stroke on parent hover (if button had `group` class)
      - `hover:stroke-1` would work if you hovered the SVG itself.
    -->
    <svg
      xmlns="http://www.w3.org/2000/svg"
      fill="none"
      viewBox="0 0 24 24"
      stroke-width="2"
      stroke="currentColor"
      class="size-6 transition-all duration-300 transform hover:scale-125 hover:stroke-1">
      <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
    </svg>
  </button>

  <p class="mt-4 text-gray-600 text-center max-w-md">Hover over the icon inside the button. The stroke width smoothly transitions from `2` to `1` and the icon scales up, creating a delightful micro-interaction.</p>

</body>
</html>

Customization and Best Practices

• stroke-current is Your Friend: Use stroke-current to make your SVGs inherit color from the parent element’s color property. This makes them easy to theme and reuse.
• Customize Your Scale: If you need more stroke width options, you can easily add them to your tailwind.config.js file under theme.extend.strokeWidth.
• Optimize SVGs: Before using SVGs in your project, run them through an optimizer like SVGO to remove unnecessary code and reduce file size.
• Accessibility: When using SVGs as icons, ensure they have proper accessibility attributes. If they are purely decorative, use aria-hidden="true". If they convey meaning, use a <title> element inside the SVG and/or an aria-label.