Scribd
Upload
14 views2 pages

Tailwind Css Cheat Sheet Detailed

The Tailwind CSS Cheat Sheet provides a comprehensive overview of utility classes for layout, spacing, colors, typography, flexbox, grid, position, borders, transitions, and responsive design. It includes specific examples for each category, such as width/height utilities, background colors, font sizes, and positioning methods. Additionally, it outlines responsive prefixes for applying styles at different screen sizes.

Uploaded by

developer.rahmatullah.masum
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
14 views2 pages

Tailwind Css Cheat Sheet Detailed

The Tailwind CSS Cheat Sheet provides a comprehensive overview of utility classes for layout, spacing, colors, typography, flexbox, grid, position, borders, transitions, and responsive design. It includes specific examples for each category, such as width/height utilities, background colors, font sizes, and positioning methods. Additionally, it outlines responsive prefixes for applying styles at different screen sizes.

Uploaded by

developer.rahmatullah.masum
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 2

Tailwind CSS Cheat Sheet (Detailed)

Layout

- container: Responsive fixed-width container, centered using mx-auto.

- block / inline / inline-block: Controls how an element is displayed.

- flex / grid: Enables Flexbox or Grid layout system.

- hidden: Completely hides the element.

- w-*/h-*: Width/Height utility classes. (e.g. w-1/2 = 50% width, h-16 = 4rem)

- min-w-*/max-w-*: Set min/max width constraints.

- overflow-auto/overflow-hidden: Control scroll behavior of overflowing content.

Spacing

- p-*/m-*: Padding/Margin for all sides or individually (px, py, pt, etc.).

- space-x-*/space-y-*: Add horizontal/vertical space between children in flex container.

Colors

- bg-{color}-{shade}: Background color (e.g. bg-blue-500).

- text-{color}-{shade}: Text color.

- border-{color}-{shade}: Border color.

- hover:bg-* / hover:text-*: Apply on hover for interactivity.

Typography

- text-xs to text-9xl: Font sizes (e.g. text-4xl = 2.25rem).

- font-thin to font-black: Font weights from 100 to 900.

- text-left / center / right: Text alignment.

- uppercase / lowercase / capitalize: Transform text casing.

- leading-*: Line height control (tight, relaxed, etc.).

- tracking-*: Adjust letter spacing (tight, wide, etc.).

Flexbox & Grid

- flex-row / flex-col: Direction of flex children.

- justify-* / items-*: Align content along main/cross axes.

- gap-*: Spacing between children (works in flex/grid).


- grid-cols-* / col-span-*: Grid columns and how many columns a child spans.

Position

- relative / absolute / fixed / sticky: Set positioning type.

- top-*, bottom-*, left-*, right-*: Offset elements from respective sides.

- z-*: Set stack order using z-index (z-10, z-50, etc.).

Borders & Radius

- border / border-* / border-{color}-{shade}: Add borders and control their color.

- rounded / rounded-lg / rounded-full: Border radius utilities.

- divide-x-* / divide-y-*: Add dividers between flex children.

Transitions & Animations

- transition / transition-all: Enable CSS transitions.

- duration-*: Duration of transition (e.g. duration-300 = 300ms).

- ease-linear / ease-in / ease-out / ease-in-out: Timing function for transitions.

- animate-pulse / animate-bounce / animate-spin: Built-in animations.

Responsive Prefixes

- sm: 640px

- md: 768px

- lg: 1024px

- xl: 1280px

- 2xl: 1536px

Apply like: md:flex, sm:text-xl, etc. to scope styles to breakpoints.

You might also like