No classes matched your search.
Try a different keyword or clear the search.
Layout
Flexbox, grid, alignment and justification helpers.
| Class | CSS Output | Description |
|---|---|---|
| make-flex | display: flex | Enable flex container |
| make-inline-flex | display: inline-flex | Inline flex container |
| make-grid | display: grid | Enable grid container |
| make-inline-grid | display: inline-grid | Inline grid container |
| flex-row | flex-direction: row | Horizontal flex direction |
| flex-column | flex-direction: column | Vertical flex direction |
| flex-row-reverse | flex-direction: row-reverse | Reverse horizontal flex |
| flex-column-reverse | flex-direction: column-reverse | Reverse vertical flex |
| flex-wrap | flex-wrap: wrap | Allow flex items to wrap |
| flex-nowrap | flex-wrap: nowrap | Prevent flex wrapping |
| flex-1 | flex: 1 1 0% | Flex grow and shrink equally |
| flex-auto | flex: 1 1 auto | Flex based on natural size |
| flex-none | flex: none | Prevent flex grow/shrink |
| flex-grow | flex-grow: 1 | Grow to fill available space |
| flex-shrink | flex-shrink: 1 | Allow shrinking |
| align-start | align-items: flex-start | Align cross-axis to start |
| align-end | align-items: flex-end | Align cross-axis to end |
| align-center | align-items: center | Center on cross axis |
| align-stretch | align-items: stretch | Stretch to fill cross axis |
| align-baseline | align-items: baseline | Align to text baseline |
| justify-start | justify-content: flex-start | Justify items to start |
| justify-end | justify-content: flex-end | Justify items to end |
| justify-center | justify-content: center | Center on main axis |
| justify-between | justify-content: space-between | Equal space between items |
| justify-around | justify-content: space-around | Equal space around items |
| justify-evenly | justify-content: space-evenly | Evenly distributed space |
| grid-cols-{1-12} | grid-template-columns: repeat(n, minmax(0,1fr)) | Define grid column count |
| grid-rows-{1-6} | grid-template-rows: repeat(n, minmax(0,1fr)) | Define grid row count |
| col-span-{1-12} | grid-column: span n / span n | Column span |
| row-span-{1-6} | grid-row: span n / span n | Row span |
| gap-{n} | gap: {n}px | Grid/flex gap (0–200) |
| gap-x-{n} | column-gap: {n}px | Horizontal gap only |
| gap-y-{n} | row-gap: {n}px | Vertical gap only |
| place-center | place-items: center | Center items on both axes |
| self-auto | align-self: auto | Self alignment auto |
| self-start | align-self: flex-start | Self align to start |
| self-end | align-self: flex-end | Self align to end |
| self-center | align-self: center | Self center on cross axis |
| self-stretch | align-self: stretch | Self stretch on cross axis |
| order-{0-12} | order: {n} | Item order in flex/grid |
| order-first | order: -9999 | Force item to be first |
| order-last | order: 9999 | Force item to be last |
| container | max-width: 1200px; margin: 0 auto; padding: 0 16px | Centered max-width wrapper |
Spacing
Padding and margin utilities. Values: 0–50 every 1px, 52–200 every 4px, plus 240, 256, 320, 384, 512.
| Class | CSS Output | Description |
|---|---|---|
| add-padding-{n} | padding: {n}px | Padding on all sides |
| add-padding-x-{n} | padding-left: {n}px; padding-right: {n}px | Horizontal padding |
| add-padding-y-{n} | padding-top: {n}px; padding-bottom: {n}px | Vertical padding |
| add-padding-top-{n} | padding-top: {n}px | Top padding |
| add-padding-bottom-{n} | padding-bottom: {n}px | Bottom padding |
| add-padding-left-{n} | padding-left: {n}px | Left padding |
| add-padding-right-{n} | padding-right: {n}px | Right padding |
| add-margin-{n} | margin: {n}px | Margin on all sides |
| add-margin-x-{n} | margin-left: {n}px; margin-right: {n}px | Horizontal margin |
| add-margin-y-{n} | margin-top: {n}px; margin-bottom: {n}px | Vertical margin |
| add-margin-top-{n} | margin-top: {n}px | Top margin |
| add-margin-bottom-{n} | margin-bottom: {n}px | Bottom margin |
| add-margin-left-{n} | margin-left: {n}px | Left margin |
| add-margin-right-{n} | margin-right: {n}px | Right margin |
| margin-auto | margin: auto | Auto margin (centering) |
| margin-x-auto | margin-left: auto; margin-right: auto | Horizontal auto margin |
| margin-left-auto | margin-left: auto | Push left with auto margin |
| margin-right-auto | margin-right: auto | Push right with auto margin |
| space-x-{n} | margin-left: {n}px on children (except first) | Horizontal spacing between children |
| space-y-{n} | margin-top: {n}px on children (except first) | Vertical spacing between children |
Sizing
Width, height, min/max dimensions, and aspect ratio.
| Class | CSS Output | Description |
|---|---|---|
| set-width-{n} | width: {n}px | Fixed pixel width |
| set-height-{n} | height: {n}px | Fixed pixel height |
| set-size-{n} | width: {n}px; height: {n}px | Fixed square size |
| set-min-width-{n} | min-width: {n}px | Minimum width |
| set-min-height-{n} | min-height: {n}px | Minimum height |
| set-max-width-{n} | max-width: {n}px | Maximum width |
| set-max-height-{n} | max-height: {n}px | Maximum height |
| width-full | width: 100% | Full width |
| width-screen | width: 100vw | Full viewport width |
| width-auto | width: auto | Auto width |
| width-half | width: 50% | Half width |
| width-third | width: 33.333% | One-third width |
| width-quarter | width: 25% | One-quarter width |
| height-full | height: 100% | Full height |
| height-screen | height: 100vh | Full viewport height |
| height-auto | height: auto | Auto height |
| min-height-screen | min-height: 100vh | At least full viewport height |
| aspect-square | aspect-ratio: 1 / 1 | Square aspect ratio |
| aspect-video | aspect-ratio: 16 / 9 | 16:9 video aspect ratio |
| aspect-portrait | aspect-ratio: 3 / 4 | Portrait aspect ratio |
| object-cover | object-fit: cover | Cover container preserving ratio |
| object-contain | object-fit: contain | Contain within bounds |
| object-fill | object-fit: fill | Stretch to fill |
| object-center | object-position: center | Center object position |
Colors
Text color, background color, and border color — 20 families × 10 shades (50–950).
| Class | CSS Output | Description |
|---|---|---|
| color-{name}-{shade} | color: var(--{name}-{shade}) | Text color. e.g. color-blue-500 |
| background-{name}-{shade} | background-color: var(--{name}-{shade}) | Background color. e.g. background-red-100 |
| border-color-{name}-{shade} | border-color: var(--{name}-{shade}) | Border color. e.g. border-color-green-600 |
| color-white | color: #ffffff | White text |
| color-black | color: #000000 | Black text |
| background-white | background-color: #ffffff | White background |
| background-black | background-color: #000000 | Black background |
| background-transparent | background-color: transparent | Transparent background |
| color-current | color: currentColor | Inherit current color |
| opacity-{0-100} | opacity: {n/100} | Element opacity (0, 10, 20 … 100) |
| bg-opacity-{0-100} | --bg-opacity: {n/100} | Background opacity variable |
Color families
gray, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose, slate, zinc
Borders & Radius
Border width, style, and border-radius utilities.
| Class | CSS Output | Description |
|---|---|---|
| add-border-{n} | border: {n}px solid currentColor | Border on all sides |
| add-border-top-{n} | border-top: {n}px solid currentColor | Top border only |
| add-border-bottom-{n} | border-bottom: {n}px solid currentColor | Bottom border only |
| add-border-left-{n} | border-left: {n}px solid currentColor | Left border only |
| add-border-right-{n} | border-right: {n}px solid currentColor | Right border only |
| border-solid | border-style: solid | Solid border style |
| border-dashed | border-style: dashed | Dashed border style |
| border-dotted | border-style: dotted | Dotted border style |
| border-none | border: none | Remove all borders |
| round-corners-{n} | border-radius: {n}px | Rounded corners (0–48) |
| round-corners-top-{n} | border-top-left-radius: {n}px; border-top-right-radius: {n}px | Top corners only |
| round-corners-bottom-{n} | border-bottom-left-radius: {n}px; border-bottom-right-radius: {n}px | Bottom corners only |
| round-corners-left-{n} | border-top-left-radius: {n}px; border-bottom-left-radius: {n}px | Left corners only |
| round-corners-right-{n} | border-top-right-radius: {n}px; border-bottom-right-radius: {n}px | Right corners only |
| make-circle | border-radius: 50% | Fully round (circle/ellipse) |
| make-pill | border-radius: 9999px | Pill / capsule shape |
| outline-none | outline: none | Remove focus outline |
| ring-{n} | box-shadow: 0 0 0 {n}px | Focus ring via box-shadow |
Typography
Font size, weight, style, alignment, decoration, line-height, and letter-spacing.
| Class | CSS Output | Description |
|---|---|---|
| set-text-{n} | font-size: {n}px | Font size in px (8–144) |
| text-bold | font-weight: 700 | Bold text |
| text-semibold | font-weight: 600 | Semibold text |
| text-medium | font-weight: 500 | Medium weight |
| text-normal | font-weight: 400 | Normal weight |
| text-light | font-weight: 300 | Light weight |
| text-thin | font-weight: 100 | Thin / hairline weight |
| text-extrabold | font-weight: 800 | Extra bold |
| text-black-weight | font-weight: 900 | Black / heaviest weight |
| text-italic | font-style: italic | Italic text |
| text-not-italic | font-style: normal | Remove italic |
| text-center | text-align: center | Center-align text |
| text-left | text-align: left | Left-align text |
| text-right | text-align: right | Right-align text |
| text-justify | text-align: justify | Justify text |
| text-uppercase | text-transform: uppercase | Uppercase text |
| text-lowercase | text-transform: lowercase | Lowercase text |
| text-capitalize | text-transform: capitalize | Capitalize first letters |
| text-no-transform | text-transform: none | Remove text transform |
| text-underline | text-decoration: underline | Underline text |
| text-line-through | text-decoration: line-through | Strikethrough text |
| text-no-decoration | text-decoration: none | Remove text decoration |
| text-overline | text-decoration: overline | Overline text |
| line-height-tight | line-height: 1.25 | Tight line height |
| line-height-normal | line-height: 1.5 | Normal line height |
| line-height-relaxed | line-height: 1.75 | Relaxed line height |
| line-height-loose | line-height: 2 | Loose line height |
| letter-space-tight | letter-spacing: -0.05em | Tight letter spacing |
| letter-space-normal | letter-spacing: 0 | Normal letter spacing |
| letter-space-wide | letter-spacing: 0.05em | Wide letter spacing |
| letter-space-wider | letter-spacing: 0.1em | Wider letter spacing |
| text-truncate | overflow: hidden; text-overflow: ellipsis; white-space: nowrap | Single-line text truncation |
| text-nowrap | white-space: nowrap | Prevent line wrapping |
| text-wrap | white-space: normal | Allow line wrapping |
| text-break | word-break: break-all | Break long words |
| font-mono | font-family: ui-monospace, monospace | Monospace font |
| font-sans | font-family: ui-sans-serif, system-ui, sans-serif | Sans-serif font stack |
| font-serif | font-family: ui-serif, Georgia, serif | Serif font stack |
| list-none | list-style: none; padding: 0; margin: 0 | Remove list markers |
| list-disc | list-style-type: disc | Bullet list |
| list-decimal | list-style-type: decimal | Numbered list |
Shadows
Box shadow and text shadow utilities.
| Class | CSS Output | Description |
|---|---|---|
| add-shadow-none | box-shadow: none | Remove shadow |
| add-shadow-xs | box-shadow: 0 1px 2px rgba(0,0,0,0.05) | Extra small shadow |
| add-shadow-sm | box-shadow: 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06) | Small shadow |
| add-shadow-md | box-shadow: 0 4px 6px rgba(0,0,0,0.1), 0 2px 4px rgba(0,0,0,0.06) | Medium shadow |
| add-shadow-lg | box-shadow: 0 10px 15px rgba(0,0,0,0.1), 0 4px 6px rgba(0,0,0,0.05) | Large shadow |
| add-shadow-xl | box-shadow: 0 20px 25px rgba(0,0,0,0.1), 0 10px 10px rgba(0,0,0,0.04) | Extra large shadow |
| add-shadow-2xl | box-shadow: 0 25px 50px rgba(0,0,0,0.25) | 2xl shadow |
| add-shadow-inner | box-shadow: inset 0 2px 4px rgba(0,0,0,0.06) | Inner shadow |
| add-shadow-colored-{name} | box-shadow: 0 4px 14px var(--{name}-shadow) | Colored shadow (e.g. add-shadow-colored-blue) |
| text-shadow-sm | text-shadow: 0 1px 2px rgba(0,0,0,0.2) | Small text shadow |
| text-shadow-md | text-shadow: 0 2px 4px rgba(0,0,0,0.3) | Medium text shadow |
| text-shadow-lg | text-shadow: 0 4px 8px rgba(0,0,0,0.4) | Large text shadow |
| text-shadow-none | text-shadow: none | Remove text shadow |
Positioning
Position type, inset values, z-index, and float utilities.
| Class | CSS Output | Description |
|---|---|---|
| position-relative | position: relative | Relative positioning |
| position-absolute | position: absolute | Absolute positioning |
| position-fixed | position: fixed | Fixed to viewport |
| position-sticky | position: sticky | Sticky positioning |
| position-static | position: static | Default static positioning |
| pin-top-{n} | top: {n}px | Top inset (0–100) |
| pin-bottom-{n} | bottom: {n}px | Bottom inset |
| pin-left-{n} | left: {n}px | Left inset |
| pin-right-{n} | right: {n}px | Right inset |
| pin-center | top: 50%; left: 50%; transform: translate(-50%,-50%) | Absolutely center element |
| pin-center-x | left: 50%; transform: translateX(-50%) | Center horizontally |
| pin-center-y | top: 50%; transform: translateY(-50%) | Center vertically |
| pin-inset-0 | inset: 0 | Stretch to all edges |
| layer-{n} | z-index: {n} | Z-index (0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100) |
| layer-auto | z-index: auto | Auto z-index |
| float-left | float: left | Float element left |
| float-right | float: right | Float element right |
| float-none | float: none | Remove float |
| clear-both | clear: both | Clear float |
| clearfix | ::after { content:''; display:table; clear:both } | Clearfix hack |
Transitions
Transition shorthand, duration, timing, and transform utilities.
| Class | CSS Output | Description |
|---|---|---|
| transition | transition: all 0.15s ease | Default transition all properties |
| transition-colors | transition: color, background-color, border-color 0.15s ease | Transition color properties |
| transition-opacity | transition: opacity 0.15s ease | Transition opacity |
| transition-transform | transition: transform 0.15s ease | Transition transforms |
| transition-shadow | transition: box-shadow 0.15s ease | Transition box-shadow |
| duration-75 | transition-duration: 75ms | 75ms transition |
| duration-100 | transition-duration: 100ms | 100ms transition |
| duration-150 | transition-duration: 150ms | 150ms transition |
| duration-200 | transition-duration: 200ms | 200ms transition |
| duration-300 | transition-duration: 300ms | 300ms transition |
| duration-500 | transition-duration: 500ms | 500ms transition |
| duration-700 | transition-duration: 700ms | 700ms transition |
| duration-1000 | transition-duration: 1000ms | 1000ms transition |
| ease-linear | transition-timing-function: linear | Linear easing |
| ease-in | transition-timing-function: ease-in | Ease in |
| ease-out | transition-timing-function: ease-out | Ease out |
| ease-in-out | transition-timing-function: ease-in-out | Ease in and out |
| scale-{n} | transform: scale({n/100}) | Scale transform (e.g. scale-110 = 1.1) |
| rotate-{n} | transform: rotate({n}deg) | Rotation (0, 45, 90, 135, 180, 270) |
| translate-x-{n} | transform: translateX({n}px) | Horizontal translate |
| translate-y-{n} | transform: translateY({n}px) | Vertical translate |
| skew-x-{n} | transform: skewX({n}deg) | Horizontal skew |
| skew-y-{n} | transform: skewY({n}deg) | Vertical skew |
| will-change-transform | will-change: transform | Hint GPU acceleration for transforms |
| will-change-opacity | will-change: opacity | Hint GPU acceleration for opacity |
Animations
Keyframe animation helpers. See animations.html for a full showcase of 70+ animations.
| Class | CSS Output | Description |
|---|---|---|
| animate-spin | animation: spin 1s linear infinite | Continuous rotation |
| animate-ping | animation: ping 1s cubic-bezier(0,0,0.2,1) infinite | Ripple / beacon pulse |
| animate-pulse | animation: pulse 2s cubic-bezier(0.4,0,0.6,1) infinite | Slow opacity pulse |
| animate-bounce | animation: bounce 1s infinite | Up-and-down bounce |
| animate-fade-in | animation: fadeIn 0.5s ease forwards | Fade in on load |
| animate-fade-out | animation: fadeOut 0.5s ease forwards | Fade out |
| animate-slide-up | animation: slideUp 0.4s ease forwards | Slide in from below |
| animate-slide-down | animation: slideDown 0.4s ease forwards | Slide in from above |
| animate-slide-left | animation: slideLeft 0.4s ease forwards | Slide in from right |
| animate-slide-right | animation: slideRight 0.4s ease forwards | Slide in from left |
| animate-zoom-in | animation: zoomIn 0.3s ease forwards | Scale up from 0.8 |
| animate-zoom-out | animation: zoomOut 0.3s ease forwards | Scale down to 0.8 |
| animate-shake | animation: shake 0.5s ease | Horizontal shake |
| animate-wiggle | animation: wiggle 0.5s ease | Rotation wiggle |
| animate-flip-x | animation: flipX 0.5s ease forwards | Flip on X axis |
| animate-flip-y | animation: flipY 0.5s ease forwards | Flip on Y axis |
| animate-heartbeat | animation: heartbeat 1s ease infinite | Pulsing heartbeat scale |
| animate-float | animation: float 3s ease-in-out infinite | Gentle floating effect |
| animate-glow | animation: glow 2s ease-in-out infinite | Glowing box-shadow pulse |
| animate-typewriter | animation: typewriter steps(30) forwards | Typewriter reveal effect |
| animate-none | animation: none | Disable animation |
| delay-{n} | animation-delay: {n}ms | Animation delay (75, 100, 150, 200, 300, 500, 700, 1000) |
| iteration-{n} | animation-iteration-count: {n} | Play count (1, 2, 3, infinite) |
State Variants
Prefix any utility with a state modifier to apply it conditionally.
| Class | CSS Output | Description |
|---|---|---|
| on-hover:{utility} | .on-hover\\:{utility}:hover { … } | Apply utility on :hover |
| on-focus:{utility} | .on-focus\\:{utility}:focus { … } | Apply utility on :focus |
| on-active:{utility} | .on-active\\:{utility}:active { … } | Apply utility on :active |
| on-disabled:{utility} | .on-disabled\\:{utility}:disabled { … } | Apply utility when disabled |
| on-checked:{utility} | .on-checked\\:{utility}:checked { … } | Apply utility when checked |
| on-visited:{utility} | .on-visited\\:{utility}:visited { … } | Apply utility on visited links |
| on-placeholder:{utility} | .on-placeholder\\:{utility}::placeholder { … } | Style placeholder text |
| group-hover:{utility} | .group:hover .group-hover\\:{utility} { … } | Apply when parent .group is hovered |
| group-focus:{utility} | .group:focus-within .group-focus\\:{utility} { … } | Apply when child inside group is focused |
| dark:{utility} | @media (prefers-color-scheme: dark) { … } | Apply in dark mode |
| first:{utility} | .first\\:{utility}:first-child { … } | Apply on first child |
| last:{utility} | .last\\:{utility}:last-child { … } | Apply on last child |
| odd:{utility} | .odd\\:{utility}:nth-child(odd) { … } | Apply on odd children |
| even:{utility} | .even\\:{utility}:nth-child(even) { … } | Apply on even children |
Responsive
Breakpoint prefixes. Prefix any utility to apply it at a specific screen size.
| Prefix | Breakpoint | Description |
|---|---|---|
| sm:{utility} | @media (min-width: 640px) | Small screens and up |
| md:{utility} | @media (min-width: 768px) | Medium screens and up |
| lg:{utility} | @media (min-width: 1024px) | Large screens and up |
| xl:{utility} | @media (min-width: 1280px) | Extra large screens and up |
| 2xl:{utility} | @media (min-width: 1536px) | 2XL screens and up |
| on-mobile:{utility} | @media (max-width: 767px) | Mobile only (max 767px) |
| on-tablet:{utility} | @media (min-width: 768px) and (max-width: 1023px) | Tablet only |
| on-desktop:{utility} | @media (min-width: 1024px) | Desktop and above |
Usage example
class="grid-cols-1 md:grid-cols-2 lg:grid-cols-3"
Display & Overflow
Display modes, visibility, overflow control, and cursor utilities.
| Class | CSS Output | Description |
|---|---|---|
| make-block | display: block | Block element |
| make-inline | display: inline | Inline element |
| make-inline-block | display: inline-block | Inline block element |
| make-hidden | display: none | Hide element (removes from flow) |
| make-invisible | visibility: hidden | Hide but keep space |
| make-visible | visibility: visible | Make visible |
| make-table | display: table | Table display |
| make-table-cell | display: table-cell | Table cell display |
| make-table-row | display: table-row | Table row display |
| overflow-hidden | overflow: hidden | Hide overflow content |
| overflow-auto | overflow: auto | Scroll when needed |
| overflow-scroll | overflow: scroll | Always show scrollbar |
| overflow-visible | overflow: visible | Show overflow content |
| overflow-x-auto | overflow-x: auto | Horizontal scroll when needed |
| overflow-x-hidden | overflow-x: hidden | Hide horizontal overflow |
| overflow-y-auto | overflow-y: auto | Vertical scroll when needed |
| overflow-y-hidden | overflow-y: hidden | Hide vertical overflow |
| cursor-pointer | cursor: pointer | Hand cursor |
| cursor-default | cursor: default | Default cursor |
| cursor-not-allowed | cursor: not-allowed | Not-allowed cursor |
| cursor-grab | cursor: grab | Grab cursor |
| cursor-text | cursor: text | Text cursor |
| cursor-crosshair | cursor: crosshair | Crosshair cursor |
| cursor-wait | cursor: wait | Wait / spinner cursor |
| pointer-events-none | pointer-events: none | Disable mouse events |
| pointer-events-auto | pointer-events: auto | Enable mouse events |
| select-none | user-select: none | Disable text selection |
| select-all | user-select: all | Select all on click |
| select-text | user-select: text | Allow text selection |
| resize-none | resize: none | Disable textarea resize |
| resize | resize: both | Enable both-axis resize |
| resize-x | resize: horizontal | Horizontal resize only |
| resize-y | resize: vertical | Vertical resize only |
| isolate | isolation: isolate | Create new stacking context |
| mix-blend-multiply | mix-blend-mode: multiply | Multiply blend mode |
| mix-blend-screen | mix-blend-mode: screen | Screen blend mode |
| mix-blend-overlay | mix-blend-mode: overlay | Overlay blend mode |
Gradients
Linear gradient backgrounds and text gradient effects.
| Class | CSS Output | Description |
|---|---|---|
| gradient-to-r | background-image: linear-gradient(to right, var(--from-color), var(--to-color)) | Gradient left to right |
| gradient-to-l | background-image: linear-gradient(to left, var(--from-color), var(--to-color)) | Gradient right to left |
| gradient-to-t | background-image: linear-gradient(to top, var(--from-color), var(--to-color)) | Gradient bottom to top |
| gradient-to-b | background-image: linear-gradient(to bottom, var(--from-color), var(--to-color)) | Gradient top to bottom |
| gradient-to-tr | background-image: linear-gradient(to top right, …) | Diagonal gradient (bottom-left to top-right) |
| gradient-to-br | background-image: linear-gradient(to bottom right, …) | Diagonal gradient (top-left to bottom-right) |
| from-{name}-{shade} | --from-color: var(--{name}-{shade}) | Gradient start color |
| via-{name}-{shade} | --via-color: var(--{name}-{shade}) | Gradient middle stop |
| to-{name}-{shade} | --to-color: var(--{name}-{shade}) | Gradient end color |
| text-gradient | background-clip: text; -webkit-background-clip: text; color: transparent | Apply gradient to text (combine with gradient-to-r) |
| gradient-blue-purple | linear-gradient(135deg, #3b82f6, #8b5cf6) | Blue to purple preset |
| gradient-pink-orange | linear-gradient(135deg, #ec4899, #f97316) | Pink to orange preset |
| gradient-green-teal | linear-gradient(135deg, #22c55e, #14b8a6) | Green to teal preset |
| gradient-dark | linear-gradient(135deg, #0f172a, #1e293b) | Dark hero gradient |
Component Variants
make-button, style-*, size-*, and other component modifier classes.
| Class | CSS Output / Notes | Description |
|---|---|---|
| make-button | display:inline-flex; align-items:center; … | Base button reset & layout |
| style-primary | background:#2563eb; color:#fff; … | Primary (blue) button style |
| style-secondary | background:#f1f5f9; color:#1e293b; … | Secondary (gray) button style |
| style-danger | background:#dc2626; color:#fff; … | Danger (red) button style |
| style-success | background:#16a34a; color:#fff; … | Success (green) button style |
| style-warning | background:#d97706; color:#fff; … | Warning (amber) button style |
| style-ghost | background:transparent; border:1.5px solid currentColor; … | Ghost / outlined button style |
| style-link | background:none; color:#2563eb; text-decoration:underline | Link-style button |
| size-small | padding: 6px 14px; font-size: 13px | Small button size |
| size-medium | padding: 10px 20px; font-size: 15px | Medium button size (default) |
| size-large | padding: 14px 28px; font-size: 17px | Large button size |
| size-xl | padding: 18px 36px; font-size: 19px | Extra large button size |
| .btn | Component class — styled button | Pre-built button component |
| .btn-primary / btn-secondary / btn-danger | Colored button variants | Button color variants (component API) |
| .btn-sm / .btn-lg | Small/large size variants | Button size variants (component API) |
| .card | background:#fff; border-radius:12px; box-shadow:… | Card component wrapper |
| .card-header / .card-body / .card-footer | Padded sections inside card | Card layout sub-components |
| .badge | inline-flex; padding; border-radius:999px; … | Badge / chip component |
| .alert / .alert-success / .alert-danger / .alert-warning | Colored alert box | Alert component variants |
| .input | Styled form input | Base input component |
| .avatar / .avatar-sm / .avatar-lg | Circular image container | Avatar component |
| .spinner | Animated border spinner | Loading spinner component |
| .skeleton | Shimmer loading placeholder | Skeleton screen component |
| .progress / .progress-bar | Progress bar container and fill | Progress bar component |
| .tooltip | [data-tooltip]::after content | CSS-only tooltip component |
| .modal / .modal-content / .modal-header / .modal-body / .modal-footer | Overlay modal layout | Modal dialog component |
| .table / .table-striped / .table-bordered | Styled table variants | Table component classes |
| .nav / .nav-link / .nav-link-active | Navigation bar helpers | Nav component classes |
| .breadcrumb / .breadcrumb-item | Breadcrumb navigation | Breadcrumb component |
Scroll Utilities
Scroll snapping, smooth scrolling, and scrollbar control.
| Class | CSS Output | Description |
|---|---|---|
| scroll-smooth | scroll-behavior: smooth | Smooth page scrolling |
| scroll-auto | scroll-behavior: auto | Instant scroll jump |
| scroll-snap-x | scroll-snap-type: x mandatory | Horizontal scroll snap container |
| scroll-snap-y | scroll-snap-type: y mandatory | Vertical scroll snap container |
| scroll-snap-start | scroll-snap-align: start | Snap item to start |
| scroll-snap-center | scroll-snap-align: center | Snap item to center |
| scroll-snap-end | scroll-snap-align: end | Snap item to end |
| scroll-margin-{n} | scroll-margin-top: {n}px | Offset for scroll anchors (sticky header compensation) |
| scrollbar-hide | scrollbar-width: none; &::-webkit-scrollbar { display:none } | Hide scrollbar visually |
| scrollbar-thin | scrollbar-width: thin | Thin native scrollbar |
| overscroll-none | overscroll-behavior: none | Prevent scroll chaining |
| overscroll-contain | overscroll-behavior: contain | Contain scroll bounce to element |
| touch-pan-x | touch-action: pan-x | Allow horizontal touch pan only |
| touch-pan-y | touch-action: pan-y | Allow vertical touch pan only |
| touch-none | touch-action: none | Disable all touch actions |
| touch-auto | touch-action: auto | Default touch handling |
Logical Properties
Writing-mode-aware margin, padding, and border utilities (LTR / RTL support).
| Class | CSS Output | Description |
|---|---|---|
| add-padding-inline-{n} | padding-inline: {n}px | Inline-axis padding (LTR: left+right) |
| add-padding-block-{n} | padding-block: {n}px | Block-axis padding (LTR: top+bottom) |
| add-padding-inline-start-{n} | padding-inline-start: {n}px | Logical padding start |
| add-padding-inline-end-{n} | padding-inline-end: {n}px | Logical padding end |
| add-margin-inline-{n} | margin-inline: {n}px | Inline-axis margin |
| add-margin-block-{n} | margin-block: {n}px | Block-axis margin |
| add-margin-inline-start-{n} | margin-inline-start: {n}px | Logical margin start |
| add-margin-inline-end-{n} | margin-inline-end: {n}px | Logical margin end |
| border-inline-{n} | border-inline: {n}px solid | Logical inline border |
| border-block-{n} | border-block: {n}px solid | Logical block border |
| inset-inline-{n} | inset-inline: {n}px | Logical inline inset (pin left+right) |
| inset-block-{n} | inset-block: {n}px | Logical block inset (pin top+bottom) |
Dynamic Viewport
Modern dvh / svh / lvh viewport units for mobile-aware layouts.
| Class | CSS Output | Description |
|---|---|---|
| height-dvh | height: 100dvh | Dynamic viewport height (accounts for mobile chrome) |
| min-height-dvh | min-height: 100dvh | Minimum dynamic viewport height |
| height-svh | height: 100svh | Small viewport height (keyboard-visible) |
| height-lvh | height: 100lvh | Large viewport height (keyboard-hidden) |
| width-dvw | width: 100dvw | Dynamic viewport width |
| width-svw | width: 100svw | Small viewport width |
| width-lvw | width: 100lvw | Large viewport width |
| height-fit | height: fit-content | Height based on content |
| width-fit | width: fit-content | Width based on content |
| width-min-content | width: min-content | Minimum content width |
| width-max-content | width: max-content | Maximum content width |
| height-min-content | height: min-content | Minimum content height |
| height-max-content | height: max-content | Maximum content height |
Control element visibility and layout when printing.
| Class | CSS Output | Description |
|---|---|---|
| print:make-hidden | @media print { display: none } | Hide element when printing |
| print:make-block | @media print { display: block } | Show as block when printing |
| print:make-flex | @media print { display: flex } | Show as flex when printing |
| print:color-black | @media print { color: #000 } | Force black text for print |
| print:background-white | @media print { background: #fff } | Force white background for print |
| print:add-shadow-none | @media print { box-shadow: none } | Remove shadows for print |
| print:break-before | @media print { page-break-before: always } | Page break before element |
| print:break-after | @media print { page-break-after: always } | Page break after element |
| print:break-inside-avoid | @media print { page-break-inside: avoid } | Prevent breaking inside element |