Scribd
Upload
37 views

Tailwind CSS Classes and Their Uses

Uploaded by

susildahal234
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
37 views

Tailwind CSS Classes and Their Uses

Uploaded by

susildahal234
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 5

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

You might also like