Skip to content

Ring Color

Use ring-{color} utilities like ring-blue-500 to set the ring color. Supports the full Tailwind palette, opacity modifiers (/50), and special keywords (ring-current, ring-inherit, ring-transparent).

Style('ring-2 ring-blue-500 ...', child: Text('Subscribe'))
Style('ring-2 ring-blue-500/50 ...', child: Text('Subscribe'))

By default rings have an opacity of 100%; use the opacity modifier to adjust.

ClassDescription
ring-inheritInherits ring color (approximated as currentColor in Flutter)
ring-currentUses the current text color (DefaultTextStyle)
ring-transparentTransparent ring
ring-{color}-{shade}Full Tailwind palette, e.g. ring-blue-500
ring-{color}-{shade}/{opacity}With opacity modifier, e.g. ring-blue-500/50