Text Decoration
Utilities for controlling the decoration of text.
On this page
typography/decoration
A live demo of this example follows.
decoration.dart
View source
Open demo
// 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 colour of the text decoration.
typography/decoration_color
A live demo of this example follows.
decoration_color.dart
View source
Open demo
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
A live demo of this example follows.
decoration_style.dart
View source
Open demo
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
A live demo of this example follows.
decoration_thickness.dart
View source
Open demo
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 colours 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 colours use your theme's colors configuration.
WindThemeData(
colors: {
'brand': MaterialColor(0xFF1E88E5, {500: Color(0xFF1E88E5)}),
},
)
The map merges with the default palette by name, so the built-in colours stay available. A name that matches a built-in palette (blue, say) replaces that whole palette, not shade by shade: list every shade you still use.