Tailwind CSS Classes and Their Uses
Layout
- container: Centers the content and applies max-width based on screen size.
- block: Displays an element as a block-level element.
- inline-block: Displays an element as an inline block-level element.
- flex: Creates a flex container for flexible layouts.
- grid: Creates a grid container for grid-based layouts.
- hidden: Hides the element.
Flexbox and Grid
- flex-row: Sets the flex items to align in a row.
- flex-col: Sets the flex items to align in a column.
- justify-center: Centers flex items along the main axis.
- items-center: Centers flex items along the cross axis.
- grid-cols-3: Defines a grid with 3 columns.
- gap-4: Adds spacing between grid or flex items.
Spacing
- p-4: Applies padding of 1rem (16px) on all sides.
- m-4: Applies margin of 1rem (16px) on all sides.
- px-2: Applies horizontal padding of 0.5rem (8px).
- py-2: Applies vertical padding of 0.5rem (8px).
- space-x-4: Adds horizontal spacing between inline children.
Typography
- text-lg: Applies a font size of 1.125rem (18px).
- font-bold: Makes the text bold.
- text-center: Centers the text horizontally.
- text-gray-500: Applies a gray color to the text.
- uppercase: Transforms the text to uppercase.
Background
- bg-blue-500: Applies a blue background color.
- bg-gradient-to-r: Creates a gradient background from left to right.
- from-green-500: Defines the start color for a gradient.
- bg-cover: Sets the background image to cover the element completely.
Borders
- border: Adds a border of 1px solid.
- rounded: Applies a small border radius to the element.
- rounded-full: Makes the element fully rounded, like a circle.
- border-gray-500: Applies a gray color to the border.
Shadows and Effects
- shadow: Adds a small box shadow.
- shadow-lg: Adds a large box shadow.
- opacity-75: Sets the opacity to 75%.
Interactivity
- cursor-pointer: Changes the cursor to a pointer on hover.
- hover:bg-blue-500: Changes the background color to blue on hover.
- focus:outline-none: Removes the focus outline.
Responsive Design
- sm:w-full: Sets the width to 100% on small screens.
- md:p-4: Applies padding of 1rem (16px) on medium screens.
- lg:text-lg: Sets the font size to large on large screens.
Layout
Container: container
Display: block, inline-block, flex, inline-flex, grid, inline-grid, hidden
Position: absolute, relative, fixed, sticky
Top/Right/Bottom/Left: top-0, right-0, bottom-0, left-0, inset-0, inset-x-0, inset-y-0
Z-Index: z-0, z-10, z-20, etc.
Overflow: overflow-hidden, overflow-auto, overflow-scroll
Object Fit: object-contain, object-cover, object-fill
Flexbox and Grid
Flexbox Container: flex, inline-flex
Flexbox Properties:
o flex-row, flex-col, flex-wrap, flex-nowrap
o justify-start, justify-center, justify-end, justify-between, justify-around
o items-start, items-center, items-end, items-baseline
o self-start, self-center, self-end
Grid Container: grid, inline-grid
Grid Properties:
o grid-cols-1, grid-cols-2, grid-rows-1, grid-rows-2
o gap-1, gap-2, gap-x-1, gap-y-1
Spacing
Padding: p-1, p-2, px-1, py-1, pt-1, pr-1, pb-1, pl-1
Margin: m-1, m-2, mx-1, my-1, mt-1, mr-1, mb-1, ml-1
Space Between: space-x-1, space-y-1
Sizing
Width: w-auto, w-full, w-1/2, w-1/4, max-w-lg
Height: h-auto, h-full, h-screen, h-1/2
Min/Max Width/Height: min-w-0, max-w-full, min-h-0, max-h-full
Typography
Font Size: text-xs, text-sm, text-base, text-lg, text-xl, text-2xl
Font Weight: font-thin, font-light, font-normal, font-bold, font-extrabold
Text Align: text-left, text-center, text-right, text-justify
Text Color: text-black, text-white, text-gray-500, text-red-500
Text Decoration: underline, line-through, no-underline
Text Transform: uppercase, lowercase, capitalize
Leading (Line Height): leading-none, leading-tight, leading-loose
Background
Color: bg-black, bg-white, bg-gray-500, bg-red-500
Gradient: bg-gradient-to-r, bg-gradient-to-l, from-blue-500, to-green-500
Position: bg-center, bg-top, bg-bottom, bg-left
Size: bg-cover, bg-contain, bg-auto
Borders
Border Width: border, border-0, border-2, border-4
Border Radius: rounded, rounded-full, rounded-lg, rounded-none
Border Color: border-black, border-white, border-gray-500
Divide Borders: divide-x, divide-y, divide-gray-500
Shadows and Effects
Box Shadow: shadow-sm, shadow, shadow-lg, shadow-none
Opacity: opacity-0, opacity-25, opacity-50, opacity-75, opacity-100
Interactivity
Cursor: cursor-pointer, cursor-not-allowed
User Select: select-none, select-text, select-all
Hover, Focus, Active: hover:bg-blue-500, focus:outline-none, active:bg-red-500
Responsive
Prefixes:
o sm:, md:, lg:, xl:, 2xl:
o Example: sm:w-full, md:p-4, lg:text-lg
