This app works best with JavaScript enabled.
Close Menu
Introduction
Installation
Framework Agnostic
React
Customization
Overview
Theme
Utilities
Variants
Apply
Layout
Container
Display
Float
Object Fit
Object Position
Overflow
Position
Visibility
Z Index
Typography
Font Family
Font Size
Font Weight
Letter Spacing
Line Height
Lists
Style and Decoration
Text Alignment
Text Color
Vertical Alignment
Whitespace
Background
Background Attachment
Background Color
Background Position
Background Repeat
Background Size
Border
Border Color
Border Radius
Border Style
Border Width
Flexbox
Align Content
Align Items
Align Self
Flex
Flex Direction
Flex Display
Flex Grow
Flex Shrink
Flex Wrapping
Justify Content
Space
Margin
Padding
Size
Height
Width
Tables
Border Collapse
Table Layout
Effects
Box Shadow
Opacity
Interactivity
Appearance
Cursor
Outline
Pointer Events
Resize
User Select
Svg
Fill
Stroke
Typography
Text Color
t
e
x
t
-
{
c
o
l
o
r
}
Generated from
theme.textColor
gray-{level}
red-{level}
orange-{level}
yellow-{level}
green-{level}
teal-{level}
blue-{level}
indigo-{level}
purple-{level}
pink-{level}
transparent
black
white
Shown here using the
blue
palette
text-blue-900
Pack my box with five dozen liquor jugs.
text-blue-800
Pack my box with five dozen liquor jugs.
text-blue-700
Pack my box with five dozen liquor jugs.
text-blue-600
Pack my box with five dozen liquor jugs.
text-blue-500
Pack my box with five dozen liquor jugs.
text-blue-400
Pack my box with five dozen liquor jugs.
text-blue-300
Pack my box with five dozen liquor jugs.
text-blue-200
Pack my box with five dozen liquor jugs.
text-blue-100
Pack my box with five dozen liquor jugs.
Previous
Text Alignment
Next
Vertical Alignment