How to Customize SVG Stroke Styles with Tailwind CSS

Tailwind CSS is a utility-first CSS framework that provides developers with a set of tools to create custom designs quickly and efficiently. One of the aspects you can control with Tailwind is the styling of SVG elements, including their stroke properties. In this article, we’ll delve into how you can manipulate the stroke of SVG graphics using Tailwind CSS to enhance your web projects.

Understanding SVG Stroke Properties

Before we dive into Tailwind, it’s important to understand the basic stroke properties of SVG elements. The stroke attribute defines the color of the outline drawn around the shape, while stroke-width specifies the thickness of that outline. Additionally, stroke-linecap and stroke-linejoin control the shape of the stroke’s end caps and the corners where lines meet, respectively.

Tailwind CSS and SVG Stroke Customization

Tailwind CSS doesn’t include specific utilities for SVG strokes out of the box. However, you can use its powerful customization features to add your own utilities for controlling SVG strokes. Here’s how you can do it:

Step 1: Extending Tailwind CSS Configuration

To add custom utilities for SVG strokes, you’ll need to extend your tailwind.config.js file. Open the file and add a new section under theme.extend for your custom stroke styles:

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      strokeWidth: {
        '1': '1',
        '2': '2',
        '3': '3',
        // Add as many custom widths as you need
      stroke: {
        'red': '#f00',
        'green': '#0f0',
        'blue': '#00f',
        // Define custom stroke colors
      strokeLinecap: {
        'round': 'round',
        'square': 'square',
        // Add custom linecap styles
      strokeLinejoin: {
        'round': 'round',
        'bevel': 'bevel',
        // Add custom linejoin styles
  // of the config

Step 2: Applying Custom Stroke Styles in HTML

Once you’ve extended your Tailwind configuration, you can start using these custom utilities in your HTML. Here’s an example of how to apply stroke styles to an SVG element:

<svg xmlns="" viewBox="0 0 24 24" class="stroke-red stroke-2 strokeLinecap-round strokeLinejoin-round">
  <path d="M5 12h14" />
  <path d="M12 5l7 7-7 7" />

In this example, we’re applying a red stroke color, setting the stroke width to 2, and using round values for both stroke-linecap and stroke-linejoin.

Step 3: Creating Responsive SVG Strokes

Tailwind CSS allows you to create responsive designs with ease. You can apply different stroke styles at different breakpoints by prefixing the utility with the breakpoint name:

<svg xmlns="" viewBox="0 0 24 24" class="stroke-1 md:stroke-2 lg:stroke-3 strokeLinecap-square strokeLinejoin-bevel">
  <path d="M5 12h14" />
  <path d="M12 5l7 7-7 7" />

In this SVG, the stroke width will be 1 by default, 2 on medium screens, and 3 on large screens.

Step 4: Hover and Focus States

Tailwind also provides hover and focus state variants, which you can use to change SVG stroke styles on user interaction:

<svg xmlns="" viewBox="0 0 24 24" class="stroke-green hover:stroke-blue focus:stroke-red">
  <path d="M5 12h14" />
  <path d="M12 5l7 7-7 7" />

This SVG will have a green stroke by default, which changes to blue on hover and red on focus.

Final Code

Here’s a complete example of an SVG element with custom Tailwind stroke styles:

<!DOCTYPE html>
<html lang="en">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Custom Tailwind SVG Stroke Example</title>
  <link href="/path/to/your/tailwind.css" rel="stylesheet">
  <svg xmlns="" viewBox="0 0 24 24" class="stroke-red stroke-2 strokeLinecap-round strokeLinejoin-round hover:stroke-green focus:stroke-blue">
    <path d="M5 12h14" />
    <path d="M12 5l7 7-7 7" />

Remember to replace /path/to/your/tailwind.css with the actual path to your Tailwind CSS file.


Customizing SVG stroke styles with Tailwind CSS is a powerful way to enhance the visual appeal of your web projects. By extending your Tailwind configuration and applying custom utilities, you can control the appearance of SVG strokes with precision and create responsive, interactive designs.

For more information on SVG and its properties, you can refer to the MDN Web Docs on SVG. To learn more about customizing Tailwind CSS, visit the official Tailwind CSS documentation.

By mastering these techniques, you’ll be well-equipped to create stunning and unique web interfaces that stand out from the crowd.


What do you think?