Outline Width

Use outline or outline-<number> utilities to set the width of an element’s outline. Any non-negative integer is accepted (e.g. outline-3, outline-6).

Setting the outline width

Use utilities like outline-2 and outline-4 to control the outline width:

Style('outline outline-offset-2 ...', child: Text('Button A'))
Style('outline-2 outline-offset-2 ...', child: Text('Button B'))
Style('outline-4 outline-offset-2 ...', child: Text('Button C'))

Applying on focus

Use a focus: variant to show an outline only when an element is focused:

Style('outline-offset-2 outline-sky-500 focus:outline-2 ...', child: Text('Save Changes'))

Class reference

Class	Value
outline	outline-width: 1px (default)
outline-0	outline-width: 0px
outline-<number>	outline-width: <number>px (any non-negative integer)