SVG #

Fill Color #

Utilities for styling the fill of SVG elements.

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.

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;

Stroke DashOffset #

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

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.

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.

Stroke Width #

Utilities for styling the stroke width of SVG elements.

export default {
  theme: {
    extend: {
      strokeWidth: {
        sm: '4',
        lg: '8',
      },
    },
  },
}