Text

Utilities for controlling the text color and font size of an element.

Class	CSS Output
`text-sm`	`font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); }`
`text-base`	`font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); }`
`text-lg`	`font-size: var(--text-lg); line-height: var(--tw-leading, var(--text-lg--line-height)); }`
`text-xl`	`font-size: var(--text-xl); line-height: var(--tw-leading, var(--text-xl--line-height)); }`
`text-red-500`	`color: var(--color-red-500); }`
`text-blue-600`	`color: var(--color-blue-600); }`
`text-red-500/50`	`color: color-mix(in oklab, var(--color-red-500) 50%, transparent); }`
`text-[14px]`	`font-size: 14px; }`
`text-[#ff0000]`	`color: #ff0000; }`

text-sm

font-size: var(--text-sm);
line-height: var(--tw-leading, var(--text-sm--line-height));

text-base

font-size: var(--text-base);
line-height: var(--tw-leading, var(--text-base--line-height));

text-lg

font-size: var(--text-lg);
line-height: var(--tw-leading, var(--text-lg--line-height));

text-xl

font-size: var(--text-xl);
line-height: var(--tw-leading, var(--text-xl--line-height));

text-red-500

color: var(--color-red-500);

text-blue-600

color: var(--color-blue-600);

text-red-500/50

color: color-mix(in oklab, var(--color-red-500) 50%, transparent);

text-[14px]

font-size: 14px;

text-[#ff0000]

color: #ff0000;

Reference