Tailwind CSS Cheatsheet

Official Docs

Responsive Design

View Docs →

Responsive Display

Docs →

sm:hidden md:block

Container Queries

View Docs →

Container Context

Docs →

@container

Pseudo-Classes

View Docs →

Hover Transform

Docs →

hover:scale-105

Dark Mode

View Docs →

Dark Background

Docs →

dark:bg-gray-800

Accessibility

View Docs →

Screen Reader Only

Docs →

sr-only

Spacing & Sizing

View Docs →

Padding (1rem)

Docs →

p-4

Typography

View Docs →

Extra Small Text

Docs →

text-xs

Sample Text

Blue Text

Docs →

text-blue-500

Colored Text

Border Width 2

Docs →

border-2

Display Flex

Docs →

flex

Display Grid

Docs →

grid

Opacity 50%

Docs →

opacity-50

Transitions & Animations

View Docs →

Default Transition

Docs →

transition

Transforms

View Docs →

Scale 75%

Docs →

scale-75

Interactivity

View Docs →

Cursor Pointer

Docs →

cursor-pointer

Hover

Layout & Position

View Docs →

Container

Docs →

container

Box Shadow

View Docs →

Shadow

Docs →

shadow shadow-neutral-500

Advanced Selectors

View Docs →

Group Hover

Docs →

group-hover:visible

SVG & Graphics

View Docs →

SVG Fill Current

Docs →

fill-current

Display Table

Docs →

table

Cell 1Cell 2

No List Style

Docs →

list-none

  • Item 1
  • Item 2

Scroll Behavior

View Docs →

Smooth Scroll

Docs →

scroll-smooth

Writing Modes

View Docs →

Vertical Right to Left

Docs →

writing-vertical-rl