Text Color

Use text-{color} utilities like text-blue-600 and text-sky-400 to control the text color of an element.

---

Basic example

Use utilities like text-blue-600 and text-sky-400 to control the text color of an element:

Style('text-blue-600', child: Text('The quick brown fox...'))

Changing the opacity

Use the color opacity modifier to control the text color opacity of an element:

Style('text-blue-600/100', child: Text('The quick brown fox...'))
Style('text-blue-600/75', child: Text('The quick brown fox...'))
Style('text-blue-600/50', child: Text('The quick brown fox...'))
Style('text-blue-600/25', child: Text('The quick brown fox...'))

Applying on hover

Hover over the link to see the text color change:

Style('...', children: [
  Text('Oh I gotta get on that '),
  Style('underline hover:text-blue-600', child: Text('internet')),
  Text(", I'm late on everything!"),
])

Class reference

Class	Description
text-{color}-{shade}	Sets text color (e.g. text-blue-500)
text-{color}-{shade}/{opacity}	Sets text color with opacity (e.g. text-blue-500/50)
text-black	Black text
text-white	White text
text-transparent	Transparent text
text-[<value>]	Arbitrary hex value (e.g. text-[#243c5a])