Tailwind CSS 81 🎨 Cheatsheet - KandZ

⏱️ Estimated read: 4 min | |

Tailwind CSS is a utility-first CSS framework that provides low-level utility classes for building custom designs directly in your markup, without writing custom CSS . Version 4 represents a ground-up rewrite: the new Oxide engine built in Rust delivers up to 10x faster builds, configuration moves from JavaScript to CSS with the @theme directive, and content detection is now automatic . The framework requires Safari 16.4+, Chrome 111+, and Firefox 128+; older browsers need Tailwind v3 .

This cheatsheet covers the v4 syntax, the directive-based configuration model, the core utility categories, and the breaking changes that matter when migrating from v3. It assumes familiarity with HTML and basic CSS concepts.

Key point: Tailwind v4 replaces the three @tailwind directives with a single @import "tailwindcss" and moves configuration from tailwind.config.js into CSS via @theme. The content array is gone—Tailwind scans your project automatically, respecting .gitignore.

Installation and Setup

/* v4: single import replaces @tailwind base/components/utilities */
@import "tailwindcss";

Setup	Command/Config	Notes
Vite (recommended)	`@tailwindcss/vite` plugin	Fastest option
PostCSS	`@tailwindcss/postcss`	Standard integration
CLI	`npx @tailwindcss/cli`	Standalone builds

// vite.config.ts — first-party Vite plugin
import tailwindcss from "@tailwindcss/vite";
export default defineConfig({ plugins: [tailwindcss()] });

Automatic content detection means no content array. To include external sources, use @source "../node_modules/ui-lib" .

Core Directives (v4)

Directive	Purpose	Example
`@import "tailwindcss"`	Load all of Tailwind	Required at top
`@theme`	Define design tokens as CSS variables	`--color-brand: oklch(...)`
`@source`	Add files outside auto-detection	`@source "../ui-lib"`
`@utility`	Register custom utility	`@utility tab-4 { tab-size: 4 }`
`@variant`	Apply variant inside CSS	`@variant dark { ... }`
`@custom-variant`	Define new variant	`@custom-variant theme-midnight (...)`
`@apply`	Inline utilities into custom CSS	`@apply rounded-lg shadow`
`@reference`	Import theme without duplicating CSS	Required in Vue/Svelte `<style>`

Layout Utilities

Category	Classes	Example
Display	`block`, `inline`, `flex`, `grid`, `hidden`	`flex items-center`
Flex direction	`flex-row`, `flex-col`	`flex flex-col md:flex-row`
Justify	`justify-start`, `justify-center`, `justify-between`	`flex justify-between`
Align items	`items-start`, `items-center`, `items-stretch`	`flex items-center`
Gap	`gap-4`, `gap-x-2`, `gap-y-6`	`grid gap-6`
Grid columns	`grid-cols-1` to `grid-cols-12`	`grid grid-cols-1 md:grid-cols-3`
Position	`relative`, `absolute`, `fixed`, `sticky`	`absolute inset-0`
Inset	`inset-0`, `top-4`, `inset-s-4` (logical)	`absolute inset-s-4`

Spacing and Sizing

Category	Classes	Notes
Padding	`p-4`, `px-6`, `py-2`, `pt-8`	Spacing scale: `p-4` = `1rem`
Margin	`m-4`, `mx-auto`, `mt-8`, `-mt-2`	Negative values supported
Space between	`space-x-4`, `space-y-2`	Between children
Width	`w-full`, `w-1/2`, `w-64`, `w-screen`	v4 adds `inline-*` for logical width
Height	`h-full`, `h-screen`, `h-32`	`block-*` for logical height
Min/Max	`min-w-0`, `max-w-md`, `max-h-screen`	`max-w-7xl` common container
Size	`size-8`	Shorthand for `w-8 h-8`

Typography

Category	Classes	Example
Font size	`text-sm`, `text-base`, `text-xl`, `text-4xl`	`text-2xl font-bold`
Font weight	`font-light`, `font-normal`, `font-semibold`, `font-bold`	`font-semibold`
Text color	`text-gray-900`, `text-blue-500`, `text-red-600`	`text-muted-foreground`
Text align	`text-left`, `text-center`, `text-right`	`text-center`
Line height	`leading-none`, `leading-tight`, `leading-relaxed`	`leading-relaxed`
Letter spacing	`tracking-tight`, `tracking-wide`	`tracking-wide`
Truncate	`truncate`	Ellipsis overflow

Backgrounds, Borders, and Effects

Category	Classes	Notes
Background	`bg-white`, `bg-gray-100`, `bg-blue-500`	v4 palette uses OKLCH
Border width	`border`, `border-2`, `border-t-4`	v4 border defaults to `currentColor`
Border color	`border-gray-300`, `border-transparent`	Explicit color needed in v4
Border radius	`rounded-sm`, `rounded-md`, `rounded-full`	v4 renamed scales
Shadow	`shadow-sm`, `shadow-md`, `shadow-lg`	v4 renamed scales
Ring	`ring-2`, `ring-blue-500`	Focus rings
Opacity	`opacity-50`, `opacity-100`
Blur	`blur-sm`, `blur-md`	v4 renamed scales

Responsive and Variants

Tailwind is mobile-first: unprefixed classes apply at all widths; prefixed classes apply from the breakpoint up .

Prefix	Min width	CSS
`sm:`	40rem (640px)	`@media (width >= 40rem)`
`md:`	48rem (768px)	`@media (width >= 48rem)`
`lg:`	64rem (1024px)	`@media (width >= 64rem)`
`xl:`	80rem (1280px)	`@media (width >= 80rem)`
`2xl:`	96rem (1536px)	`@media (width >= 96rem)`

State variants: hover:, focus:, active:, disabled:, group-hover:, peer-focus:, dark:, motion-safe:, motion-reduce:.

<button class="bg-blue-500 hover:bg-blue-700 focus:ring-2 focus:ring-blue-300 disabled:opacity-50">

Container queries (v4 core): mark parent with @container, style children with @sm:, @md:, etc. .

Breaking Changes from v3

v3	v4	Notes
`@tailwind base/components/utilities`	`@import "tailwindcss"`	Single import
`tailwind.config.js`	`@theme` in CSS	CSS-first config
`content: [...]`	Automatic detection	Respects `.gitignore`
`shadow-sm`	`shadow-xs`	Renamed scales
`rounded-sm`	`rounded-xs`	Renamed scales
`blur-sm`	`blur-xs`	Renamed scales
`outline-none`	`outline-hidden`	Accessibility distinction
`bg-left-top`	`bg-top-left`	Consistent naming
Default border gray	`currentColor`	Explicit border color needed

Common Pitfalls

Pitfall	Fix
Using v3 `@tailwind` directives	Replace with `@import "tailwindcss"`
Expecting `content` array to work	Delete it; v4 auto-detects
Border color invisible	v4 defaults to `currentColor`; add `border-gray-300`
Old shadow/radius class names	Check v4 rename table
`@apply` in Vue/Svelte `<style>` fails	Add `@reference "../app.css"`
Using `start-`/`end-`	Deprecated; use `inset-s-`/`inset-e-`

Visual: v4 Architecture

┌──────────────────────────────────────────────┐
│  TAILWIND V4 PIPELINE                        │
│                                              │
│  @import "tailwindcss"                       │
│       │                                      │
│       ▼                                      │
│  Oxide engine (Rust)                         │
│       │                                      │
│       ├── Auto content detection             │
│       ├── @theme tokens → CSS variables      │
│       └── Utility generation                 │
│       │                                      │
│       ▼                                      │
│  Static CSS (purged)                         │
│                                              │
│  No tailwind.config.js required.             │
│  Design tokens live in CSS.                  │
│  Builds up to 10x faster.                    │
│                                              │
└──────────────────────────────────────────────┘

Summary

Area	Key Takeaway
Import	`@import "tailwindcss"` (single directive)
Config	`@theme` in CSS; no `tailwind.config.js` needed
Content	Automatic detection; `@source` for external
Breakpoints	Mobile-first: `sm:` 640px, `md:` 768px, `lg:` 1024px
Variants	`hover:`, `focus:`, `dark:`, `group-hover:`, `peer-focus:`
Container queries	`@container` on parent, `@sm:` on children
v4 renames	`shadow-sm`→`shadow-xs`, `rounded-sm`→`rounded-xs`
Border default	`currentColor`; specify explicit color
Custom utility	`@utility name { ... }`
Custom variant	`@custom-variant name (...)`

Tailwind v4 is a CSS-first framework. The @theme directive replaces the JavaScript config, the @utility and @custom-variant directives replace plugin configuration, and the Oxide engine makes builds fast enough that the configuration model change is not the only reason to upgrade. The breaking changes are mostly renames—shadows, radii, blurs, and the border default—and the official upgrade tool (npx @tailwindcss/upgrade) handles most of them automatically . For the full utility list, the official documentation and the community cheat sheet extensions cover 5,500+ utilities across 90+ variants .

Was this helpful?

Stop using slow, ad-bloated tool sites! 🤮

🔎 Search “KandZ Tools” on Google to use many professional utilities for free.

KandZ.me is the ultimate minimalist hub for:
✅ Finance (Mortgage, Interest, Inflation)
✅ Tech (Base64, JSON, Dev Suite, IP)
✅ Health (BMI, BMR, TDEE)
✅ Productivity (Timer, Workspace, QR)

⚡️ Fast & Private
🔒 No data leaves your device
💎 100% Free

🔗 Use it now: https://tools.kandz.me
🔖 Bookmark it—you’ll need it later!