Ring Width, Color, and Offset

// Default ring (3px blue-500)
WDiv(className: 'ring')

// Custom width and color
WDiv(className: 'ring-4 ring-red-500')

// With offset
WDiv(className: 'ring-2 ring-offset-2')

Basic Usage#

Use ring-{width} utilities to draw a solid outline around an element. By default, this adds a 3px blue ring.

WDiv(
  className: 'ring-4 ring-blue-500 rounded-lg p-4',
  child: WText('Ring Example'),
)

Quick Reference#

Variants#

Ring Color#

Use ring-{color} to set the color of the ring. You can also use opacity modifiers like /50.

WDiv(className: 'ring-2 ring-blue-500')
WDiv(className: 'ring-2 ring-red-500/50') // 50% opacity

Ring Offset#

Use ring-offset-{width} to leave space between the element and the ring. The gap is not painted, so whatever is behind the element shows through it; Wind has no ring-offset-{color}.

// Creates a 2px gap between the element and the ring
WDiv(className: 'ring-2 ring-offset-2')

Ring Inset#

Use ring-inset to force the ring to render on the inside of the element instead of the outside. This is useful for elements that shouldn't overflow their container.

WDiv(className: 'ring-2 ring-inset ring-pink-500')

Responsive Design#

Apply different ring utilities at different breakpoints using the standard sm:, md:, lg:, xl:, and 2xl: prefixes.

WDiv(className: 'ring-2 md:ring-4 lg:ring-8')

Dark Mode#

Use the dark: prefix to apply different ring styles when the application is in dark mode.

WDiv(className: 'ring-slate-900/5 dark:ring-white/10')

Arbitrary Values#

If the built-in scale doesn't meet your needs, use bracket notation to apply custom values directly.

// Custom color
WDiv(className: 'ring-[#50d71e]')

// Custom color with opacity
WDiv(className: 'ring-[#50d71e]/50')

Customizing Theme#

To extend or override the default scale for rings, modify the WindThemeData in your app root.

WindTheme(
  data: WindThemeData(
    // Default color when no ring color class is present
    ringColor: Colors.blue, 
    
    // Custom ring widths
    ringWidths: {
      'DEFAULT': 3,
      '6': 6,
      '10': 10,
    },
    
    // Custom offset widths
    ringOffsets: {
      '3': 3,
      '6': 6,
    },
  ),
  child: MyApp(),
)

Related Documentation#

• Borders
• Box Shadow