Tutorial Cara Install Tailwind CSS Dengan CDN & Tailwind CLI

18 Agustus 2025

Tutorial Cara Install Tailwind CSS Dengan CDN & Tailwind CLI

Tailwind CSS merupakan framework CSS utility-first yang sangat populer untuk membuat tampilan website modern dan responsif. Dengan Tailwind CSS, kita dapat langsung menggunakan class-class siap pakai tanpa perlu membuat banyak kode CSS sendiri. Artikel ini akan membahas tutorial cara install Tailwind CSS menggunakan dua metode utama: CDN (Content Delivery Network) dan Tailwind CLI (Command Line Interface). Dilengkapi langkah-langkah lengkap, penjelasan konfigurasi, serta contoh kode, artikel ini diharapkan membantu Anda memahami dan mulai menggunakan Tailwind CSS dalam proyek web.

Apa Itu Tailwind CSS

Tailwind CSS adalah framework CSS utility-first yang artinya disediakan banyak kelas CSS pendek (utility classes) untuk mengatur gaya tanpa menulis CSS secara manual. Beberapa keunggulan Tailwind CSS:

Fleksibel dan Kustomisasi Mudah: Anda bisa membuat tampilan custom dengan cepat tanpa perlu menulis kode CSS yang banyak. Hanya gunakan class built-in Tailwind atau tambahkan konfigurasi Anda sendiri.
Ukuran File Lebih Kecil: Tailwind hanya menyertakan class yang dipakai saja saat proses build, sehingga hasil CSS bisa jauh lebih ringan dibanding framework tradisional seperti Bootstrap.
Responsif dan Siap Produksi: Tailwind mendukung utilities responsive yang mudah diimplementasikan, membuat layout otomatis responsif tanpa repot.
Bebas Framework Besar: Tidak terikat pada komponen tertentu, memberi kebebasan design sesuai kebutuhan.

Tailwind CSS pertama kali dikembangkan oleh Adam Wathan pada tahun 2017, dengan rilis versi 1.0 di tahun 2019. Sejak saat itu, Tailwind terus berkembang dan kini menjadi salah satu tool favorit developer front-end. Untuk menggunakan Tailwind CSS dalam proyek, kita harus memasangnya terlebih dahulu. Terdapat dua metode utama cara install Tailwind yang umum dipakai: via CDN dan via CLI. Setiap metode memiliki kelebihan dan kekurangannya masing-masing. Simak penjelasan dan langkah-langkah berikut.

Persiapan Sebelum Instalasi

Sebelum memulai, pastikan beberapa hal berikut sudah siap:

Teks Editor: Seperti VSCode, Sublime, atau lainnya, untuk menulis kode. VSCode umumnya direkomendasikan karena banyak extension pendukung pengembangan web.
Web Browser: Untuk melihat hasil perubahan tampilan. Browser modern (Chrome, Firefox, Edge, dll) diperlukan.
Node.js (untuk CLI): Jika akan menggunakan metode CLI, pastikan Node.js sudah terinstal. Node.js diperlukan untuk memasang package Tailwind dan alat pendukungnya.

Catatan: Jika baru mulai belajar Tailwind CSS, Anda bisa mencoba metode CDN terlebih dahulu karena sangat sederhana dan tidak memerlukan setup awal yang rumit.

Cara Install Tailwind Dengan CDN (Play CDN)

Salah satu cara tercepat untuk mulai menggunakan Tailwind adalah dengan Play CDN. Tailwind menyediakan skrip khusus yang bisa ditambahkan langsung ke halaman HTML Anda. Dengan CDN, Anda tidak perlu konfigurasi rumit, cukup tambahkan satu baris kode. Namun perlu diingat: metode CDN ini hanya direkomendasikan untuk development/laboratorium, bukan untuk produksi, karena tidak dihasilkan file CSS tersendiri dan kinerja bisa kurang optimal.

Langkah 1: Tambahkan Skrip Play CDN di HTML

Buka file HTML Anda (misalnya index.html) dan di dalam tag <head>...</head> tambahkan script Play CDN Tailwind berikut:

<script src="https://cdn.tailwindcss.com"></script>

Contoh:

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Coba Tailwind CDN</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
  <h1 class="text-3xl font-bold text-center">Hello World dengan Tailwind</h1>
</body>
</html>

Setelah menambahkan skrip di atas, Tailwind CSS versi terbaru otomatis dimuat. Anda dapat langsung menggunakan class Tailwind di elemen HTML mana pun. Misalnya class text-3xl, font-bold, dan sebagainya.

Langkah 2: Konfigurasi Optional (Tailwind Config)

Play CDN juga mendukung konfigurasi tertentu melalui variabel tailwind.config. Jika ingin menambah warna custom atau opsi lain, Anda bisa menulis skrip konfigurasi sebelum skrip CDN atau setelahnya seperti ini:

<script>
  tailwind.config = {
    theme: {
      extend: {
        colors: {
          clifford: '#da373d',
        }
      }
    }
  }
</script>

Masukkan kode ini di dalam <head> (sebelum atau setelah tag CDN). Contoh lengkapnya:

<head>
  <script src="https://cdn.tailwindcss.com"></script>
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            biru: '#335ef7'
          }
        }
      }
    }
  </script>
</head>

Dengan konfigurasi tersebut, Anda dapat menggunakan warna text-biru atau bg-biru di HTML. Contoh:

<h1 class="text-5xl font-bold text-biru">Install Tailwind CSS dengan CDN</h1>

Langkah 3: Menambahkan Custom CSS (Opsional)

Selain konfigurasi tema, Tailwind CDN memungkinkan menambahkan gaya kustom menggunakan tag <style type="text/tailwindcss">. Misalnya, Anda ingin membuat utility baru:

<style type="text/tailwindcss">
  @layer utilities {
    .content-auto {
      content-visibility: auto;
    }
  }
</style>

Masukkan kode ini di dalam <head>. Kelas .content-auto sekarang bisa digunakan layaknya utility Tailwind (misalnya dengan breakpoint responsif md:content-auto, dll).

Hasil Penggunaan CDN

Jika langkah di atas diikuti, Anda bisa langsung melihat hasil di browser dengan memuat file HTML tersebut. Hasilnya adalah tampilan yang menggunakan Tailwind tanpa perlu proses build. Misalnya kode:

<div class="flex items-center justify-center h-screen bg-slate-50">
  <h1 class="text-4xl font-bold text-biru">Install Tailwind CSS Dengan CDN</h1>
</div>

Secara otomatis akan ter-render sesuai gaya Tailwind. Tampilan yang dihasilkan tergantung penggunaan class, misalnya tampilan web dengan Tailwind CSS via CDN akan terlihat seperti header besar berwarna biru dengan latar belakang abu-abu terang.

Tip SEO: Saat membuat konten HTML, pastikan menggunakan tag heading (misalnya <h1>, <h2>) dengan teks relevan. Di atas, penggunaan <h1 class="text-4xl font-bold text-biru">Install Tailwind CSS Dengan CDN</h1> mengoptimalkan SEO dengan kata kunci Tailwind CSS dan memberikan struktur semantik yang baik.

Kelebihan dan Kekurangan Metode CDN

Kelebihan: Sangat cepat dan mudah, cocok untuk quick start atau eksperimen singkat. Anda tidak perlu setup apa pun selain HTML biasa.
Kekurangan: Tidak direkomendasikan untuk produksi. File CSS besar karena mengandung semua fitur Tailwind (meski hanya digunakan beberapa class). Kustomisasi dan skalabilitas terbatas karena konfigurasi semua di HTML, menyulitkan proyek besar.

Menurut dokumentasi resmi Tailwind, “Play CDN is designed for development purposes only, and is not intended for production”. Artinya, penggunaan CDN hanya untuk percobaan atau demo. Untuk proyek nyata, sebaiknya gunakan metode build (CLI atau bundler).

Baca Juga: Perbedaan Bootstrap dan Tailwind

Cara Install Tailwind Dengan Tailwind CLI

Metode kedua adalah dengan Tailwind CLI, yaitu menggunakan Node.js untuk menginstal Tailwind sebagai dependency dalam proyek. Cara ini lebih umum untuk proyek nyata karena menghasilkan file CSS khusus yang di-build berdasarkan kelas yang digunakan. Dengan CLI, kita juga bisa melakukan banyak kustomisasi dan optimasi.

Langkah 1: Siapkan Proyek dan Install Tailwind

Buat folder proyek baru dan buka terminal di folder tersebut.
Inisialisasi proyek Node.js (opsional tapi direkomendasikan):
```
npm init -y
```
Ini membuat file package.json untuk mengelola dependencies.
Install Tailwind CSS melalui npm:
```
npm install -D tailwindcss
```
Atau menggunakan versi 3 lengkap:
```
npm install -D tailwindcss@latest postcss autoprefixer
```
Catatan: Package tailwindcss sudah mencakup CLI. Anda bisa menambahkan @tailwindcss/cli jika ingin versi terpisah, namun tidak diperlukan untuk penggunaan dasar.
Setelah itu, jalankan inisiasi Tailwind untuk membuat file konfigurasi:
```
npx tailwindcss init
```
Perintah ini membuat file tailwind.config.js di folder proyek.

Langkah 2: Konfigurasi Tailwind

Buka file tailwind.config.js. Di dalamnya, tentukan template path (path ke file HTML/JSX) agar Tailwind dapat mendeteksi class yang digunakan. Misalnya:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

Dalam konfigurasi di atas, Tailwind akan memindai semua file HTML atau JS di dalam folder src. Sesuaikan path sesuai lokasi file Anda.

Langkah 3: Buat File CSS Input

Buat file CSS baru, misalnya src/input.css (atau styles.css). Tambahkan tiga Direktif Tailwind berikut di awal file:

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

Direktif tersebut mengimport semua style dasar, komponen, dan utilitas dari Tailwind ke dalam berkas CSS Anda.

Langkah 4: Proses Build dengan CLI

Jalankan perintah Tailwind CLI untuk menghasilkan file CSS akhir (output.css). Misalnya output di folder dist:

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

Penjelasan perintah:

-i ./src/input.css: file input yang berisi direktif Tailwind.
-o ./dist/output.css: file output yang dihasilkan.
--watch: memantau perubahan, sehingga setiap kali Anda menyimpan file sumber, CSS akan diperbarui otomatis.

Setelah perintah ini berjalan, proyek Anda kini memiliki file dist/output.css yang siap digunakan.

Langkah 5: Hubungkan CSS ke HTML

Buka file HTML Anda (misalnya index.html) dan tambahkan link ke file CSS yang sudah dibuat:

<link href="./dist/output.css" rel="stylesheet">

Contoh lengkap HTML:

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Install Tailwind CSS CLI</title>
  <link href="./dist/output.css" rel="stylesheet">
</head>
<body>
  <div class="flex items-center justify-center h-screen bg-slate-50">
    <img src="logo.svg" class="w-1/5 mr-6" alt="">
    <h1 class="text-4xl font-bold text-indigo-600">Install Tailwind CSS Dengan Tailwind CLI</h1>
  </div>
</body>
</html>

Setelah ini, buka halaman HTML di browser. Anda akan melihat gaya diterapkan melalui output.css yang dihasilkan Tailwind.

Jika menggunakan tools bundler (Webpack, Vite, dll), Anda bisa konfigurasi build agar menjalankan npx tailwindcss sebelum proses bundle. Namun sebagai langkah dasar, npx tailwindcss sudah cukup.

Membandingkan Metode CDN vs CLI

Kedua cara di atas memiliki kekuatan dan kelemahan masing-masing. Berikut perbandingan ringkas:

CDN (Play CDN):
- Kelebihan: Instalasi super cepat (hanya satu baris HTML), cocok untuk prototyping dan eksperimen singkat.
- Kekurangan: Tidak ideal untuk produksi, file berat (termasuk semua class), konfigurasi terbatas hanya via skrip HTML. Selain itu, ketergantungan pada koneksi CDN dan pembaruan online setiap waktu.
Tailwind CLI:
- Kelebihan: Lebih fleksibel dan skalabel. Dapat dibuat file CSS khusus hanya dengan class yang dipakai, sehingga lebih ringan untuk produksi. Mudah ditambahkan plugin atau konfigurasi tema dalam tailwind.config.js.
- Kekurangan: Memerlukan setup awal (Node.js, inisialisasi npm, beberapa perintah). Untuk pemula, langkah-langkahnya lebih kompleks daripada CDN.

Secara umum, untuk pengerjaan proyek sungguhan, disarankan menggunakan Tailwind CLI (atau integrasi dengan bundler/framework). Sedangkan CDN cocok untuk belajar, presentasi, atau konten statis sekali jalan yang tidak perlu optimalisasi.

Tips Tambahan dan Best Practices

Gunakan Build Tool Jika Produksi: Selain CLI, Anda bisa mengintegrasi Tailwind dengan tool seperti Webpack, Vite, atau PostCSS untuk workflow yang lebih otomatis. Misalnya, dengan PostCSS plugin TailwindCSS.
Purge CSS: Meskipun Tailwind v3+ otomatis menghapus class yang tidak digunakan, pastikan content di tailwind.config.js sudah benar agar ukuran CSS selalu minimal.
Tulis Class yang Efisien: Gunakan metode like @apply jika ada kombinasi class yang sering dipakai, atau buat komponen di file CSS dengan direktif @layer components.
Responsive dan Dark Mode: Manfaatkan fitur built-in seperti breakpoint (sm:, md:, dst) dan mode gelap (dark:) untuk memperkaya desain tanpa tambah plugin.
Pelajari Dokumentasi: Dokumentasi resmi Tailwind (tailwindcss.com) sangat lengkap. Di sana terdapat contoh penggunaan CDN, CLI, plugin, dan semua fitur terbaru.

Contoh Implementasi Sederhana

Untuk mengilustrasikan penggunaan Tailwind CLI, berikut susunan folder proyek:

project/
├── src/
│   ├── index.html
│   └── input.css
└── dist/
    └── output.css   (dihasilkan oleh Tailwind CLI)

Isi input.css:

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

Isi index.html:

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Contoh Tailwind CLI</title>
  <link href="./output.css" rel="stylesheet">
</head>
<body class="bg-gray-100">
  <div class="container mx-auto p-8">
    <button class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600">
      Contoh Tombol Tailwind
    </button>
  </div>
</body>
</html>

Setelah menjalankan npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch, buka index.html di browser. Tombol dengan class Tailwind akan langsung tampil, dengan warna biru dan efek hover, tanpa menulis CSS tradisional.

Kesimpulan

Mempelajari cara install Tailwind CSS membuka banyak kemungkinan dalam membuat desain web cepat dan modern. Metode CDN sangat ideal untuk percobaan dan belajar karena tidak repot menyiapkan lingkungan, sedangkan Tailwind CLI memberikan kontrol penuh dan performa optimal untuk proyek profesional. Pilih metode yang sesuai kebutuhan: CDN untuk eksperimen cepat, dan CLI/bundler untuk penggunaan serius. Dengan adanya konfigurasi tema dan utilitas yang kaya, Tailwind mempermudah pengembangan antarmuka responsif dan estetis.

Selanjutnya, untuk mengembangkan kemampuan web Anda secara menyeluruh, pertimbangkan mengikuti KelasFullstack di CodePolitan. KelasFullstack adalah kelas online belajar Fullstack Web Developer dari A ke Z yang cocok bagi Anda yang ingin karir bagus, skill dibutuhkan industri, gaji tinggi, serta kemampuan membuat web atau aplikasi untuk bisnis online. Pelajari lebih lanjut di CodePolitan dan perkuat skill Anda!

Tags:

#CaraInstallTailwind #ContentDeliveryNetwork #CommandLineInterface #KelasFullstack

What do you think?

Reactions