Background Color

Utilities for controlling an element's background color.

• Basic Usage
• Quick Reference
• Opacity Modifier
• Responsive Design
• Dark Mode
• Arbitrary Values
• Customizing Theme
• Related Documentation

// Solid color
WDiv(className: 'bg-blue-500 h-12 w-12 rounded')

// With opacity
WDiv(className: 'bg-blue-500/50 h-12 w-12 rounded')

// White and Black
WDiv(className: 'bg-white h-12 w-12 rounded')
WDiv(className: 'bg-black h-12 w-12 rounded')

Basic Usage

Use bg-{color}-{shade} to set the background color of an element. Wind includes a comprehensive palette of colors (slate, gray, red, blue, etc.) with shades from 50 to 950.

WDiv(
  className: 'bg-blue-500 p-4 rounded-lg',
  child: WText('Blue Background', className: 'text-white'),
)

You can also use standalone colors like bg-white, bg-black, and bg-transparent.

WDiv(className: 'bg-white shadow-md p-6')
WDiv(className: 'bg-transparent border border-gray-300')

Quick Reference

Opacity Modifier

Control the opacity of a background color using the slash modifier /{opacity}. The value ranges from 0 to 100.

WDiv(className: 'bg-blue-500/100') // 100% (Default)
WDiv(className: 'bg-blue-500/75')  // 75%
WDiv(className: 'bg-blue-500/50')  // 50%
WDiv(className: 'bg-blue-500/25')  // 25%

Responsive Design

Change the background color at specific breakpoints using standard responsive prefixes (sm:, md:, lg:, xl:, 2xl:).

// Red on mobile, Blue on medium screens and up
WDiv(className: 'bg-red-500 md:bg-blue-500 h-32 w-full')

Dark Mode

Use the dark: prefix to apply a different background color when dark mode is active.

WDiv(
  className: 'bg-white dark:bg-slate-900 p-6 rounded-lg',
  child: WText('Adaptive Background', className: 'text-gray-900 dark:text-white'),
)

Arbitrary Values

If you need a specific color not in your theme, use square bracket notation bg-[#RRGGBB].

WDiv(className: 'bg-[#1da1f2] text-white p-4') // Twitter Blue
WDiv(className: 'bg-[#ff0000]') // Bright Red

Customizing Theme

To add your own colors, modify the colors map in WindThemeData.

WindThemeData(
  colors: {
    // Add a custom brand color
    'brand': {
      '500': Color(0xFF1DA1F2),
      '600': Color(0xFF1A91DA),
    },
    // Extend existing palette
    'gray': {
      ...WindThemeData.defaultColors['gray']!,
      '1000': Color(0xFF0F0F0F),
    },
  },
)

Now you can use bg-brand-500 or bg-gray-1000.

Related Documentation

• Background Gradient
• Background Image
• Text Color
• Border Color