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

// 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

<!-- Flex Direction -->
<div class="flex flex-row">Horizontal</div>
<div class="flex flex-row-reverse">Horizontal Reverse</div>
<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</

<!-- Padding -->
<div class="p-4">Padding semua sisi</div>
<div class="px-4">Padding horizontal</div>
<div class="py-4">Padding vertical</div

<!-- Width -->
<div class="w-auto">Auto</div>
<div class="w-full">100%</div>
<div class="w-screen">100vw</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"

<p class="font-thin">Thin (100)</p>
<p class="font-light">Light (300)</p>
<p class="font-normal">Normal (400)</p>
<p class=

<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 class="text-black">Hitam</p>
<p class="text-white">Putih</p>
<p class="text-gray-500">Abu-abu</p>
<p class="text-red-500"

<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</

<div class="bg-white">Putih</div>
<div class="bg-black">Hitam</div>
<div class="bg-gray-100">Abu terang</div>
<div

<!-- Border Width -->
<div class="border">Border 1px</div>
<div class="border-2">Border 2px</div>
<div class="border-4">Border 4px</

<div class="shadow-sm">Small shadow</div>
<div class="shadow">Default shadow</div>
<div class="shadow-md">Medium shadow</div>
<div class=

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

<button class="transition duration-300">Default transition</button>
<button class="transition-all">Transisi semua property</button>
<button class=

<!-- Scale -->
<div class="scale-50">50%</div>
<div class="scale-100">100%</div>
<div class="scale-150">150%</

<!-- 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 -->
 

<!-- 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=

<!-- 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

<!-- 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

<!-- 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</

<!-- 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>

<!-- 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>
</

/* 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)