Cara Membuat Website dengan Tailwind CSS: Panduan Pemula Lengkap 2026
Mengapa Tailwind CSS Menjadi Framework CSS Paling Populer di 2026?
Cara membuat website dengan Tailwind CSS telah merevolusi cara developer modern membangun antarmuka web. Berbeda dari Bootstrap yang menyediakan komponen siap pakai, Tailwind CSS mengambil pendekatan utility-first - Anda membangun desain langsung di HTML menggunakan class-class kecil yang masing-masing hanya melakukan satu hal. Tidak ada lagi bolak-balik antara file HTML dan CSS. Tidak ada lagi perang specificity. Semua styling ada tepat di depan mata Anda.
Tailwind CSS kini digunakan oleh GitHub, Shopify, OpenAI, dan ribuan perusahaan teknologi terkemuka.
Popularitasnya meledak karena ia menghilangkan hambatan terbesar dalam menulis CSS: penamaan class.
Dengan Tailwind, tidak ada lagi pusing memikirkan nama class seperti .card-wrapper-inner
atau .section-hero-content-left. Cukup tulis flex items-center gap-4 px-6 py-3
dan selesai.
Keunggulan Tailwind CSS dibanding Framework Lain
- Tidak ada CSS mati - Tailwind secara otomatis menghapus semua class yang tidak dipakai saat build production. Ukuran CSS final bisa sekecil 5–20KB.
- Design system bawaan - Tailwind hadir dengan skala warna, spacing, typography, dan shadow yang konsisten dan sudah dikurasi dengan baik oleh para desainer.
-
Sangat mudah dikustomisasi - Satu file
tailwind.config.jsuntuk mengatur seluruh design system: warna brand, font, breakpoint, dan lainnya. -
Responsivitas yang intuitif - Cukup prefix class dengan breakpoint:
md:flex-row,lg:text-xl,sm:hidden. - Performa luar biasa - CSS yang dihasilkan sangat kecil dan tidak ada JavaScript runtime overhead.
Langkah 1: Cara Instalasi Tailwind CSS
Ada beberapa cara menginstal Tailwind CSS. Berikut dua cara yang paling umum digunakan.
Cara 1: Menggunakan CDN Play (Untuk Eksperimen Cepat)
Cara ini ideal untuk prototyping cepat atau belajar, tapi tidak direkomendasikan untuk production karena tidak ada tree-shaking dan ukuran filenya besar:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Website Tailwind Saya</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-50 font-sans">
<h1 class="text-4xl font-bold text-center text-blue-600 mt-10">
Halo, Tailwind CSS!
</h1>
</body>
</html>Cara 2: Instalasi via npm (Direkomendasikan untuk Project Nyata)
# 1. Inisialisasi project Node.js
npm init -y
# 2. Install Tailwind CSS dan dependensinya
npm install -D tailwindcss postcss autoprefixer
# 3. Buat file konfigurasi Tailwind
npx tailwindcss init -p
Setelah itu, konfigurasi file tailwind.config.js untuk memberi tahu Tailwind
di mana file HTML/JS Anda berada:
// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./*.html",
"./src/**/*.{html,js,ts,jsx,tsx}",
],
theme: {
extend: {
// Kustomisasi design system Anda di sini
colors: {
brand: {
50: '#eff6ff',
100: '#dbeafe',
500: '#3b82f6',
600: '#2563eb',
700: '#1d4ed8',
900: '#1e3a8a',
},
},
fontFamily: {
sans: ['Plus Jakarta Sans', 'sans-serif'],
},
},
},
plugins: [],
};
Buat file src/input.css dengan directive Tailwind:
/* src/input.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
Tambahkan script ke package.json dan jalankan Tailwind dalam mode watch:
// package.json - tambahkan ke bagian "scripts"
{
"scripts": {
"dev": "npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch",
"build": "npx tailwindcss -i ./src/input.css -o ./dist/output.css --minify"
}
}
# Jalankan development server
npm run dev
Link file CSS output di HTML Anda: <link rel="stylesheet" href="dist/output.css">
Langkah 2: Memahami Utility Classes Tailwind yang Paling Penting
Tailwind memiliki ratusan utility class. Berikut kategori-kategori yang paling sering Anda gunakan:
Layout dan Spacing
<!-- Container dengan padding -->
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<!-- Konten di sini -->
</div>
<!-- Flexbox -->
<div class="flex items-center justify-between gap-4">
<span>Kiri</span>
<span>Kanan</span>
</div>
<!-- Grid -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<div>Kolom 1</div>
<div>Kolom 2</div>
<div>Kolom 3</div>
</div>
<!-- Padding dan margin -->
<div class="p-4">Padding 16px semua sisi</div>
<div class="px-6 py-3">Padding horizontal 24px, vertikal 12px</div>
<div class="mt-4 mb-8">Margin top 16px, bottom 32px</div>Typography
<h1 class="text-4xl md:text-5xl lg:text-6xl font-bold tracking-tight">
Judul Besar
</h1>
<p class="text-lg text-gray-600 leading-relaxed max-w-2xl">
Paragraf dengan ukuran sedang, warna abu-abu, dan line height yang nyaman dibaca.
</p>
<span class="text-sm font-semibold text-blue-600 uppercase tracking-wider">
Label Kategori
</span>Warna dan Background
<!-- Background -->
<div class="bg-white">Putih</div>
<div class="bg-gray-50">Abu-abu sangat terang</div>
<div class="bg-blue-600">Biru</div>
<div class="bg-gradient-to-r from-blue-600 to-purple-600">Gradient</div>
<!-- Teks -->
<p class="text-gray-900">Hitam gelap</p>
<p class="text-gray-600">Abu-abu medium</p>
<p class="text-blue-600">Biru</p>Border dan Shadow
<!-- Border -->
<div class="border border-gray-200 rounded-xl">
Card dengan border tipis dan sudut membulat
</div>
<!-- Shadow -->
<div class="shadow-sm">Bayangan kecil</div>
<div class="shadow-md">Bayangan medium</div>
<div class="shadow-lg">Bayangan besar</div>
<div class="shadow-2xl">Bayangan sangat besar</div>Langkah 3: Membangun Navbar Responsif dengan Tailwind
Tailwind tidak menyediakan komponen interaktif seperti Bootstrap. Untuk hamburger menu yang bisa di-toggle, Anda perlu sedikit JavaScript. Berikut navbar lengkap dengan mobile toggle:
<nav class="bg-white border-b border-gray-200 sticky top-0 z-50">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center justify-between h-16">
<!-- Logo -->
<a href="/" class="text-xl font-extrabold text-gray-900 tracking-tight">
<span class="text-blue-600">Brand</span>Name
</a>
<!-- Desktop Menu -->
<ul class="hidden md:flex items-center gap-8">
<li><a href="#beranda" class="text-gray-600 hover:text-blue-600 font-medium transition-colors">Beranda</a></li>
<li><a href="#layanan" class="text-gray-600 hover:text-blue-600 font-medium transition-colors">Layanan</a></li>
<li><a href="#portofolio" class="text-gray-600 hover:text-blue-600 font-medium transition-colors">Portofolio</a></li>
<li><a href="#kontak" class="text-gray-600 hover:text-blue-600 font-medium transition-colors">Kontak</a></li>
</ul>
<!-- CTA Desktop -->
<a href="#kontak"
class="hidden md:inline-flex items-center px-5 py-2 bg-blue-600 text-white
text-sm font-semibold rounded-lg hover:bg-blue-700 transition-colors">
Mulai Sekarang
</a>
<!-- Hamburger Button -->
<button id="mobileMenuBtn"
class="md:hidden p-2 rounded-lg text-gray-600 hover:bg-gray-100 transition-colors"
aria-label="Buka menu">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M4 6h16M4 12h16M4 18h16"/>
</svg>
</button>
</div>
</div>
<!-- Mobile Menu -->
<div id="mobileMenu" class="hidden md:hidden border-t border-gray-200 bg-white">
<div class="px-4 py-4 space-y-3">
<a href="#beranda" class="block text-gray-700 font-medium py-2">Beranda</a>
<a href="#layanan" class="block text-gray-700 font-medium py-2">Layanan</a>
<a href="#portofolio" class="block text-gray-700 font-medium py-2">Portofolio</a>
<a href="#kontak" class="block text-gray-700 font-medium py-2">Kontak</a>
<a href="#kontak"
class="block w-full text-center px-5 py-3 bg-blue-600 text-white
font-semibold rounded-lg mt-4">
Mulai Sekarang
</a>
</div>
</div>
</nav>
<script>
const btn = document.getElementById('mobileMenuBtn');
const menu = document.getElementById('mobileMenu');
btn.addEventListener('click', () => menu.classList.toggle('hidden'));
</script>Langkah 4: Membuat Hero Section Modern dengan Tailwind
<section id="beranda" class="bg-gradient-to-br from-slate-900 via-blue-950 to-slate-900 text-white">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-24 lg:py-32">
<div class="max-w-3xl">
<span class="inline-flex items-center gap-2 px-4 py-1.5 bg-blue-500/20 border border-blue-500/30
text-blue-300 text-sm font-semibold rounded-full mb-6">
Terpercaya sejak 2015
</span>
<h1 class="text-5xl lg:text-6xl font-extrabold tracking-tight leading-tight mb-6">
Website Profesional untuk
<span class="text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-cyan-400">
Bisnis Anda
</span>
</h1>
<p class="text-xl text-slate-300 leading-relaxed mb-10 max-w-2xl">
Kami membangun website yang tidak hanya indah secara visual, tapi juga
cepat, aman, dan dioptimalkan untuk mesin pencari.
</p>
<div class="flex flex-col sm:flex-row gap-4">
<a href="#kontak"
class="inline-flex items-center justify-center px-8 py-4 bg-blue-600
text-white font-bold rounded-xl hover:bg-blue-500 transition-all
hover:shadow-lg hover:shadow-blue-500/25 hover:-translate-y-0.5">
Konsultasi Gratis
</a>
<a href="#portofolio"
class="inline-flex items-center justify-center px-8 py-4 border border-slate-600
text-white font-bold rounded-xl hover:bg-slate-800 transition-colors">
Lihat Portofolio
</a>
</div>
<!-- Statistik -->
<div class="grid grid-cols-3 gap-8 mt-16 pt-8 border-t border-slate-800">
<div>
<div class="text-3xl font-bold text-white">500+</div>
<div class="text-slate-400 text-sm mt-1">Website Terbangun</div>
</div>
<div>
<div class="text-3xl font-bold text-white">8 Thn</div>
<div class="text-slate-400 text-sm mt-1">Pengalaman</div>
</div>
<div>
<div class="text-3xl font-bold text-white">98%</div>
<div class="text-slate-400 text-sm mt-1">Klien Puas</div>
</div>
</div>
</div>
</div>
</section>
Langkah 5: Membuat Card Grid Layanan dengan Tailwind
<section id="layanan" class="py-24 bg-gray-50">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-16">
<h2 class="text-3xl lg:text-4xl font-bold text-gray-900 mb-4">
Layanan Kami
</h2>
<p class="text-lg text-gray-600 max-w-2xl mx-auto">
Solusi lengkap untuk membangun dan mengembangkan kehadiran digital bisnis Anda
</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Card 1 -->
<div class="bg-white border border-gray-200 rounded-2xl p-8
hover:shadow-xl hover:-translate-y-1 transition-all duration-300 group">
<div class="w-14 h-14 bg-blue-50 rounded-xl flex items-center justify-center mb-6
group-hover:bg-blue-600 transition-colors">
<svg class="w-7 h-7 text-blue-600 group-hover:text-white transition-colors"
fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5
a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
</svg>
</div>
<h3 class="text-xl font-bold text-gray-900 mb-3">Pembuatan Website</h3>
<p class="text-gray-600 leading-relaxed">
Website profesional responsif yang dioptimalkan untuk SEO, performa, dan
konversi pengunjung menjadi pelanggan.
</p>
<a href="#kontak"
class="inline-flex items-center gap-2 mt-6 text-blue-600 font-semibold
hover:gap-3 transition-all">
Pelajari lebih lanjut
<span aria-hidden="true">→</span>
</a>
</div>
<!-- Card 2 (Featured) -->
<div class="bg-blue-600 border-0 rounded-2xl p-8
hover:shadow-2xl hover:-translate-y-1 transition-all duration-300">
<div class="w-14 h-14 bg-white/20 rounded-xl flex items-center justify-content-center mb-6">
<span class="text-white font-bold text-xl ml-auto mr-auto">SEO</span>
</div>
<h3 class="text-xl font-bold text-white mb-3">Optimasi SEO</h3>
<p class="text-blue-100 leading-relaxed">
Strategi SEO berbasis data untuk meningkatkan peringkat Google dan mendatangkan
traffic organik berkualitas tinggi.
</p>
<a href="#kontak"
class="inline-flex items-center gap-2 mt-6 text-white font-semibold hover:gap-3 transition-all">
Pelajari lebih lanjut
<span aria-hidden="true">→</span>
</a>
</div>
<!-- Card 3 -->
<div class="bg-white border border-gray-200 rounded-2xl p-8
hover:shadow-xl hover:-translate-y-1 transition-all duration-300 group">
<div class="w-14 h-14 bg-green-50 rounded-xl flex items-center justify-content mb-6
group-hover:bg-green-600 transition-colors">
<span class="text-green-600 group-hover:text-white font-bold text-lg mx-auto">+%</span>
</div>
<h3 class="text-xl font-bold text-gray-900 mb-3">Digital Marketing</h3>
<p class="text-gray-600 leading-relaxed">
Kampanye pemasaran digital yang terukur dan berorientasi hasil - dari media sosial
hingga Google Ads.
</p>
<a href="#kontak"
class="inline-flex items-center gap-2 mt-6 text-green-600 font-semibold
hover:gap-3 transition-all">
Pelajari lebih lanjut
<span aria-hidden="true">→</span>
</a>
</div>
</div>
</div>
</section>Langkah 6: Kustomisasi Design System di tailwind.config.js
Salah satu kekuatan terbesar Tailwind adalah kemudahannya dikustomisasi. Di tailwind.config.js,
Anda bisa mengatur seluruh design system proyek secara terpusat:
// tailwind.config.js - kustomisasi penuh
module.exports = {
content: ["./*.html", "./src/**/*.{html,js,ts,jsx,tsx}"],
theme: {
extend: {
// Warna brand kustom
colors: {
brand: {
50: '#fefce8',
100: '#fef9c3',
400: '#facc15',
500: '#eab308',
600: '#ca8a04',
900: '#713f12',
},
accent: '#6c3bff',
},
// Font kustom
fontFamily: {
sans: ['DM Sans', 'system-ui', 'sans-serif'],
display: ['Cal Sans', 'DM Sans', 'sans-serif'],
},
// Ukuran font kustom
fontSize: {
'display-sm': ['2.5rem', { lineHeight: '1.1', fontWeight: '800' }],
'display-md': ['3.5rem', { lineHeight: '1.05', fontWeight: '800' }],
'display-lg': ['4.5rem', { lineHeight: '1', fontWeight: '900' }],
},
// Shadow kustom
boxShadow: {
'brand': '0 4px 24px rgba(108, 59, 255, 0.25)',
'card': '0 1px 3px rgba(0,0,0,0.08), 0 4px 16px rgba(0,0,0,0.06)',
'card-hover': '0 4px 12px rgba(0,0,0,0.1), 0 16px 48px rgba(0,0,0,0.1)',
},
// Animasi kustom
animation: {
'fade-up': 'fadeUp 0.5s ease-out',
'slide-in': 'slideIn 0.3s ease-out',
},
keyframes: {
fadeUp: {
'0%': { opacity: '0', transform: 'translateY(16px)' },
'100%': { opacity: '1', transform: 'translateY(0)' },
},
slideIn: {
'0%': { transform: 'translateX(-100%)' },
'100%': { transform: 'translateX(0)' },
},
},
},
},
plugins: [],
};Langkah 7: Memahami Responsivitas di Tailwind
Tailwind menggunakan pendekatan mobile-first: class tanpa prefix berlaku untuk semua ukuran layar, prefix breakpoint berlaku untuk ukuran layar tersebut ke atas.
<!-- Teks: kecil di mobile, besar di desktop -->
<h1 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-bold">
Judul Responsif
</h1>
<!-- Layout: 1 kolom di mobile, 2 di tablet, 4 di desktop -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
<!-- Tampilkan/sembunyikan berdasarkan breakpoint -->
<div class="block md:hidden">Hanya muncul di mobile</div>
<div class="hidden md:block">Hanya muncul di tablet ke atas</div>
<!-- Padding responsif -->
<section class="px-4 sm:px-6 lg:px-8 py-12 sm:py-16 lg:py-24">
<!-- Konten -->
</section>Langkah 8: Tips Praktis dan Best Practices Tailwind CSS
-
Gunakan @apply untuk class yang diulang - Jika Anda menggunakan kombinasi class yang sama
berkali-kali (misalnya untuk tombol), buat component class di CSS:
/* Di input.css */ @layer components { .btn-primary { @apply inline-flex items-center px-6 py-3 bg-blue-600 text-white font-semibold rounded-lg hover:bg-blue-700 transition-colors focus:ring-2 focus:ring-blue-500 focus:ring-offset-2; } .card { @apply bg-white border border-gray-200 rounded-2xl p-6 shadow-card hover:shadow-card-hover transition-shadow; } } - Install ekstensi Tailwind CSS IntelliSense di VS Code - Autocomplete class Tailwind, preview warna, dan warning untuk class yang tidak valid. Sangat meningkatkan produktivitas.
- Gunakan Tailwind UI atau Headless UI untuk komponen kompleks - Untuk komponen interaktif yang sudah jadi (dropdown, dialog, combobox), gunakan Headless UI - library komponen tanpa styling yang dirancang khusus untuk dipakai dengan Tailwind.
-
Jangan khawatir dengan "banyaknya class" - Ini memang cara Tailwind bekerja.
Dengan tools seperti Prettier + plugin
prettier-plugin-tailwindcss, class akan diurutkan secara otomatis sehingga tetap konsisten dan mudah dibaca.
Kesimpulan
Cara membuat website dengan Tailwind CSS memberikan kebebasan desain yang tidak tertandingi dibandingkan
framework CSS lainnya. Dengan pendekatan utility-first, Anda mendapatkan kontrol penuh atas setiap aspek
tampilan tanpa pernah meninggalkan HTML. Hasilnya adalah website yang unik, cepat, dan mudah di-maintain.
Mulailah dengan CDN Play untuk eksperimen, beralih ke instalasi npm untuk project serius, dan manfaatkan
kustomisasi tailwind.config.js untuk membangun design system yang konsisten.
Setelah website Tailwind CSS Anda siap, pastikan di-hosting dengan infrastruktur yang handal. HostingEkspres menyediakan layanan hosting Indonesia yang cepat dengan uptime tinggi dan support responsif - cocok untuk website modern berbasis Tailwind maupun framework apapun.
Baca Juga:
FAQ - Pertanyaan Umum tentang Tailwind CSS
Apa itu Tailwind CSS dan apa bedanya dengan Bootstrap?
Tailwind CSS adalah framework CSS utility-first - Anda mendesain langsung di HTML menggunakan class-class kecil yang masing-masing hanya melakukan satu hal. Bootstrap sebaliknya menyediakan komponen siap pakai yang sudah punya tampilan tertentu. Tailwind lebih fleksibel dan menghasilkan desain yang lebih unik, Bootstrap lebih cepat untuk pemula yang ingin hasil jadi dengan cepat.
Apakah Tailwind CSS gratis?
Ya, Tailwind CSS core sepenuhnya gratis dan open-source di bawah lisensi MIT. Tailwind UI (koleksi komponen berbayar) adalah produk terpisah - penggunaan framework inti Tailwind CSS tidak memerlukan lisensi berbayar.
Apakah website Tailwind CSS akan lambat karena banyak class di HTML?
Tidak. Banyaknya class di HTML tidak memengaruhi performa rendering secara signifikan. Dengan fitur tree-shaking, semua class yang tidak digunakan dihapus otomatis saat build production. File CSS final biasanya hanya 5–20KB, jauh lebih kecil dari Bootstrap (146KB+).
Apakah Tailwind CSS cocok digunakan dengan React, Next.js, atau Vue?
Sangat cocok. Tailwind justru paling populer digunakan bersama framework JavaScript modern seperti Next.js,
React, Vue, dan Svelte. Next.js bahkan menyediakan opsi instalasi Tailwind CSS secara built-in saat membuat
project baru dengan npx create-next-app.
Bagaimana cara mengatasi class Tailwind yang terlalu panjang?
Beberapa solusi: (1) Gunakan @apply directive di CSS untuk mengelompokkan class yang sering
diulang. (2) Install prettier-plugin-tailwindcss untuk mengurutkan class secara otomatis.
(3) Di React/Vue, pisahkan class ke dalam variabel atau konstanta.
Berapa lama waktu untuk menguasai Tailwind CSS?
Jika sudah memiliki dasar HTML dan CSS, Anda bisa produktif dengan Tailwind dalam 1–3 hari. Memahami semua utility class dan pola desain umum membutuhkan sekitar 1–2 minggu. Tailwind memiliki dokumentasi yang sangat baik dan mudah dicari.
Apakah ada alternatif Tailwind CSS yang lebih mudah?
Jika Tailwind terasa terlalu verbose di awal, Anda bisa mencoba: Bootstrap 5 untuk komponen siap pakai, Bulma untuk framework berbasis Flexbox yang simpel, atau DaisyUI - plugin komponen di atas Tailwind CSS yang memberi kemudahan komponen Bootstrap dengan fleksibilitas Tailwind.
Artikel Terkait
Tailwind CSS vs Bootstrap: Perbandingan Framework CSS Terbaik 2026
Perbandingan mendalam Tailwind CSS vs Bootstrap untuk memilih framework CSS terbaik. Analisis lengkap dari sisi filosofi, ukuran file, kustomisasi, kurva belajar, dan kasus penggunaan ideal masing-masing.
Baca Selengkapnya →Cara Membuat Layout Website dengan CSS Grid dan Flexbox: Panduan Lengkap 2026
Panduan lengkap cara membuat layout website dengan CSS Grid dan Flexbox. Pelajari perbedaan keduanya, kapan menggunakannya, dan teknik-teknik layout modern untuk website responsif.
Baca Selengkapnya →Cara Membuat Website dengan HTML & CSS: Panduan Pemula Lengkap
Pelajari cara membuat website dengan HTML dan CSS dari nol. Panduan pemula lengkap dengan contoh kode nyata, mulai dari struktur dasar HTML hingga styling dengan CSS modern.
Baca Selengkapnya →Butuh Hosting untuk Website Anda?
Dapatkan hosting cepat, aman, dan terpercaya dengan harga terjangkau. Gratis domain, SSL, dan support 24/7.
Jangan Ketinggalan Promo!
Subscribe newsletter kami dan dapatkan diskon hingga 50% untuk pembelian pertama kamu.
Gratis, tanpa spam. Bisa unsubscribe kapan saja.