Centers and sets max-width for responsive layout.
Sets box-sizing to border-box.
Displays element as block.
Displays element as inline-block.
Displays element inline.
Enables flexbox layout.
Enables inline flexbox layout.
Enables CSS grid layout.
Hides the element.
Makes a hidden element visible.
Applies margin of 1rem (16px) on all sides.
Applies margin-top of 1.5rem (24px).
Applies margin-right of 0.5rem (8px).
Applies margin-bottom of 2rem (32px).
Applies margin-left of 0.25rem (4px).
Applies padding of 1rem (16px) on all sides.
Applies padding-top of 0.75rem (12px).
Applies padding-right of 1.25rem (20px).
Applies padding-bottom of 0.5rem (8px).
Applies padding-left of 1.5rem (24px).
Adds horizontal spacing of 1rem (16px) between flex/grid children.
Adds vertical spacing of 0.5rem (8px) between flex/grid children.
Extra small text size (0.75rem / 12px).
Small text size (0.875rem / 14px).
Base/normal text size (1rem / 16px).
Large text size (1.125rem / 18px).
Extra large text size (1.25rem / 20px).
Thin font weight.
Light font weight.
Normal font weight.
Semi-bold font weight.
Bold font weight.
Makes text italic.
Resets italic style to normal.
Transforms text to uppercase.
Transforms text to lowercase.
Capitalizes first letter of each word.
Increases letter spacing.
Decreases letter spacing.
Sets tight line height.
Sets loose line height.
Sets background color to red at 500 intensity.
Sets background color to green at 400 intensity.
Sets background color to blue at 600 intensity.
Sets text color to red at 700 intensity.
Sets text color to dark gray (900).
Sets text color to white.
Sets border color to red at 300 intensity.
Sets border color to light gray (200).
Sets background opacity to 50%.
Sets text opacity to 75%.
Enables flexbox layout.
Enables inline flexbox layout.
Arranges flex items in a row (default).
Arranges flex items in a column.
Allows flex items to wrap to the next line.
Prevents flex items from wrapping (default).
Aligns flex items to the start horizontally.
Centers flex items horizontally.
Aligns flex items to the end horizontally.
Aligns flex items to the start vertically.
Centers flex items vertically.
Aligns flex items to the end vertically.
Enables CSS grid layout.
Creates a grid with 2 equal columns.
Creates a grid with 3 equal columns.
Creates a grid with 4 equal columns.
Makes an element span 2 columns.
Makes an element span 2 rows.
Sets gap between grid items to 1rem (16px).
Sets horizontal gap between grid items to 1.5rem (24px).
Sets vertical gap between grid items to 0.5rem (8px).
Grid auto columns size based on content.
Default position (static).
Position element relative to its normal position.
Position element absolutely within nearest positioned ancestor.
Fix element relative to the viewport.
Sets top position to 0.
Sets right position to 0.
Sets bottom position to 0.
Sets left position to 0.
Sets width to 100%.
Sets width to 50%.
Sets width to 6rem (96px).
Sets height to 100%.
Sets height to 3rem (48px).
Sets minimum width to 100%.
Sets max width to small (24rem / 384px).
Sets max height to 100vh (viewport height).
Shows scrollbars automatically if content overflows.
Hides overflowing content.
Sets z-index to 10.
Sets z-index to 50 (higher stack).
Adds 1px solid border with default color.
Sets border width to 2px.
Sets border width to 4px.
Applies border only on top side.
Applies border only on bottom side.
Applies border only on left side.
Applies border only on right side.
Applies small border-radius (default 0.25rem).
Medium border-radius (0.375rem).
Large border-radius (0.5rem).
Full circle border radius (makes element circular).
Applies small box-shadow.
Applies medium box-shadow.
Applies large box-shadow.
Applies extra-large box-shadow.
Applies very large box-shadow.
Applies inset shadow inside the element.
Makes border color transparent.
Border color gray (300 intensity).
Border color red (500 intensity).