Text Decoration

Utilities for controlling the decoration of text.

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

// Basic decoration
WText('Underline', className: 'underline')

// With color, style, and thickness
WText('Styled', className: 'underline decoration-blue-500 decoration-wavy decoration-2')

Basic Usage

Use underline, overline, or line-through to decorate text. Use no-underline to remove existing decorations.

WText('The quick brown fox...', className: 'underline')
WText('The quick brown fox...', className: 'overline')
WText('The quick brown fox...', className: 'line-through')
WText('Link without underline', className: 'no-underline')

Quick Reference

Variants

Decoration Color

Use the decoration-{color} utilities to change the color of the text decoration.

WText('Error', className: 'underline decoration-red-500')
WText('Success', className: 'underline decoration-green-600')

Decoration Style

Use the decoration-{style} utilities to change the style of the text decoration.

WText('Solid', className: 'underline decoration-solid')
WText('Double', className: 'underline decoration-double')
WText('Dotted', className: 'underline decoration-dotted')
WText('Dashed', className: 'underline decoration-dashed')
WText('Wavy', className: 'underline decoration-wavy')

Decoration Thickness

Use the decoration-{width} utilities to change the thickness of the text decoration.

WText('1px', className: 'underline decoration-1')
WText('2px', className: 'underline decoration-2')
WText('4px', className: 'underline decoration-4')
WText('8px', className: 'underline decoration-8')

Responsive Design

Apply different decoration utilities at different breakpoints using standard responsive modifiers.

WText('Responsive decoration', className: 'no-underline md:underline')

Dark Mode

Use the dark: prefix to apply different decoration styles in dark mode.

WText('Link', className: 'text-gray-900 underline decoration-gray-900 dark:text-white dark:decoration-white')

Arbitrary Values

Use bracket notation for custom decoration colors or thickness.

// Custom color
WText('Brand underline', className: 'underline decoration-[#50d71e]')

// Custom thickness
WText('3px underline', className: 'underline decoration-[3px]')

Customizing Theme

Decoration Color

Decoration colors use your theme's colors configuration.

WindThemeData(
  colors: {
    'brand': {
      '500': Color(0xFF1E88E5),
    },
  },
)

Related Documentation

• Text Color
• Font Weight