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

![](https://apps.codepolitan.com/sites/learn/uploads/original/202308/tailwind_adalah.png)

**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](https://nodejs.org/) 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.

**Baca Juga:** [Flowbite React JS: Pustaka UI Berbasis Tailwind CSS](https://www.codepolitan.com/blog/flowbite-react-js-pustaka-ui-berbasis-tailwind-css/)

## 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:

```html
<script src="https://cdn.tailwindcss.com"></script>
```

Contoh:

```html
<!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:

```html
<script>
  tailwind.config = {
    theme: {
      extend: {
        colors: {
          clifford: '#da373d',
        }
      }
    }
  }
</script>
```

Masukkan kode ini di dalam `<head>` (sebelum atau setelah tag CDN). Contoh lengkapnya:

```html
<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:

```html
<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:

```html
<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:

```html
<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](https://www.codepolitan.com/blog/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

1. Buat folder proyek baru dan buka terminal di folder tersebut.

2. Inisialisasi proyek Node.js (opsional tapi direkomendasikan):

   ```bash
   npm init -y
   ```

   Ini membuat file `package.json` untuk mengelola dependencies.

3. Install Tailwind CSS melalui npm:

   ```bash
   npm install -D tailwindcss
   ```

   Atau menggunakan versi 3 lengkap:

   ```bash
   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.

4. Setelah itu, jalankan inisiasi Tailwind untuk membuat file konfigurasi:

   ```bash
   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:

```js
/** @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:

```css
@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`:

```bash
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:

```html
<link href="./dist/output.css" rel="stylesheet">
```

Contoh lengkap HTML:

```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`:

```css
@tailwind base;
@tailwind components;
@tailwind utilities;
```

Isi `index.html`:

```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.

[![](https://image.web.id/images/belajar-coding-gratis.png)](https://www.kelasfullstack.id/project)

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!

Tutorial Cara Install Tailwind CSS Dengan CDN & Tailwind CLI

GenAI Video Fest adalah ajang kompetisi video kreatif yang diselenggarakan oleh CODEPOLITAN bekerjasama dengan Alibaba Cloud.

Kami menantang kreator, tech-enthusiast, dan siapa saja untuk mendobrak batas imajinasi menggunakan teknologi Generative AI terbaru. Di sini, kamu wajib menggunakan WAN Model Studio dari Alibaba Cloud sebagai tools utama untuk menghasilkan karya videomu (bisa dikombinasikan dengan tools editing lainnya).

Tunjukkan pada dunia bagaimana teknologi dan kreativitas bisa bersatu menciptakan karya visual yang berdampak!

Kategori Kompetisi
Pilih satu dari empat tema besar ini untuk karyamu:
* Humanity (Kemanusiaan): Cerita yang menyentuh hati, sosial, dan kepedulian antar sesama.
* Sports (Olahraga): Energi, semangat juang, dan dinamika dunia olahraga.
* Entertainment (Hiburan): Komedi, musik, video klip, atau parodi yang menghibur.
* Science (Sains): Visualisasi masa depan, teknologi, alam semesta, atau penemuan ilmiah.

Total Prize Pool senilai Rp 250.000.000 menunggu para pemenang!
* Top Winners Rewards: Uang Tunai, Alibaba Cloud Credits (hingga $500), Merchandise Eksklusif, dan SWAG CODEPOLITAN.
* Lucky Draw Event: Kesempatan menang hadiah tambahan bagi peserta yang beruntung.
* Massive Exposure: Karya terbaik akan di-highlight di media sosial CODEPOLITAN, Alibaba Cloud, dan channel industri kreatif lainnya.
* Special Access (Khusus Alumni RuangAI): Dapatkan 2 Token untuk klaim Kelas Spesialisasi di RuangAI secara gratis.

Jangan sampai ketinggalan tanggal penting ini:
* Pendaftaran & Submission: 23 Desember 2024 - 23 Januari 2025
* Penjurian (Judging Phase): 24 - 26 Januari 2025
* Pengumuman Pemenang: 27 Januari 2025

Cara Ikutan:
1. Daftar: Klik tombol "Daftar Sekarang" dan pastikan kamu punya akun RuangAI.
2. Join Discord: Masuk ke server Discord komunitas untuk info teknis dan diskusi.
3. Create: Buat video kreatifmu menggunakan WAN Model Studio (Alibaba Cloud) sesuai kategori pilihan.
4. Upload & Submit: Unggah videomu ke media sosial (IG/TikTok/YouTube) dan submit link karyamu di halaman submission RuangAI.

Ikuti kompetisi video Generative AI terbesar dari CODEPOLITAN dan Alibaba Cloud! Gunakan teknologi WAN Model Studio untuk menyulap ide liarmu menjadi visual memukau. Rebut total hadiah senilai Rp 250.000.000!

GenAI Video Fest

Beasiswa Basic Cybersecurity adalah program inisiatif dari JagoanSiber yang dirancang untuk membuka wawasan masyarakat luas tentang dunia keamanan digital. Program ini hadir untuk menjawab kebutuhan talenta keamanan siber yang tinggi, dimulai dengan membangun pemahaman fundamental yang kokoh.

Program ini berbentuk Kelas Online Belajar Mandiri (Self-Paced Learning) berbasis video. Peserta diberikan keleluasaan penuh untuk mengakses materi kapan saja dan di mana saja tanpa terikat jadwal, sehingga sangat fleksibel bagi pelajar, mahasiswa, maupun pekerja profesional.

Kelebihan utama program ini adalah aksesnya yang 100% GRATIS dan terbuka untuk siapa saja tanpa syarat latar belakang IT. Peserta akan dibimbing langsung oleh Mahrus Qusaery, seorang praktisi keamanan siber berpengalaman, yang akan mengupas tuntas materi dasar yang krusial.

Program beasiswa kelas online gratis untuk mempelajari dasar keamanan siber dari nol. Belajar mandiri berbasis video langsung dari praktisi ahli, Mahrus Qusaery.

Tutorial Cara Install Tailwind CSS Dengan CDN & Tailwind CLI

Learning

KelasFullstack

RuangAI

JagoanSiber

Baca Artikel Lainnya

ChatGPT adalah Kawan atau Lawan Bagi Programmer?

Belajar Membangun Proyek Open Source, Emang bisa?

13+ Rahasia Dibalik Skills Frontend Developer di Buru Perusahaan

10 Tips & Trik Penggunaan Shortcut Vscode, Pelajari Yuk!

Cara Menghapus Commit Git: Panduan Praktis dan Terbaik!

Tingkatkan Teknologi AI, Indonesia Jalin Kerjasama dengan AS