SVG

Fill Color

Utilities for styling the fill of SVG elements.

none
transparent
current
gray-500
red-500
yellow-500
blue-500
green-500
CSS
Customizing
// windi.config.js
export default {
  theme: {
    fill: theme => ({
      red: theme('colors.red.500'),
      green: theme('colors.green.500'),
      blue: theme('colors.blue.500'),
    }),
  },
}

Stroke Color

Utilities for styling the stroke of SVG elements.

none
transparent
current
gray-500
red-500
yellow-500
blue-500
green-500
CSS
Customizing
// windi.config.js
export default {
  theme: {
    stroke: theme => ({
      red: theme('colors.red.500'),
      green: theme('colors.green.500'),
      blue: theme('colors.blue.500'),
    }),
  },
}

Stroke DashArray

The stroke-dash utility is a presentation utility defining the pattern of dashes and gaps used to paint the outline of the shape;

0
1
2
3
4
5
6
7
8
9
10
100
CSS

Stroke DashOffset

The stroke-offset utility is a presentation utility defining an offset on the rendering of the associated dash array.

0
1
2
3
4
5
6
7
8
9
10
50
60
70
80
90
100
CSS

Stroke LineCap

The stroke-cap utility is a presentation utility defining the shape to be used at the end of open subpaths when they are stroked.

auto
square
round
CSS

Stroke LineJoin

The stroke-join utility is a presentation utility defining the shape to be used at the corners of paths when they are stroked.

auto
bevel
round
CSS

Stroke Width

Utilities for styling the stroke width of SVG elements.

0
1
2
3
4
5
6
7
8
9
10
CSS
Customizing
// windi.config.js
export default {
  theme: {
    extend: {
      strokeWidth: {
        sm: '4',
        lg: '8',
      },
    },
  },
}