Tailwind CSS - Stroke

Tailwind CSS - SVG Stroke Color

Utilities for setting the stroke color of SVG elements. These classes allow you to easily style the outlines of your icons and shapes, integrating them seamlessly with your design system.

Core Concepts

Styling SVG strokes in Tailwind is analogous to styling text color or border color. You use the stroke-{color} utility classes. For these classes to have an effect, the SVG itself must not have an inline stroke attribute that would override the CSS, and it typically should have fill="none" or use fill utilities like fill-transparent.

Common Stroke Utilities

The full range of your project’s color palette is available for strokes. Here are the most fundamental classes:

Class	CSS Properties	Description
`stroke-none`	`stroke: none;`	Removes the stroke from an SVG.
`stroke-current`	`stroke: currentColor;`	Sets the stroke color to the current text color. Very useful for icons inside buttons.
`stroke-transparent`	`stroke: transparent;`	Sets the stroke color to be transparent.
`stroke-{color}-{shade}`	`stroke: #...;`	Sets the stroke to a specific color from your theme (e.g., `stroke-blue-500`).

Note: For a complete list of all available color utilities, please refer to the official Tailwind CSS documentation on Stroke.

Practical Application: Creating an Icon Button

In this example, we will create a settings button. The gear icon inside will use stroke-current, inheriting its color from the button’s text color. When hovering over the button, both the text and the icon’s stroke will change color, creating a cohesive interactive experience.

Example: Interactive Icon

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>SVG Stroke Color Example</title>
  <!-- For demonstration, we use the Tailwind Play CDN. In a real project, set up Tailwind CSS with a build step. -->
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-slate-100 dark:bg-slate-900 antialiased font-sans flex items-center justify-center min-h-screen p-4">

  <div class="space-y-4 text-center">
    <h1 class="text-2xl font-bold text-slate-900 dark:text-white">SVG Stroke Color & Interaction</h1>
    <p class="text-slate-600 dark:text-slate-400">Hover over the icon to see the stroke color change.</p>

    <div class="p-4">
        <!-- An accessible icon button -->
        <button class="group flex items-center justify-center p-3 rounded-full bg-slate-200 dark:bg-slate-800 hover:bg-blue-500 dark:hover:bg-blue-500 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-slate-100 dark:focus:ring-offset-slate-900">
            <span class="sr-only">Settings</span>
            <!-- The SVG icon -->
            <svg
                class="h-6 w-6 text-slate-700 dark:text-slate-300 group-hover:text-white transition-colors duration-200"
                xmlns="http://www.w3.org/2000/svg"
                fill="none"
                viewBox="0 0 24 24"
                stroke-width="1.5"
                stroke="currentColor"
                aria-hidden="true">
                <path stroke-linecap="round" stroke-linejoin="round" d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.324.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 011.37.49l1.296 2.247a1.125 1.125 0 01-.26 1.431l-1.003.827c-.293.24-.438.613-.438.995s.145.755.438.995l1.003.827c.48.398.668 1.03.26 1.431l-1.296 2.247a1.125 1.125 0 01-1.37.49l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.57 6.57 0 01-.22.128c-.331.183-.581.495-.644.869l-.213 1.28c-.09.543-.56.941-1.11.941h-2.594c-.55 0-1.02-.398-1.11-.94l-.213-1.281c-.063-.374-.313-.686-.645-.87a6.52 6.52 0 01-.22-.127c-.324-.196-.72-.257-1.075-.124l-1.217.456a1.125 1.125 0 01-1.37-.49l-1.296-2.247a1.125 1.125 0 01.26-1.431l1.004-.827c.292-.24.437-.613.437-.995s-.145-.755-.437-.995l-1.004-.827a1.125 1.125 0 01-.26-1.431l1.296-2.247a1.125 1.125 0 011.37-.49l1.217.456c.355.133.75.072 1.076-.124.072-.044.146-.087.22-.128.332-.183.582-.495.644-.869l.213-1.28z" />
                <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
            </svg>
        </button>
    </div>
  </div>
</body>
</html>

Debugging Tips

If your stroke-* classes aren’t working, check for the following common issues:

Inline SVG Attributes: The SVG code itself might have stroke="somecolor" written directly in the <svg> or <path> tag. This inline attribute will always override Tailwind’s CSS classes. Remove it to allow Tailwind to take control.
Missing Stroke Width: A stroke color is invisible if the stroke has no width. Ensure you’re using a stroke-width utility (e.g., stroke-1, stroke-2) or that the SVG has a stroke-width attribute.
Fill vs. Stroke: Make sure you are intending to color the stroke, not the fill. Use fill-none or fill-transparent if you only want to see the outline of the shape.