Scribd
Upload
6 views

tailwind_css_cheat_sheet

The Tailwind CSS Cheat Sheet provides a comprehensive overview of utility classes for layout, spacing, colors, typography, flexbox, grid, positioning, borders, transitions, and responsive design. It includes specific class examples for each category, such as container, padding, text color, flex direction, and more. Additionally, it outlines responsive prefixes for various screen sizes to facilitate responsive design.

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
6 views

tailwind_css_cheat_sheet

The Tailwind CSS Cheat Sheet provides a comprehensive overview of utility classes for layout, spacing, colors, typography, flexbox, grid, positioning, borders, transitions, and responsive design. It includes specific class examples for each category, such as container, padding, text color, flex direction, and more. Additionally, it outlines responsive prefixes for various screen sizes to facilitate responsive design.

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

Layout

- container: Responsive fixed-width container

- block / inline-block / inline: Display types

- flex / inline-flex: Enable flexbox

- grid: Enable grid layout

- hidden: Hide element

- w-* / h-*: Width / height (e.g. w-1/2, h-16)

- min-w-* / max-w-*: Min/max width

- overflow-auto / overflow-hidden: Scroll behavior

Spacing

- p-* / px-* / py-*: Padding (all / horizontal / vertical)

- m-* / mx-* / my-*: Margin (same as padding)

- space-x-* / space-y-*: Spacing between child elements

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-*: Hover variants

Typography

- text-xs to text-9xl: Font size

- font-thin to font-black: Font weight

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

- uppercase / lowercase / capitalize: Text transform

- leading-*: Line height (e.g. leading-tight)

- tracking-*: Letter spacing

Flexbox & Grid

- flex-row / flex-col: Flex direction


- justify-*: Main axis alignment

- items-*: Cross axis alignment

- gap-*: Gap between grid/flex items

- grid-cols-*: Number of grid columns

- col-span-*: Grid column span

Position

- relative / absolute / fixed / sticky: Positioning types

- top-* / bottom-* / left-* / right-*: Offsets

- z-*: Z-index (stacking order)

Borders & Radius

- border: Adds border

- border-*: Border sides (e.g. border-l)

- rounded / rounded-*: Border radius

- divide-x-* / divide-y-*: Divider lines between children

Transitions & Animations

- transition: Enable transitions

- duration-*: Transition duration

- ease-*: Timing functions

- animate-*: Built-in animations (e.g. animate-pulse, animate-spin)

Responsive Prefixes

- sm: 640px

- md: 768px

- lg: 1024px

- xl: 1280px

- 2xl: 1536px

You might also like