Tailwind CSS – Utility Classes (NO THEORY)

Only commonly used class utilities for styling components

1. Layout

Container

• container
• mx-auto
• px-0 … px-96

Display

• block
• inline-block
• inline
• flex
• inline-flex
• grid
• inline-grid
• hidden

Position

• static
• fixed
• absolute
• relative
• sticky
• inset-0
• inset-x-0 / inset-y-0
• top-0 right-0 bottom-0 left-0
• z-0 … z-50

2. Flexbox

Direction

• flex-row
• flex-row-reverse
• flex-col
• flex-col-reverse

1
Wrap

• flex-wrap
• flex-nowrap
• flex-wrap-reverse

Align Items

• items-start
• items-center
• items-end
• items-stretch
• items-baseline

Justify Content

• justify-start
• justify-center
• justify-end
• justify-between
• justify-around
• justify-evenly

Align Content

• content-start
• content-center
• content-end
• content-between
• content-around
• content-evenly

Flex Grow / Shrink

• flex-1
• flex-auto
• flex-initial
• flex-none
• grow
• grow-0
• shrink
• shrink-0

Order

• order-1 … order-12
• order-first
• order-last
• order-none

2
3. Grid

Grid Template

• grid-cols-1 … grid-cols-12
• grid-rows-1 … grid-rows-6

Column / Row Span

• col-span-1 … col-span-12
• col-start-1 … col-end-13
• row-span-1 … row-span-6

Gap

• gap-0 … gap-96
• gap-x-*
• gap-y-*

4. Spacing

Padding

• p-0 … p-96
• px-, py-
• pt-, pr-, pb-, pl-

Margin

• m-0 … m-96
• mx-, my-
• mt-, mr-, mb-, ml-
• -m-, -mt-, -mx-*

5. Sizing

Width

• w-0 … w-96
• w-full
• w-screen
• w-fit
• w-min
• w-max

3
Height

• h-0 … h-96
• h-full
• h-screen
• h-fit
• min-h-*
• max-h-*

6. Typography

Font Size

• text-xs
• text-sm
• text-base
• text-lg
• text-xl
• text-2xl … text-9xl

Font Weight

• font-thin
• font-light
• font-normal
• font-medium
• font-semibold
• font-bold
• font-extrabold
• font-black

Text Align

• text-left
• text-center
• text-right
• text-justify

Line Height

• leading-none
• leading-tight
• leading-snug
• leading-normal
• leading-relaxed
• leading-loose

4
Letter Spacing

• tracking-tighter
• tracking-tight
• tracking-normal
• tracking-wide
• tracking-wider
• tracking-widest

Text Transform

• uppercase
• lowercase
• capitalize
• normal-case

7. Colors

Text Color

• text-black
• text-white
• text-gray-50 … text-gray-900
• text-red-500
• text-blue-500
• text-green-500
• text-yellow-500

Background Color

• bg-black
• bg-white
• bg-gray-50 … bg-gray-900
• bg-red-500
• bg-blue-500
• bg-green-500

Opacity

• opacity-0 … opacity-100
• bg-black/50
• text-white/70

5
8. Borders

Border Width

• border
• border-0
• border-2
• border-4
• border-8

Border Color

• border-black
• border-white
• border-gray-300
• border-red-500

Border Radius

• rounded-none
• rounded-sm
• rounded
• rounded-md
• rounded-lg
• rounded-xl
• rounded-2xl
• rounded-full

Border Style

• border-solid
• border-dashed
• border-dotted
• border-double

9. Effects

Box Shadow

• shadow-sm
• shadow
• shadow-md
• shadow-lg
• shadow-xl
• shadow-2xl
• shadow-inner

6
 • shadow-none

Blur

• blur-sm
• blur
• blur-md
• blur-lg
• blur-xl

10. Background Utilities

• bg-cover
• bg-contain
• bg-center
• bg-top
• bg-bottom
• bg-no-repeat
• bg-repeat
• bg-fixed
• bg-local
• bg-scroll

11. Interactivity

Cursor

• cursor-pointer
• cursor-not-allowed
• cursor-default
• cursor-wait

Pointer Events

• pointer-events-none
• pointer-events-auto

12. Transitions & Animations

Transition

• transition
• transition-all

7
 • transition-colors
• transition-opacity
• transition-transform

Duration

• duration-75
• duration-100
• duration-200
• duration-300
• duration-500
• duration-700
• duration-1000

Timing

• ease-linear
• ease-in
• ease-out
• ease-in-out

Transform

• scale-0 … scale-150
• rotate-0 … rotate-180
• translate-x-*
• translate-y-*
• skew-x-*
• skew-y-*

13. Overflow
• overflow-hidden
• overflow-auto
• overflow-scroll
• overflow-visible
• overflow-x-hidden
• overflow-y-auto

14. Lists
• list-none
• list-disc
• list-decimal
• list-inside

8
 • list-outside

15. Images & Media

• object-contain
• object-cover
• object-fill
• object-none
• object-scale-down
• aspect-square
• aspect-video

16. Tables
• table-auto
• table-fixed
• border-collapse
• border-separate

17. State Variants (use before any class)

• hover:
• focus:
• active:
• visited:
• disabled:
• group-hover:
• peer-focus:
• dark:
• sm:
• md:
• lg:
• xl:
• 2xl:

18. Utility Shortcuts (VERY COMMON)

• flex items-center justify-center
• w-full h-full
• text-center
• mx-auto

9
 • rounded-lg shadow-md
• bg-blue-500 text-white
• hover:bg-blue-600
• transition duration-300

✅ This file is meant to be used as a quick learning + recall sheet for Tailwind classes.

10