Text Decoration
Utilities for controlling the decoration of text.
On this page
typography/decoration
The live demo is not available for this example.
decoration.dart
View source
// 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#
| Class | Properties | Description |
|---|---|---|
underline |
decoration: underline |
Adds an underline. |
overline |
decoration: overline |
Adds an overline. |
line-through |
decoration: line-through |
Adds a strikethrough. |
no-underline |
decoration: none |
Removes decorations. |
Variants#
Decoration Color#
Use the decoration-{color} utilities to change the color of the text decoration.
typography/decoration_color
The live demo is not available for this example.
decoration_color.dart
View source
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.
typography/decoration_style
The live demo is not available for this example.
decoration_style.dart
View source
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')
| Class | Description |
|---|---|
decoration-solid |
Sets the decoration style to solid. |
decoration-double |
Sets the decoration style to double. |
decoration-dotted |
Sets the decoration style to dotted. |
decoration-dashed |
Sets the decoration style to dashed. |
decoration-wavy |
Sets the decoration style to wavy. |
Decoration Thickness#
Use the decoration-{width} utilities to change the thickness of the text decoration.
typography/decoration_thickness
The live demo is not available for this example.
decoration_thickness.dart
View source
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),
},
},
)