Tailwind CSS 4 Cheat Sheet

# Install Tailwind CSS v4
npm install tailwindcss @tailwindcss/postcss
 
# Atau pake pnpm
pnpm add tailwindcss @tailwindcss/postcss
 
# Atau pake yarn
yarn add tailwindcss @tailwindcss/postcss

// postcss.config.js
export default {
 plugins: {
  '@tailwindcss/postcss': {}
 }
}

/* styles.css */
@import "tailwindcss";
 
/* Custom styles kamu di sini */

/* Konfigurasi di CSS langsung, gak pake tailwind.config.js lagi */
@theme {
 --color-primary: #3b82f6;
 --color-secondary: #8b5cf6;
 --font-display: 'Inter', sans-serif;
 --spacing-128: 32rem;
}

<!-- Container -->
<div class="container mx-auto">Content</div>
 
<!-- Display -->
<div class="block">Block</div>
<div class="inline-block">Inline Block</div>
<div class="inline">Inline</div>
<div class="flex">Flex</div>
<div class="inline-flex">Inline Flex</div>
<div class="grid">Grid</div>
<div class="hidden">Hidden</div>
 
<!-- Position -->
<div class="static">Static</div>
<div class="fixed">Fixed</div>
<div class="absolute">Absolute</div>
<div class="relative">Relative</div>
<div class="sticky">Sticky</div>
 
<!-- Overflow -->
<div class="overflow-auto">Auto</div>
<div class="overflow-hidden">Hidden</div>
<div class="overflow-scroll">Scroll</div>

<!-- Flex Direction -->
<div class="flex flex-row">Horizontal</div>
<div class="flex flex-row-reverse">Horizontal Reverse</div>
<div class="flex flex-col">Vertical</div>
<div class="flex flex-col-reverse">Vertical Reverse</div>
 
<!-- Justify Content -->
<div class="flex justify-start">Start</div>
<div class="flex justify-center">Center</div>
<div class="flex justify-end">End</div>
<div class="flex justify-between">Between</div>
<div class="flex justify-around">Around</div>
 
<!-- Align Items -->
<div class="flex items-start">Start</div>
<div class="flex items-center">Center</div>
<div class="flex items-end">End</div>
<div class="flex items-stretch">Stretch</div>
 
<!-- Gap -->
<div class="flex gap-4">Gap 1rem</div>
<div class="flex gap-x-4">Gap horizontal</div>
<div class="flex gap-y-4">Gap vertical</div>

<!-- Grid Columns -->
<div class="grid grid-cols-1">1 kolom</div>
<div class="grid grid-cols-2">2 kolom</div>
<div class="grid grid-cols-3">3 kolom</div>
<div class="grid grid-cols-12">12 kolom</div>
 
<!-- Grid Rows -->
<div class="grid grid-rows-1">1 baris</div>
<div class="grid grid-rows-2">2 baris</div>
<div class="grid grid-rows-3">3 baris</div>
 
<!-- Gap -->
<div class="grid gap-4">Gap 1rem</div>
<div class="grid gap-x-4 gap-y-8">Gap berbeda</div>
 
<!-- Span -->
<div class="col-span-2">Span 2 kolom</div>
<div class="row-span-3">Span 3 baris</div>

<!-- Padding -->
<div class="p-4">Padding semua sisi</div>
<div class="px-4">Padding horizontal</div>
<div class="py-4">Padding vertical</div>
<div class="pt-4">Padding atas</div>
<div class="pr-4">Padding kanan</div>
<div class="pb-4">Padding bawah</div>
<div class="pl-4">Padding kiri</div>
 
<!-- Margin -->
<div class="m-4">Margin semua sisi</div>
<div class="mx-auto">Margin horizontal auto (center)</div>
<div class="my-4">Margin vertical</div>
<div class="mt-4">Margin atas</div>
<div class="-mt-4">Margin negatif atas</div>

<!-- Width -->
<div class="w-auto">Auto</div>
<div class="w-full">100%</div>
<div class="w-screen">100vw</div>
<div class="w-1/2">50%</div>
<div class="w-1/3">33.333%</div>
<div class="w-64">16rem</div>
 
<!-- Height -->
<div class="h-auto">Auto</div>
<div class="h-full">100%</div>
<div class="h-screen">100vh</div>
<div class="h-64">16rem</div>
 
<!-- Min/Max Width -->
<div class="min-w-0">Min width 0</div>
<div class="max-w-md">Max width medium</div>
<div class="max-w-5xl">Max width 5xl</div>

<p class="font-sans">Sans serif</p>
<p class="font-serif">Serif</p>
<p class="font-mono">Monospace</p>

<p class="text-xs">Extra small</p>
<p class="text-sm">Small</p>
<p class="text-base">Base</p>
<p class="text-lg">Large</p>
<p class="text-xl">Extra large</p>
<p class="text-2xl">2X large</p>
<p class="text-3xl">3X large</p>
<p class="text-4xl">4X large</p>

<p class="font-thin">Thin (100)</p>
<p class="font-light">Light (300)</p>
<p class="font-normal">Normal (400)</p>
<p class="font-medium">Medium (500)</p>
<p class="font-semibold">Semibold (600)</p>
<p class="font-bold">Bold (700)</p>
<p class="font-black">Black (900)</p>

<p class="text-left">Rata kiri</p>
<p class="text-center">Center</p>
<p class="text-right">Rata kanan</p>
<p class="text-justify">Justify</p>

<p class="text-black">Hitam</p>
<p class="text-white">Putih</p>
<p class="text-gray-500">Abu-abu</p>
<p class="text-red-500">Merah</p>
<p class="text-blue-500">Biru</p>
<p class="text-green-500">Hijau</p>

<p class="leading-none">1</p>
<p class="leading-tight">1.25</p>
<p class="leading-normal">1.5</p>
<p class="leading-relaxed">1.625</p>
<p class="leading-loose">2</p>

<div class="bg-white">Putih</div>
<div class="bg-black">Hitam</div>
<div class="bg-gray-100">Abu terang</div>
<div class="bg-gray-900">Abu gelap</div>
<div class="bg-red-500">Merah</div>
<div class="bg-blue-500">Biru</div>
<div class="bg-green-500">Hijau</div>
 
<!-- Opacity -->
<div class="bg-black/50">Hitam 50% opacity</div>
<div class="bg-blue-500/75">Biru 75% opacity</div>

<!-- Border Width -->
<div class="border">Border 1px</div>
<div class="border-2">Border 2px</div>
<div class="border-4">Border 4px</div>
<div class="border-t">Border atas</div>
<div class="border-r">Border kanan</div>
 
<!-- Border Color -->
<div class="border border-gray-300">Abu-abu</div>
<div class="border border-red-500">Merah</div>
<div class="border border-blue-500">Biru</div>
 
<!-- Border Radius -->
<div class="rounded">0.25rem</div>
<div class="rounded-md">0.375rem</div>
<div class="rounded-lg">0.5rem</div>
<div class="rounded-xl">0.75rem</div>
<div class="rounded-full">9999px (bulat penuh)</div>

<div class="shadow-sm">Small shadow</div>
<div class="shadow">Default shadow</div>
<div class="shadow-md">Medium shadow</div>
<div class="shadow-lg">Large shadow</div>
<div class="shadow-xl">XL shadow</div>
<div class="shadow-2xl">2XL shadow</div>
<div class="shadow-none">No shadow</div>

<div class="opacity-0">0%</div>
<div class="opacity-25">25%</div>
<div class="opacity-50">50%</div>
<div class="opacity-75">75%</div>
<div class="opacity-100">100%</div>

<button class="transition duration-300">Default transition</button>
<button class="transition-all">Transisi semua property</button>
<button class="transition-colors">Transisi warna aja</button>
<button class="transition-opacity">Transisi opacity aja</button>
<button class="transition-transform">Transisi transform aja</button>
 
<!-- Duration -->
<button class="transition duration-150">150ms</button>
<button class="transition duration-300">300ms</button>
<button class="transition duration-500">500ms</button>
 
<!-- Ease -->
<button class="transition ease-linear">Linear</button>
<button class="transition ease-in">Ease in</button>
<button class="transition ease-out">Ease out</button>
<button class="transition ease-in-out">Ease in-out</button>

<!-- Scale -->
<div class="scale-50">50%</div>
<div class="scale-100">100%</div>
<div class="scale-150">150%</div>
 
<!-- Rotate -->
<div class="rotate-45">45°</div>
<div class="rotate-90">90°</div>
<div class="rotate-180">180°</div>
<div class="-rotate-90">-90°</div>
 
<!-- Translate -->
<div class="translate-x-4">Geser kanan</div>
<div class="translate-y-4">Geser bawah</div>
<div class="-translate-x-1/2">Geser kiri 50%</div>
 
<!-- 3D Transform (v4) -->
<div class="rotate-x-45">Rotate X 45°</div>
<div class="rotate-y-90">Rotate Y 90°</div>
<div class="scale-z-150">Scale Z 150%</div>

<!-- Mobile First -->
<div class="w-full md:w-1/2 lg:w-1/3">
 <!-- w-full: default (mobile)
    md:w-1/2: tablet (768px)
    lg:w-1/3: desktop (1024px) -->
</div>
 
<!-- Breakpoints:
   sm: 640px
   md: 768px
   lg: 1024px
   xl: 1280px
   2xl: 1536px -->
 
<!-- Example -->
<div class="text-sm sm:text-base md:text-lg lg:text-xl">
 Responsive text size
</div>

<!-- Hover -->
<button class="bg-blue-500 hover:bg-blue-700">Hover me</button>
<a href="#" class="text-blue-500 hover:text-blue-700 hover:underline">Link</a>
 
<!-- Focus -->
<input class="border focus:border-blue-500 focus:ring" />
<button class="focus:outline-none focus:ring-2">Button</button>
 
<!-- Active -->
<button class="active:bg-blue-800">Click me</button>

<!-- Enable dark mode di config dulu -->
<div class="bg-white dark:bg-gray-900">
 <p class="text-black dark:text-white">Text</p>
</div>

<div class="group">
 <img class="group-hover:opacity-75" />
 <p class="group-hover:text-blue-500">Hover parent</p>
</div>

<input class="disabled:opacity-50 disabled:cursor-not-allowed" disabled />
<input class="required:border-red-500" required />

<!-- Negasi pseudo-class -->
<div class="not-first:mt-4">Semua kecuali first</div>
<div class="not-last:mb-4">Semua kecuali last</div>

<!-- Gak pake plugin lagi di v4! -->
<div class="@container">
 <div class="@lg:text-xl">
  Text jadi xl kalo container lebar
 </div>
</div>

<div class="bg-linear-to-r from-blue-500 to-purple-500">
 Left to right
</div>
 
<!-- Directions:
   to-r: kanan
   to-l: kiri
   to-t: atas
   to-b: bawah
   to-br: bawah kanan
   to-tl: atas kiri -->
 
<!-- Multiple colors -->
<div class="bg-linear-to-r from-red-500 via-yellow-500 to-green-500">
 Rainbow
</div>

<!-- Radial gradient -->
<div class="bg-[radial-gradient(circle,red,blue)]">Radial</div>
 
<!-- Conic gradient -->
<div class="bg-[conic-gradient(red,yellow,green)]">Conic</div>

<!-- Arbitrary values pake [] -->
<div class="w-[137px]">Width 137px</div>
<div class="bg-[#1da1f2]">Custom color</div>
<div class="text-[14px]">Custom font size</div>
<div class="top-[117px]">Custom top</div>
<div class="grid-cols-[200px_1fr_1fr]">Custom grid</div>

<!-- Pake CSS variable -->
<div class="bg-(--my-color)">Custom var</div>
<div class="w-[calc(100%-2rem)]">Calc value</div>

<div class="animate-spin">Spin</div>
<div class="animate-ping">Ping</div>
<div class="animate-pulse">Pulse</div>
<div class="animate-bounce">Bounce</div>

<!-- Entrance animations -->
<dialog class="@starting:opacity-0 @starting:scale-95">
 Smooth entrance
</dialog>

<button class="
 bg-blue-500
 hover:bg-blue-600
 focus:ring-2
 focus:ring-blue-300
 active:bg-blue-700
 disabled:opacity-50
 transition-colors
">
 Button dengan banyak state
</button>

<div class="
 hover:bg-gray-100
 md:hover:bg-gray-200
 lg:hover:bg-gray-300
">
 Hover color beda tiap breakpoint
</div>

<!-- Horizontal center -->
<div class="mx-auto">Center horizontal</div>
 
<!-- Vertical & horizontal center dengan flex -->
<div class="flex items-center justify-center h-screen">
 <div>Centered</div>
</div>
 
<!-- Absolute center -->
<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
 Absolute center
</div>

<!-- Card -->
<div class="bg-white rounded-lg shadow-md p-6">
 <h2 class="text-xl font-bold mb-2">Title</h2>
 <p class="text-gray-600">Description</p>
</div>
 
<!-- Button Primary -->
<button class="
 bg-blue-500
 hover:bg-blue-600
 text-white
 font-semibold
 py-2 px-4
 rounded
 transition-colors
">
 Click me
</button>
 
<!-- Input -->
<input class="
 border
 border-gray-300
 rounded
 px-4 py-2
 focus:outline-none
 focus:border-blue-500
 focus:ring-1
 focus:ring-blue-500
" />

/* Sekarang config di CSS, bukan JS */
@theme {
 /* Custom colors */
 --color-brand: #ff6b6b;
 
 /* Custom spacing */
 --spacing-128: 32rem;
 
 /* Custom fonts */
 --font-heading: 'Poppins', sans-serif;
}
 
/* Langsung bisa dipake */
/* bg-brand, space-128, font-heading */

/* Otomatis available */
var(--color-blue-500)
var(--spacing-4)
var(--font-sans)