Lewati ke konten utama
Versi: Next

Menggunakan Tailwind CSS

Pelajari cara styling dokumentasi Anda menggunakan Tailwind CSS v4 dengan design system kustom kami.

Ringkasan Singkat​

Proyek ini sudah dilengkapi dengan:

  • ✅ Tailwind CSS v4 - Framework CSS utility-first
  • ✅ Custom Design Tokens - Warna, spacing, dan shadow yang konsisten
  • ✅ Auto Dark Mode - Perpindahan tema yang mulus
  • ✅ Responsive Design - Pendekatan mobile-first

Penggunaan Dasar di MDX​

Anda dapat menggunakan kelas Tailwind langsung di file MDX Anda:

<div className="p-6 bg-white dark:bg-primary-gray-950 rounded-lg border border-primary-gray-200 dark:border-primary-gray-800">
  <h3 className="text-xl font-bold text-primary-gray-900 dark:text-white mb-2">
    Judul Card
  </h3>
  <div className="text-primary-gray-600 dark:text-primary-gray-400">
    Ini adalah card dengan dukungan dark mode yang tepat.
  </div>
</div>

Hasil:

Judul Card

Ini adalah card dengan dukungan dark mode yang tepat.

Menggunakan Semantic Utilities​

Cara termudah untuk styling dengan auto dark mode adalah menggunakan semantic utilities dengan prefix d-:

<div className="d-bg-primary d-text-primary border d-border-primary p-6 rounded-lg">
  Konten otomatis menyesuaikan dengan light/dark mode!
</div>

Hasil:

Konten otomatis menyesuaikan dengan light/dark mode!

Mengapa Semantic Utilities?​

  • ✅ Tidak perlu prefix dark: - Auto dark mode
  • ✅ Konsisten - Berdasarkan design system
  • ✅ Mudah dimaintain - Ubah tema secara global

Semantic Color Utilities​

Proyek ini menyertakan comprehensive semantic utilities dari utilities-v4.css. Semua kelas utility menggunakan prefix d- untuk menghindari konflik.

Warna Teks​

Semantic text utilities otomatis menyesuaikan dengan light/dark mode:

<div className="space-y-2 my-4">
  <div className="d-text-primary">Teks primary</div>
  <div className="d-text-secondary">Teks secondary</div>
  <div className="d-text-brand-primary">Teks brand primary</div>
  <div className="d-text-error-primary">Teks error</div>
  <div className="d-text-warning-primary">Teks warning</div>
  <div className="d-text-success-primary">Teks success</div>
</div>

Hasil:

Teks primary
Teks secondary
Teks brand primary
Teks error
Teks warning
Teks success

Warna Background​

<div className="space-y-2 my-4">
  <div className="d-bg-primary d-text-primary p-3 rounded">Background primary</div>
  <div className="d-bg-secondary d-text-primary p-3 rounded">Background secondary</div>
  <div className="d-bg-brand-primary d-text-primary p-3 rounded">Background brand</div>
</div>
Background primary
Background secondary
Background brand

Layout Grid Responsif​

Buat layout responsif yang menyesuaikan dengan berbagai ukuran layar:

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 my-6">
  <div className="p-6 d-bg-secondary d-border-primary border rounded-lg">
    <h4 className="font-semibold d-text-primary mb-2">Fitur 1</h4>
    <div className="text-sm d-text-secondary">
      Mobile: 1 kolom, Tablet: 2 kolom, Desktop: 3 kolom
    </div>
  </div>
  <div className="p-6 d-bg-secondary d-border-primary border rounded-lg">
    <h4 className="font-semibold d-text-primary mb-2">Fitur 2</h4>
    <div className="text-sm d-text-secondary">
      Menggunakan semantic utilities dengan auto dark mode!
    </div>
  </div>
  <div className="p-6 d-bg-secondary d-border-primary border rounded-lg">
    <h4 className="font-semibold d-text-primary mb-2">Fitur 3</h4>
    <div className="text-sm d-text-secondary">Bersih dan mudah dimaintain</div>
  </div>
</div>

Fitur 1

Mobile: 1 kolom, Tablet: 2 kolom, Desktop: 3 kolom

Fitur 2

Menggunakan semantic utilities dengan auto dark mode!

Fitur 3

Bersih dan mudah dimaintain

Alert Boxes​

Buat alert boxes dengan styling menggunakan semantic utilities:

Info Alert​

ℹ️ Info

Ini adalah alert informasi dengan warna semantik.

Success Alert​

✅ Berhasil

Operasi berhasil diselesaikan!

Warning Alert​

⚠️ Peringatan

Harap berhati-hati saat melanjutkan.

Error Alert​

❌ Error

Terjadi kesalahan.

Menggunakan Komponen Kustom​

Import dan gunakan komponen React kustom di MDX Anda:

import ExampleCard from "@site/src/components/global/ExampleCard";

<ExampleCard
  title="Komponen Kustom"
  description="Ini adalah komponen yang dapat digunakan kembali dengan TypeScript dan Tailwind"
  variant="primary"
/>

Komponen Kustom

Ini adalah komponen yang dapat digunakan kembali dengan TypeScript dan Tailwind

Variasi Komponen​

Variasi Default

Bersih dan minimal

Variasi Primary

Warna brand

Variasi Success

Untuk feedback positif

Variasi Warning

Untuk pesan peringatan

Best Practices​

✅ LAKUKAN​

  1. Gunakan semantic utilities (auto dark mode):

    <div className="d-bg-brand-primary d-text-primary p-6 rounded-lg">
      Tidak perlu prefix dark:!
    </div>

  2. Gunakan kelas responsif:

    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">

  3. Gunakan design tokens untuk nilai kustom:

    <div className="p-[var(--spacing-4xl)] rounded-[var(--radius-lg)]">

❌ JANGAN​

  1. Jangan lupa dark mode (jika tidak menggunakan semantic utilities):

    <!-- ❌ BURUK - Akan rusak di dark mode -->
    <div className="bg-white text-gray-900">

  2. Jangan gunakan inline styles:

    <!-- ❌ BURUK - Gunakan Tailwind sebagai gantinya -->
    <div style={{background: 'white'}}>

Menguji Styling Anda​

Sebelum publish, selalu test:

  • ✅ Light mode terlihat bagus
  • ✅ Dark mode terlihat bagus (toggle tema di navbar)
  • ✅ Mobile (375px) - resize browser
  • ✅ Tablet (768px) - resize browser
  • ✅ Desktop (1024px+) - lebar penuh

Selanjutnya?​

Sekarang Anda sudah tahu cara menggunakan Tailwind CSS:

  • ✅ Buat halaman dokumentasi yang indah
  • ✅ Bangun komponen kustom
  • ✅ Pastikan kompatibilitas dark mode
  • ✅ Buat layout responsif

Selamat styling! 🎨