Spacing
Control margin, padding, and gaps with standardized spacing scale.
Margin Classes
.m-0
.m-1
.m-2
.m-3
.m-4
.m-5
.m-6
.m-7
.m-8
Padding Classes
.p-0
.p-1
.p-2
.p-3
.p-4
.p-5
.p-6
.p-7
.p-8
Horizontal & Vertical Margin
.mx-2
.mx-4
.my-2
.my-4
Horizontal & Vertical Padding
.px-2
.px-4
.py-2
.py-4
Individual Margin Sides
.mt-3
.mb-3
.ml-3
.mr-3
Individual Padding Sides
.pt-3
.pb-3
.pl-3
.pr-3
Flexbox Utilities
Flexbox layout utilities for creating flexible layouts.
Display & Direction
.flex
.inline-flex
.flex-col
.flex-col
1
2
.flex-row
.flex-row
1
2
.wrap
.wrap
.wrap
.wrap
1
2
3
4
1
2
3
4
.flex-nowrap
.flex-grow
.flex-grow-0
.flex-shrink
.flex-shrink-0
.flex-basis-full
.flex-reverse
.flex-col-reverse
Justify Content
.justify-start
.justify-end
.justify-center
.justify-
between
.justify-
around
.justify-
evenly
Align Items
.items-start
.items-end
.items-center
.items
-baseline
.items-stretch
Align Content
content-start
content-start
content-start
content-end
content-end
content-center
content-center
content-between
content-between
content-around
content-around
Align Self
.self-auto
.self-start
.self-end
.self-center
.self-baseline
.self-stretch
Order
.order-first
.order-last
.order-none
.order-2
.order-4
.order-1
.order-6
.order-5
.order-3
.order-8
.order-9
.order-11
.order-7
.order-10
.order-12
Grid Utilities
CSS Grid utilities for creating grid layouts.
Grid Column Classes
.grid-cols-1
.grid-cols-2
2
.grid-cols-3
2
3
.grid-cols-4
2
3
4
.grid-cols-5
.grid-cols-6
.grid-cols-9
.grid-cols-12
Grid Row Classes
.grid-rows-1
1
.grid-rows-2
.grid-rows-3
2
3
.grid-rows-4
2
3
4
Grid Flow Classes
.grid-flow-row
2
3
.grid-flow-column
2
3
.grid-flow-dense
2
3
Grid Auto Classes
.auto-cols-min
2
.auto-cols-max
2
.auto-cols-fr
2
.auto-rows-min
2
.auto-rows-max
2
.auto-rows-fr
2
Gap Classes
.gap-1
.gap-2
.gap-3
.gap-4
.gap-5
Gap X / Y Classes
.gap-x-1
.gap-x-2
.gap-x-3
.gap-x-4
.gap-y-1
.gap-y-2
.gap-y-3
.gap-y-4
.gap-y-5
Typography Utilities
Text styling, sizes, and font utilities.
Font Size
.text-xs
.text-sm
.text-base
.text-lg
.text-xl
.text-2xl
.text-3xl
.text-4xl
Font Weight
.font-light
.font-normal
.font-medium
.font-semibold
.font-bold
.font-extrabold
Text Alignment
.text-left
.text-center
.text-right
.text-justify
Text Decoration
.underline
.no-underline
.line-through
.italic
.not-italic
Text Transform
.uppercase
.lowercase
.capitalize
.normal-case
Line Height
.leading-tight
.leading-normal
.leading-relaxed
Text Overflow
.truncate
.line-clamp-1
.line-clamp-2
.line-clamp-3
.break-words
.whitespace-nowrap
.whitespace-normal
.whitespace-pre
Text Color Utilities
Text color utilities for different use cases.
Text Colors
.text-primary
.text-secondary
.text-muted
.text-danger
.text-success
.text-info
.text-warning
.text-accent
.text-white
.text-black
Background Utilities
Background color and style utilities.
Background Colors
.bg-primary
.bg-secondary
.bg-tertiary
.bg-quaternary
.bg-white
.bg-black
Accent Backgrounds
.bg-accent
.bg-success
.bg-danger
.bg-info
.bg-warning
Light Accent Backgrounds
.bg-accent-light
.bg-success-light
.bg-danger-light
.bg-info-light
.bg-warning-light
Gradient Backgrounds
.bg-gradient-primary
.bg-gradient-success
.bg-gradient-danger
Background Size & Position (images)
.bg-cover
.bg-contain
.bg-center
.bg-left
.bg-right
.bg-top
.bg-bottom
Background Repeat (images)
.bg-repeat
.bg-no-repeat
.bg-repeat-x
.bg-repeat-y
Background Attachment (images)
.bg-fixed
.bg-scroll
Borders & Border Radius
Border and border radius utilities.
Border Classes
.border
.border-t
.border-r
.border-b
.border-l
.border-none
Border Width
.border-0
.border-2
.border-4
.border-8
.border-solid
.border-dashed
.border-dotted
.border-double
Border Radius
Utilities to control border rounding globally, per side or per corner.
.rounded-none
.rounded-sm
.rounded-md
.rounded-lg
.rounded-xl
.rounded-2xl
.rounded-3xl
.rounded-full
Rounded Sides
.rounded-t-md
.rounded-b-md
.rounded-l-md
.rounded-r-md
.rounded-t-lg
.rounded-b-lg
.rounded-l-lg
.rounded-r-lg
.rounded-t-full
.rounded-b-full
.rounded-l-full
.rounded-r-full
Individual Corners
.rounded-tl-md
.rounded-tr-md
.rounded-bl-md
.rounded-br-md
Sizing Utilities
Width and height utilities to control element sizing.
Width (Relative)
.w-full
.w-3/4
.w-2/3
.w-1/2
.w-1/3
.w-1/4
.w-auto
.w-screen
Width (Fixed Scale)
.w-1
.w-2
.w-3
.w-4
.w-5
.w-6
.w-7
.w-8
.w-9
.w-10
Height (Relative)
.h-1/4
.h-1/3
.h-1/2
.h-2/3
.h-3/4
.h-full
Height (Fixed Scale)
.h-1
.h-2
.h-3
.h-4
.h-5
.h-6
.h-7
.h-8
.h-9
.h-10
Min / Max
.min-w-full / .min-h-full
.max-w-full / .max-h-full
Shadows & Effects
Shadow and visual effects utilities.
Box Shadow
.shadow-none
.shadow-sm
.shadow-md
.shadow
.shadow-lg
.shadow-xl
Opacity
.opacity-0
.opacity-25
.opacity-50
.opacity-75
.opacity-100
Containers
Examples of different container sizes.
.container (full width, padding responsive)
.container-sm (max-width: 640px)
.container-md (max-width: 768px)
.container-lg (max-width: 1024px)
.container-xl (max-width: 1280px)
.container-2xl (max-width: 1400px)
.container-fluid (full width)
Cursors
Examples of different cursor utilities.
Cursor Examples
.cursor-auto
.cursor-pointer
.cursor-default
.cursor-not-allowed
.cursor-move
.cursor-wait
Dividers
Horizontal line dividers to separate content sections.
Standard Divider (.divider)
A thin horizontal line (1px) with default spacing.
Content above the divider
Content below the divider
Thick Divider (.divider-thick)
A thicker horizontal line (2px) for more prominent separation.
Content above the thick divider
Content below the thick divider
Spacers
Vertical spacing utilities to create consistent spacing between elements.
Spacer Classes
Use spacer classes to add vertical space with consistent sizing based on your spacing scale.
.spacer-xs
Content
Content
.spacer-sm
Content
Content
.spacer-md
Content
Content
.spacer-lg
Content
Content
Large Spacers
.spacer-xl
Content
Content
.spacer-2xl
Content
Content
.spacer-3xl
Content
Content