LAYOUT Z-Index Text Align BORDERS CHEATSHEET

.z-0 .text-left Flex

Container .z-10 .text-center Border Color .flex-initial
.container .z-20 .text-right .border-transparent .flex-1
.z-30 .text-justify .border-black .flex-auto EFFECTS
Display .z-40 .border-white .flex-none
.hidden .z-50 Text Color .border-[color]-[100-900] Box Shadow
.block .z-auto .text-transparent Flex Grow .shadow
.inline-block .text-black Border Style .flex-grow .shadow-md
.flex TYPOGRAPHY .text-white .border-solid .flex-grow-0 .shadow-lg
.inline-flex .text-[color]-[100-900] .border-dashed .shadow-xl
.inline Font Family .border-dotted Flex Shrink .shadow-2xl
.table .font-sans Text Decoration .border-double .flex-shrink .shadow-inner
.table-row .font-serif .underline .border-none .flex-shrink-0 .shadow-outline
.table-cell .font-mono .line-through .shadow-none
.no-underline Border Width Order
Float Font Size .border .order-first Opacity
.float-right .text-xs Text Transform .border-[0,2,4,8] .order-last .opacity-100
.float-left .text-sm .uppercase .border-[t,r,b,l] .order-none .opacity-75
.float-none .text-base .lowercase .border-[t,r,b,l]-[0,2,4,8] .order-[1-12] .opacity-50
.clearfix .text-lg .capitalize .opacity-25
.text-xl .normal-case Border Radius SPACING .opacity-0
Object Fit .text-2xl .rounded-none
.object-contain .text-3xl Vertical Align .rounded-sm Padding INTERACTIVITY
.object-cover .text-4xl .align-baseline .rounded .[p, py, px, pt, pr,
.object-fill .text-5xl .align-top .rounded-lg pb, pl]-[*Spacing] Appearance
.object-none .text-6xl .align-middle .rounded-full .appearance-none
.object-scale-down .align-bottom .rounded-[t,r,b,l,tl,tr,bl,br] Margin
Font Smoothing .align-text-top .rounded-[t,r,b,l,tl,tr,bl,br] .[m, my, mx, mt, mr, Cursor
Object Position .antialiased .align-text-bottom -[none, sm, lg, full ] mb, ml]-[*Spacing] .cursor-auto
.object-bottom .subpixel-antialiased .cursor-default
.object-center White Space FLEXBOX SIZING .cursor-pointer
.object-left Font Style .whitespace-normal .cursor-wait
.object-left-bottom .italic .whitespace-no-wrap Flex Direction Width .cursor-text
.object-left-top .not-italic .whitespace-pre .flex-row .w-[*Spacing] .cursor-move
.object-right .whitespace-pre-line .flex-row-reverse .w-[*Fractions] .cursor-not-allowed
.object-right-bottom Font Weight .whitespace-pre-wrap .flex-col .w-full
.object-right-top .font-hairline .flex-col-reverse .w-screen Outline
.object-top .font-thin Word Break .outline-none
.font-light .break-normal Flex Wrap Min-Width
Overflow .font-normal .break-words .flex-no-wrap .min-w-0 Pointer Events
.overflow-auto .font-medium .break-all .flex-wrap .min-w-full .pointer-events-none
.overflow-hidden .font-semibold .truncate .flex-wrap-reverse .pointer-events-auto
.overflow-visible .font-bold Max-Width
.overflow-scroll .font-extrabold BACKGROUNDS Align Items .max-w-[xs, sm, md, Resize
.overflow-x-auto .font-black .items-stretch lg, xl, 2xl, 3xl, 4xl, .resize-none
.overflow-y-auto Background Attachment .items-start 5xl, 6xl, full] .resize
.overflow-x-hidden Letter Spacing .bg-fixed .items-center .resize-y
.overflow-y-hidden .tracking-tighter .bg-local .items-end Height .resize-x
.overflow-x-visible .tracking-tight .bg-scroll .items-baseline .h-[*Spacing]
.overflow-y-visible .tracking-normal .h-full User Select
.overflow-x-scroll .tracking-wide Background Color Align Content .h-screen .select-none
.overflow-y-scroll .tracking-wider .bg-transparent .content-start .select-text
.scrolling-touch .tracking-widest .bg-black .content-center Min-Height .select-all
.scrolling-auto .bg-white .content-end .min-h-0 .select-auto
Line Height .bg-[color]-[100-900] .content-between .min-h-full
T/R/B/L .leading-none .content-around .min-h-screen SVG
.inset-0 .leading-tight Background Position
.inset-y-0 .leading-snug .bg-bottom Align Self Max-Height Fill
.inset-x-0 .leading-normal .bg-center .self-auto .max-h-full .fill-current
.top-0 .leading-relaxed .bg-left .self-start .max-h-screen
.right-0 .leading-loose .bg-left-bottom .self-center Stroke
.bottom-0 .bg-left-top .self-end TABLES .stroke-current
.left-0 List Style Type .bg-right .self-stretch
.inset-auto .list-none .bg-right-bottom Border Collapse ACCESSIBILITY
.inset-y-auto .list-disc .bg-right-top Justify Content .border-collapse
.inset-x-auto .list-decimal .bg-top .justify-start .border-separate Screen Readers
.top-auto .justify-center .sr-only
.bottom-auto List Style Position Background Repeat .justify-end Table Layout .not-sr-only
.left-auto .list-inside .bg-repeat .justify-between .table-auto
.right-auto .list-outside .bg-no-repeat .justify-around .table-fixed
.bg-repeat-x
Position Placeholder Color .bg-repeat-y
.static .placeholder-transparent .bg-repeat-round
.fixed .placeholder-black .bg-repeat-space *Spacing: 0,1, 2, 3, 4, 5, 6, 8, 10, 12, 16, 20, 24, 32, 40, 48, 56, 64, px, auto
.absolute .placeholder-white
.relative .placeholder-[color]- Background Size *Fractions: 1/2, 1/3, 2/3, 1/4, 2/4, 3/4, 4/4, 1/5, 2/5, 3/5, 4/5, 1/6, 2/6, 3/6, 4/6, 5/6,
.sticky [100-900] .bg-auto 1/12, 2/12, 3/12, 4/12, 5/12, 6/12, 7/12, 8/12, 9/12, 10/12, 11/12
.bg-cover
Visibility .bg-contain Variants: responsive, group-hover, focus-within, first, last, odd, even,
.visible
.invisible hover, focus, active, visited, disabled
Breakpoints: sm: 640px | md: 768px | lg: 1024px | xl: 1280px