Outline

Utilities for controlling an element's outline.

none

white

black

gray-500

red-500

yellow-500

blue-500

green-500

CSS

Outline Solid

none

white

black

gray-500

red-500

yellow-500

blue-500

green-500

CSS

none

white

black

gray-500

red-500

yellow-500

blue-500

green-500

CSS

Customizing

windi.config.js

export default {
  theme: {
    extend: {
      outline: {
        blue: '2px solid #0000ff',
      },
    },
  },
}

You can also provide an outline-offset value for any custom outline utilities using a tuple of the form [outline, outlineOffset]:

windi.config.js

export default {
  theme: {
    extend: {
      outline: {
        blue: ['2px solid #0000ff', '1px'],
      },
    },
  },
}