Outline Color
Use outline-{color}-{shade} utilities to set the color of an element’s outline.
Supports the full Tailwind palette, opacity modifiers (/50), and special
keywords (outline-current, outline-inherit, outline-transparent).
Setting the outline color
Section titled “Setting the outline color”Use utilities like outline-blue-500 and outline-pink-500 to control the
outline color:
Style('outline-2 outline-offset-2 outline-blue-500 ...', child: Text('Button A'))Style('outline-2 outline-offset-2 outline-cyan-500 ...', child: Text('Button B'))Style('outline-2 outline-offset-2 outline-pink-500 ...', child: Text('Button C'))Changing the opacity
Section titled “Changing the opacity”Use the color opacity modifier to control the outline color opacity:
Style('outline-2 outline-blue-500/100 ...', child: Text('Button A'))Style('outline-2 outline-blue-500/75 ...', child: Text('Button B'))Style('outline-2 outline-blue-500/50 ...', child: Text('Button C'))Class reference
Section titled “Class reference”| Class | Description |
|---|---|
outline-inherit | Inherits outline color (approximated as currentColor in Flutter) |
outline-current | Uses the current text color (DefaultTextStyle) |
outline-transparent | Transparent outline |
outline-{color}-{shade} | Full Tailwind palette, e.g. outline-blue-500 |
outline-{color}-{shade}/{opacity} | With opacity modifier, e.g. outline-blue-500/50 |