Text Color

Apply color to text using predefined palette classes or arbitrary hex values.

• Basic Usage
• Quick Reference
• Dark Mode
• Arbitrary Values
• Related Documentation

WText('Red text', className: 'text-red-500 dark:text-red-300');
WText('Muted label', className: 'text-gray-500 dark:text-gray-400');
WText('Custom color', className: 'text-[#1DA1F2]');

Basic Usage

Apply text color with the text- prefix followed by a color name and shade:

WText(
  'Primary heading',
  className: 'text-gray-900 dark:text-gray-100 font-bold text-2xl',
);
WText(
  'Supporting body text',
  className: 'text-gray-600 dark:text-gray-400 text-base',
);

Quick Reference

The full palette is available in every shade from 50 to 900. Use the pattern text-{color}-{shade}:

Available color names: slate, gray, zinc, neutral, stone, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, black, white, primary, secondary.

Available shades: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900.

Dark Mode

Wind automatically inverts color shades when dark mode is active. Add a dark: prefix variant to provide an explicit color for dark contexts:

WText(
  'Adaptive text',
  className: 'text-gray-900 dark:text-gray-100',
);
WText(
  'Accent label',
  className: 'text-blue-600 dark:text-blue-400',
);
WText(
  'Error message',
  className: 'text-red-600 dark:text-red-400',
);

See Dark Mode for how color inversion works.

Arbitrary Values

Set any color not in the predefined palette using a hex code in brackets:

WText('Brand color', className: 'text-[#1DA1F2]');
WText('Custom pink', className: 'text-[#FF00FF]');

Related Documentation

• Text Decoration — underline, overline, and strikethrough.
• Font Size — set text size.
• Font Weight — control text thickness.
• Dark Mode — automatic color inversion.
• Customizing Colors — add or override palette colors.
• WText — the primary text widget.