Scribd
Upload
64 views5 pages

Tailwind CSS Classes and Their Uses

Uploaded by

susildahal234
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
64 views5 pages

Tailwind CSS Classes and Their Uses

Uploaded by

susildahal234
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
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