Styling Text with utility classes Part 1

Estimated reading: 1 minute 38 views

Font styling is a huge part of any design and Tailwind has plenty of classes that we can use to style the text on our apps. It even includes utility classes for transformations like uppercase

				
					// Fonts
 .font-sans {}       
.font-serif {}      
.font-mono {}

				
					// Sizing
 .text-xs {}         
.text-sm {}         
.text-base {}       
.text-lg {}         
.text-xl {}         
.text-2xl {}        
.text-3xl {}        
.text-4xl {}        
.text-5xl {}        
.text-6xl {}

				
					/ Text Align
 .text-left {}
 .text-center {}
 .text-right {}
 .text-justify {}

				
					// Text Color
 .text-{color}-{shade (100-900)} {}