Other Utilities

Estimated reading: 1 minute 9 views

There are some other useful utilities that you should know about.

				
					// Box Shadows - responsive, hover, focus states
 .shadow-{size} {}       
// md, lg, xl, 2xl, inner, outline, none 
// Opacity - responsive, hover, focus states
 .opacity-{percent}      
// 100, 75, 50, 25, 0 
// Cursors - responsive
 .cursor-{style}         
// Outline - focus
 .focus:outline-none     
// default, pointer, wait, text, move, not-allowed 
// remove default browser outline styling
 # use focus:shadow-outline instead for a nicer alternative 
// User Select - responsive
 .select-{style}         
// none, text, all, auto 
// Screen Readers - responsive, hover, focus, active
 .sr-only {}             
// visually hidden,