Menyiapkan Lingkungan Pengembangan

Kenapa ini penting

Alat yang tersetel dengan baik membuat belajar jauh lebih menyenangkan. Dengan autocomplete, kamu tidak perlu menghafal ratusan nama class. Dengan pengurut class otomatis, kode tim selalu konsisten. Dengan dev server yang cepat, perubahan langsung terlihat di browser dalam hitungan milidetik.

Di modul ini kita menyiapkan dua jalur: Play CDN untuk coba-coba cepat di satu file HTML, dan Vite + Tailwind v4 untuk proyek sungguhan. Versi yang kami verifikasi lewat npm view saat menulis materi ini:

Angka versi akan terus naik. Biasakan mengecek sendiri dengan npm view <nama-paket> version sebelum memulai proyek baru.

Konsep inti

Jalur 1: Play CDN

Play CDN adalah satu tag <script> yang membaca class di halamanmu lalu membuat CSS-nya langsung di browser. Cocok untuk eksperimen, demo, atau latihan. Tidak untuk produksi, karena CSS dibuat di browser pengunjung (lebih lambat) dan bergantung pada CDN pihak ketiga. Di v4, Play CDN memakai paket @tailwindcss/browser@4. Kamu bahkan bisa menulis @theme di dalam <style type="text/tailwindcss">.

Jalur 2: Vite + plugin @tailwindcss/vite

Vite adalah build tool dan dev server modern. Analoginya: Vite itu dapur restoran yang menyiapkan bahan (file JS/CSS) secepat kilat saat kamu memasak (development), lalu mengemasnya rapi saat diantar ke pelanggan (build produksi). Tailwind v4 punya plugin resmi untuk Vite, @tailwindcss/vite, yang lebih cepat dan lebih sederhana daripada lewat PostCSS.

Langkahnya:

1. Buat proyek Vite: npm create vite@latest.
2. Pasang tailwindcss dan @tailwindcss/vite.
3. Tambahkan plugin di vite.config.js.
4. Di file CSS utama, tulis satu baris: @import "tailwindcss";.

Tidak ada tailwind.config.js, tidak ada content: [...]. Di v4, Tailwind otomatis mendeteksi file sumbermu (kecuali yang diabaikan .gitignore).

Perbandingan dengan v3

Ekstensi Tailwind CSS IntelliSense

Di VS Code, pasang ekstensi resmi Tailwind CSS IntelliSense (dari Tailwind Labs). Fiturnya: autocomplete nama class, preview CSS saat kursor diarahkan ke class, kotak warna kecil di samping class warna, dan peringatan untuk class yang saling bertabrakan (misalnya p-2 p-4). Ekstensi ini membaca file CSS yang berisi @import "tailwindcss" untuk mengetahui tema kustommu.

Tips: agar autocomplete juga muncul di dalam string biasa (misalnya di file .js), kamu bisa mengatur "files.associations": { "*.css": "tailwindcss" } di settings VS Code supaya directive seperti @theme tidak ditandai error.

Prettier plugin untuk mengurutkan class

prettier-plugin-tailwindcss mengurutkan class secara otomatis sesuai urutan yang direkomendasikan Tailwind (layout dulu, lalu spacing, tipografi, warna, dan variant di belakang). Ini menghilangkan debat "class mana duluan" di code review. Untuk v4, kamu wajib memberi tahu plugin di mana file CSS utamamu lewat opsi tailwindStylesheet.

Contoh kode

Play CDN untuk coba cepat:

<!doctype html>
<html lang="id">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- Play CDN Tailwind v4: hanya untuk eksperimen, bukan produksi -->
    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
    <!-- Kita bisa langsung menambah token tema di sini -->
    <style type="text/tailwindcss">
      @theme {
        --color-kopi: #6f4e37;
      }
    </style>
  </head>
  <body class="grid min-h-screen place-items-center bg-amber-50">
    <h1 class="text-4xl font-bold text-kopi">Halo, Tailwind v4!</h1>
    <!-- → judul besar berwarna cokelat kopi di tengah layar -->
  </body>
</html>

Proyek Vite + Tailwind v4:

# 1. Buat proyek Vite (pilih template vanilla atau react)
npm create vite@latest belajar-tailwind -- --template vanilla
cd belajar-tailwind

# 2. Pasang Tailwind v4 dan plugin Vite-nya
npm install tailwindcss @tailwindcss/vite

# 3. Pasang Prettier dan plugin pengurut class (dev dependency)
npm install -D prettier prettier-plugin-tailwindcss

# 4. Cek versi yang terpasang
npm ls tailwindcss
# → belajar-tailwind@0.0.0
# → └── tailwindcss@4.3.3

// vite.config.js
import { defineConfig } from "vite";
import tailwindcss from "@tailwindcss/vite";

export default defineConfig({
  plugins: [
    tailwindcss(), // plugin resmi Tailwind v4
  ],
});

/* src/style.css, satu baris ini sudah memuat preflight, theme, dan utilities */
@import "tailwindcss";

// prettier.config.js
/** @type {import('prettier').Config & import('prettier-plugin-tailwindcss').PluginOptions} */
export default {
  plugins: ["prettier-plugin-tailwindcss"],
  // Wajib di v4: path file CSS yang berisi @import "tailwindcss"
  tailwindStylesheet: "./src/style.css",
};

<!-- index.html: pastikan style.css di-import dari main.js, lalu coba -->
<div class="text-white p-4 bg-blue-600 rounded-lg">Siap!</div>
<!-- Setelah menjalankan `npx prettier --write index.html` → -->
<div class="rounded-lg bg-blue-600 p-4 text-white">Siap!</div>

Jalankan npm run dev, buka alamat yang tampil di terminal (biasanya http://localhost:5173), dan ubah class apa pun. Browser langsung memperbarui tampilan.

Kesalahan umum

1. Memakai Play CDN di produksi. Ia membuat CSS di browser pengunjung dan tidak dioptimasi. Untuk situs sungguhan, pakai Vite (atau framework seperti Next.js).
2. Menulis @tailwind base; di v4. Directive itu milik v3. Di v4 cukup @import "tailwindcss";.
3. Membuat tailwind.config.js karena tutorial lama. v4 tidak membacanya secara default. Kustomisasi dilakukan di CSS dengan @theme.
4. Lupa tailwindStylesheet di Prettier. Tanpa opsi ini, plugin tidak tahu class kustommu dan urutannya bisa kacau.
5. CSS tidak di-import. Pastikan main.js berisi import "./style.css";, kalau tidak, tidak ada style sama sekali.

Latihan

1. Mudah, Buat file HTML dengan Play CDN yang menampilkan teks "Belajar Tailwind" berukuran text-3xl berwarna text-emerald-600.
2. Sedang, Buat proyek Vite baru, pasang Tailwind v4, dan tampilkan tombol biru di index.html. Tulis isi vite.config.js dan style.css-nya.
3. Menantang, Tambahkan Prettier plugin, lalu tuliskan perintah untuk memformat semua file HTML dan JS di proyek. Jelaskan apa yang terjadi pada urutan class hover:bg-blue-700 text-white px-4 bg-blue-600.

<!doctype html>
<html lang="id">
  <head>
    <meta charset="UTF-8" />
    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
  </head>
  <body class="p-8">
    <p class="text-3xl text-emerald-600">Belajar Tailwind</p>
  </body>
</html>

// vite.config.js
import { defineConfig } from "vite";
import tailwindcss from "@tailwindcss/vite";
export default defineConfig({ plugins: [tailwindcss()] });

/* src/style.css */
@import "tailwindcss";

<button class="rounded-md bg-blue-600 px-4 py-2 text-white">Klik</button>

npx prettier --write "**/*.{html,js}"
# class "hover:bg-blue-700 text-white px-4 bg-blue-600"
# → menjadi "bg-blue-600 px-4 text-white hover:bg-blue-700"
# (utility biasa diurutkan dulu, variant hover: dipindah ke belakang)

Ringkasan

• Play CDN (@tailwindcss/browser@4) untuk eksperimen cepat, bukan produksi.
• Proyek sungguhan: Vite + tailwindcss + @tailwindcss/vite, lalu @import "tailwindcss"; di CSS.
• v4 tidak butuh tailwind.config.js; deteksi file sumber otomatis.
• Ekstensi Tailwind CSS IntelliSense memberi autocomplete, preview, dan peringatan konflik.
• prettier-plugin-tailwindcss mengurutkan class; di v4 isi opsi tailwindStylesheet.