Halaman Utama/Pengetahuan./Situs web/Detail konten.

Membangun Situs Web Responsif Modern dengan Tailwind CSS: Dari Pengantar hingga Panduan Praktis.

3 menit baca
2026-03-14
2,570
Saya mendapatkan komisi ketika Anda berbelanja melalui tautan di bawah ini, tanpa biaya tambahan untuk Anda.

Apa itu Tailwind CSS?

Tailwind CSS adalah sebuah framework CSS yang mengutamakan fungsionalitas. Framework ini membantu pengembang membangun antarmuka pengguna (user interface) dengan cepat dengan menyediakan serangkaian kelas praktis yang bersifat dasar dan dapat dikombinasikan satu sama lain. Berbeda dengan framework tradisional seperti Bootstrap atau Foundation yang menyediakan komponen-komponen siap pakai (seperti tombol, kartu, dll.), Tailwind CSS lebih fokus pada penyediaan elemen-elemen dasar yang dapat disesuaikan sesuai kebutuhan pengembang.Tailwind CSS Biarkan Anda “membangun” desain Anda dengan langsung menerapkan kelas-kelas beresolusi tinggi (high-level classes) tersebut ke dalam kode HTML.

Filosofi inti dari pendekatan ini adalah “kepraktisan yang utama”. Artinya, Anda tidak perlu lagi menulis kode CSS khusus untuk setiap elemen, maupun bolak-balik antara file HTML dan CSS. Sebagai contoh, untuk membuat sebuah tombol dengan padding, latar belakang berwarna biru, dan teks berwarna putih, Anda cukup menulis kode berikut:

<button class="px-4 py-2 bg-blue-500 text-white rounded-lg">
  点击我
</button>

Dalam contoh ini,px-4 和 py-2 Masing-masing telah diatur padding (jarak antar elemen) pada arah horizontal dan vertikal.bg-blue-500 Warna latar belakang telah diatur.text-white Warna teks telah diatur.rounded-lg Tambahan sudut bulat besar (rounded corners) telah meningkatkan kecepatan pengembangan dan kemudahan pemeliharaan secara signifikan. Hal ini disebabkan oleh integrasi yang erat antara gaya tampilan (style) dengan struktur HTML, serta nama kelas (class names) yang bersifat sangat jelas dan mudah dipahami.

推荐阅读 Menguasai konsep-konsep inti Tailwind CSS: Dari kelas-kelas praktis hingga penerapan desain responsif dalam praktik sehari-hari。

Bagaimana cara memulai menggunakan Tailwind CSS?

Mulai gunakan. Tailwind CSS Ada berbagai cara untuk melakukannya, dan yang paling umum adalah melalui alat CLI (Command Line Interface) resminya atau dengan mengintegrasikannya dengan alat-alat pembangunan (build tools).

Asisten Pembuatan Situs Web WordPress.com.
Asisten Pembuatan Situs Web WordPress.com.
99,999% ketersediaan + ketahanan bencana lintas zona, dukungan 24 jam sehari, paket blog gratis untuk membangun situs web.
Nama domain gratis selama satu tahun
Kunjungi situs web WordPress.com untuk bantuan membangun situs web →
Asisten Pembuatan Situs Web UltaHost.
Asisten Pembuatan Situs Web UltaHost.
Lebih dari 900 template gratis yang dapat disesuaikan, dengan kemampuan SEO yang diperlukan untuk mengoptimalkan eksposur pencarian situs web.
Penawaran 40%
Kunjungi Asisten Pembuatan Situs Web UltaHost →

Memulai dengan cepat menggunakan Tailwind CLI

Ini adalah cara yang paling langsung, terutama cocok untuk keperluan belajar dan pengembangan prototipe dengan cepat. Pertama-tama, Anda perlu menginisialisasi proyek menggunakan npm atau yarn, lalu menginstal komponen-komponen yang diperlukan. Tailwind CSS。

npm install -D tailwindcss
npx tailwindcss init

Ini akan membuat berkas konfigurasi. tailwind.config.jsSelanjutnya, buatlah sebuah file CSS (misalnya: `styles.css`). src/input.css), dan tambahkan instruksi dari Tailwind:

@tailwind base;
@tailwind components;
@tailwind utilities;

Kemudian, gunakan perintah CLI untuk mendengarkan (memonitor) perubahan pada file CSS tersebut, dan kompilasinya menjadi kode CSS yang siap digunakan.

npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch

Terakhir, masukkan kode yang dihasilkan ke dalam file HTML Anda. output.css Setelah file tersebut siap, Anda dapat mulai menggunakan kelas-kelas praktis (utility classes) dari Tailwind.

推荐阅读 Menguasai sepenuhnya Tailwind CSS: Panduan Praktis untuk Membangun Situs Web Responsif yang Modern。

Berintegrasi dengan framework front-end

Tailwind CSS Integrasinya dengan framework front-end modern sangat lancar. Misalnya, dalam proyek menggunakan Vue atau React, Anda dapat mengintegrasikannya dengan PostCSS. Saat menggunakan Create React App, Anda dapat menginstalnya:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Ini akan menghasilkan kedua hal tersebut secara bersamaan. tailwind.config.js 和 postcss.config.js File konfigurasi. Setelah itu, pada file CSS utama proyek (misalnya…) src/index.cssTambahkan ketiga poin tersebut ke dalam (…) @tailwind Cukup berikan instruksi saja.

Core Concepts and Practical Classes

Untuk menggunakan secara efisien… Tailwind CSSAnda harus memahami sistem penamaan kelas yang bersifat praktis serta prinsip-prinsip desain responsif yang mendasarinya.

Asisten Pembuatan Situs Web Bluehost.
Menyediakan alat pembuatan situs web AI, obrolan online dan dukungan telepon 24/7, nama domain gratis selama setahun, CDN gratis, dan SLA waktu operasional 99,99%.
Logo Asisten Pembuatan Situs Web. Kunjungi Bluehost.

Sistem Penamaan Kelas Praktis (Practical Class Naming System)

Tailwind CSS Nama kelas tersebut mengikuti pola penamaan yang konsisten, yaitu “atribut-modifier-nilai”. Contohnya:
Margin:m-4(Semua margin)mt-2(Margin atas)
Warna:text-gray-800，bg-red-300
Ukuran:w-64(Lebar: 16rem)h-screen(Tinggi: 100vh)
Tata letak:flex，justify-center，items-center

Angka biasanya berkorespondensi dengan suatu sistem desain (seperti jarak antar elemen, ukuran font, dll.), dan secara default didasarkan pada satuan dasar sebesar 4px. Selain itu, sistem ini juga mendukung variasi tampilan berdasarkan kondisi tertentu, seperti saat elemen tersebut di-klik atau di-overlay (dihover).hover:bg-blue-700)、fokus (focus)focus:ring-2Dan sebagainya; Anda hanya perlu menambahkan prefiks “status” di depan nama kelas tersebut.

Membangun tata letak yang responsif

Tailwind CSS Gunakan strategi responsif yang mengutamakan perangkat seluler. Kelas-kelas praktis yang tersedia secara default dirancang khusus untuk perangkat seluler; untuk menerapkan gaya tampilan pada layar yang lebih besar, diperlukan penambahan prefiks responsif. Sistem titik pemutus (breakpoint) yang digunakan mencakup… sm, md, lg, xl, 2xl。

推荐阅读 Dari Pemula hingga Ahli: Menguasai Tailwind CSS untuk Membangun Situs Web Responsif yang Modern。

Misalnya, sebuah elemen memiliki lebar penuh di ponsel, menjadi setengah dari lebarnya di layar berukuran sedang, dan menjadi seperempat dari lebarnya di layar berukuran besar. Hal ini dapat ditulis sebagai berikut:

<div class="w-full md:w-1/2 lg:w-1/4">
  <!-- 内容 -->
</div>

Hal ini membuat pembuatan antarmuka responsif yang kompleks menjadi sangat sederhana dan intuitif, karena semua aturan responsif terkumpul pada satu elemen saja, sehingga mudah untuk dipahami.

hosting.com
SSL gratis, Cloudflare CDN, WAF, 40+ pusat data global yang dapat dipilih, latensi lebih rendah di dekat lokasi Anda, dukungan layanan 24/7/365, sekarang Anda dapat menghemat biaya hingga 67%, serta dukungan untuk pengembangan AI dan optimisasi SEO.
LOGOTipe Kunjungi hosting.com.

Praktik: Membangun sebuah navigasi yang responsif

Mari kita buat sebuah contoh lengkap untuk membangun sebuah navigasi responsif yang modern, dengan menggunakan pengetahuan yang telah kita pelajari.

Struktur HTML dan Penampilan (Style) untuk Perangkat Seluler

Pertama-tama, kita membangun struktur dasarnya. Pada perangkat seluler, menu navigasi biasanya mencakup logo merek dan tombol menu berbentuk hamburger.

<nav class="bg-gray-800 shadow-lg">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="flex items-center justify-between h-16">
      <!-- 品牌标识 -->
      <div class="flex-shrink-0">
        <span class="text-white text-xl font-bold">Situs web saya</span>
      </div>
      <!-- 移动端菜单按钮 -->
      <div class="md:hidden">
        <button id="menu-btn" class="text-gray-300 hover:text-white focus:outline-none">
          <!-- 汉堡图标 SVG -->
          <svg class="h-6 w-6" fill="none" viewbox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
          </svg>
        </button>
      </div>
      <!-- 桌面端导航链接 -->
      <div class="hidden md:block">
        <div class="ml-10 flex items-baseline space-x-4">
          <a href="#" class="px-3 py-2 rounded-md text-sm font-medium text-white bg-gray-900">Halaman Utama</a>
          <a href="#" class="px-3 py-2 rounded-md text-sm font-medium text-gray-300 hover:text-white hover:bg-gray-700">Tentang</a>
          <a href="#" class="px-3 py-2 rounded-md text-sm font-medium text-gray-300 hover:text-white hover:bg-gray-700">\nLayanan</a>
          <a href="#" class="px-3 py-2 rounded-md text-sm font-medium text-gray-300 hover:text-white hover:bg-gray-700">Hubungi</a>
        </div>
      </div>
    </div>
  </div>
  <!-- 移动端下拉菜单 -->
  <div id="mobile-menu" class="hidden md:hidden">
    <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
      <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-white bg-gray-900">Halaman Utama</a>
      <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-white hover:bg-gray-700">Tentang</a>
      <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-white hover:bg-gray-700">\nLayanan</a>
      <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-white hover:bg-gray-700">Hubungi</a>
    </div>
  </div>
</nav>

Di sini, kita menggunakan… md:hidden 和 hidden md:block Digunakan untuk mengontrol penampilan dan penghapusan elemen-elemen yang berbeda pada versi desktop dan mobile.

Menambahkan interaktivitas dan konfigurasi yang dapat disesuaikan

Nav bar memerlukan JavaScript untuk mengontrol pembukaan dan penutupan menu pada perangkat seluler. Tambahkan skrip sederhana berikut:

<script>
  const menuBtn = document.getElementById('menu-btn');
  const mobileMenu = document.getElementById('mobile-menu');
  menuBtn.addEventListener('click', () => {
    mobileMenu.classList.toggle('hidden');
  });
</script>

Selain itu, Anda mungkin ingin mengubah warna tema. Hal ini dapat dilakukan dengan memodifikasi pengaturan terkait warna tema. tailwind.config.js File digunakan untuk mewujudkannya. Sebagai contoh, untuk memperluas palet warna dari sebuah tema:

module.exports = {
  theme: {
    extend: {
      colors: {
        'primary': '#3B82F6', // 自定义主色调
        'secondary': '#10B981',
      }
    }
  },
  variants: {},
  plugins: [],
}

Setelah itu, Anda dapat menggunakan nama tersebut dalam nama kelas (class name). bg-primary 和 text-secondary Dengan menggunakan berkas konfigurasi, Anda dapat sepenuhnya menyesuaikan semua parameter desain seperti jarak antar elemen, jenis font, titik pemutusan (breakpoint), dan lainnya, sehingga sesuai dengan sistem desain merek Anda.

Menyimpulkan.

Tailwind CSS Dengan menggunakan pendekatan yang lebih praktis dan terstruktur, cara para pengembang menulis kode CSS telah berubah secara signifikan. Pendekatan ini memungkinkan pengambilan keputusan terkait tata letak (style) langsung di dalam tag HTML, sehingga meningkatkan efisiensi pengembangan dan konsistensi desain. Mulai dari tahap pemulaan hingga pembuatan komponen responsif yang kompleks, sistem penamaan kelas yang intuitif serta kemampuan konfigurasi yang kuat membuat alat ini sangat cocok digunakan, baik untuk pembuatan prototipe cepat maupun proyek produksi skala besar. Memahami konsep-konsep inti seperti penamaan kelas yang praktis, penggunaan prefiks responsif, dan penyesuaian berkas konfigurasi merupakan kunci dalam membangun situs web yang modern dan responsif.

FAQ - Pertanyaan yang Sering Diajukan.

Apakah file CSS yang dihasilkan oleh Tailwind CSS akan sangat besar?

不会。在生产环境中，Tailwind CSS PurgeCSS (atau mesin JIT yang terintegrasi) akan digunakan untuk memindai file template HTML, JavaScript, dan lainnya, serta secara otomatis menghapus semua kelas CSS yang tidak digunakan. File CSS yang dihasilkan akhirnya biasanya hanya berukuran beberapa KB, jauh lebih kecil dibandingkan dengan banyak framework tradisional.

Dalam proyek tim, bagaimana cara menjaga konsistensi gaya (style) antar komponen proyek?

Tailwind CSS Sistem desain yang terbatas (seperti warna dan proporsi jarak yang tetap) digunakan untuk mendorong konsistensi. Selain itu, tim dapat bersama-sama merawat dan mengembangkan sistem desain yang terpadu tersebut. tailwind.config.js File konfigurasi, yang mendefinisikan warna, font, titik putus, dll. khusus untuk proyek. Menggunakan instruksi @apply untuk mengekstrak kombinasi kelas praktis yang berulang menjadi kelas komponen khusus dalam CSS juga dapat secara efektif meningkatkan konsistensi.

Bagaimana cara menyalin atau mengatur ulang gaya komponen (style) sebuah aplikasi?

Ada tiga cara utama untuk melakukannya. Pertama, menggunakan kelas-kelas praktis yang lebih spesifik langsung dalam kode HTML; ini merupakan cara yang paling umum. Kedua, memperluas atau mengganti pengaturan tema dalam berkas konfigurasi. Ketiga, menggunakan kode CSS untuk melakukan perubahan tersebut. @apply Instruksi tersebut menggabungkan beberapa kelas praktis menjadi satu kelas baru, atau membuat kode CSS khusus (custom CSS) dan menggunakannya. @layer Instruksi tersebut digunakan untuk menyisipkan kode tersebut ke dalam framework Tailwind. base、components 或 utilities Di dalam lapisan tersebut, prioritasnya dapat dikontrol.

Tailwind CSS cocok digunakan bersama dengan berbagai library atau framework UI berikut:

Tailwind CSS Bisa berintegrasi dengan hampir semua framework front-end modern dengan sempurna, termasuk React, Vue, Angular, Svelte, dan lainnya. Umumnya, Tailwind digunakan sebagai alat styling dasar yang bekerja sama dengan sistem komponen dari framework-framwork tersebut. Selain itu, ada juga beberapa pustaka komponen UI yang dibangun berdasarkan Tailwind, seperti Headless UI (komponen interaktif tanpa styling resmi), DaisyUI, Flowbite, dan lainnya. Pustaka-pustaka ini menyediakan komponen siap pakai, sekaligus memungkinkan Anda untuk melakukan penyesuaian mendalam menggunakan Tailwind.

Selanjutnya, apa yang harus kita lakukan selanjutnya?

Jika Anda ingin membuat situs web dengan cepat, langkah selanjutnya adalah terus membandingkan kemampuan template, ekstensibilitas, dan biaya pemeliharaan berkelanjutan dari berbagai platform pembuatan situs web.

Bacaan lanjutan dan pengetahuan praktis.

Konten-konten berikut terkait dengan topik artikel ini dan cocok untuk dibaca lebih lanjut. Lebih baik mulai dengan artikel yang paling dekat dengan pertanyaan Anda saat ini, lalu secara bertahap memperluas ke topik terkait, yang biasanya akan memberikan hasil yang lebih baik.

Tag: