Cara Menggunakan Tailwind CSS: Panduan Lengkap untuk Pengembang

Tailwind CSS telah merevolusi cara pengembang membangun antarmuka pengguna. Pendekatan berbasis utilitasnya memungkinkan Anda untuk membuat desain khusus tanpa harus meninggalkan HTML Anda. Panduan komprehensif ini akan memandu Anda melalui semua yang perlu Anda ketahui untuk menggunakan Tailwind CSS secara efektif, dari instalasi hingga teknik tingkat lanjut.

Daftar Isi

Pendahuluan ke Tailwind CSS
1. Apa itu Tailwind CSS?
2. Mengapa Memilih Tailwind CSS?
3. Manfaat Menggunakan Tailwind CSS
4. Kapan Tailwind CSS adalah Pilihan yang Tepat?
Penyiapan dan Instalasi
1. Prasyarat
2. Instalasi melalui npm
3. Instalasi menggunakan CDN
4. Konfigurasi Tailwind CSS
5. Menyiapkan File CSS Anda
Dasar-Dasar Tailwind CSS
1. Memahami Sintaks Utilitas
2. Konvensi Penamaan Kelas
3. Gaya Responsif
4. Keadaan Hover, Fokus, dan Aktif
5. Varian Tema
Utilitas Utama Tailwind CSS
1. Warna
2. Tipografi
3. Latar Belakang
4. Perbatasan
5. Tata Letak (Fleksibel, Grid)
6. Penspasian (Margin, Padding)
7. Ukuran
8. Efek (Bayangan, Opasitas)
9. Transformasi
10. Filter
Kustomisasi Tailwind CSS
1. File tailwind.config.js
2. Menyesuaikan Tema (Warna, Tipografi, Penspasian, dll.)
3. Menambahkan Utilitas Kustom
4. Menambahkan Komponen Kustom
5. Menggunakan Plugin
Komponen dengan Tailwind CSS
1. Membuat Tombol
2. Membuat Kartu
3. Membuat Navigasi
4. Membuat Formulir
5. Praktik Terbaik untuk Komponen
Teknik Tailwind CSS Tingkat Lanjut
1. Fungsi @apply
2. Direktif @screen
3. Menggunakan JavaScript dengan Tailwind CSS
4. Mengoptimalkan Tailwind CSS untuk Produksi
5. Menangani Konflik dengan CSS Lain
Praktik Terbaik dan Tips
1. Konsistensi Penamaan Kelas
2. Menggunakan Prettier untuk Pemformatan
3. Modularisasi Kode Anda
4. Menghindari Kompleksitas yang Berlebihan
5. Dokumentasi dan Komentar
Troubleshooting Umum
1. Kelas CSS Tidak Berlaku
2. Masalah Responsif
3. Konflik Gaya
4. Kesalahan Kompilasi
Sumber Daya dan Alat
1. Dokumentasi Tailwind CSS Resmi
2. Plugin Tailwind CSS
3. Kit UI dan Template
4. Komunitas dan Forum
Kesimpulan

1. Pendahuluan ke Tailwind CSS

1.1 Apa itu Tailwind CSS?

Tailwind CSS adalah kerangka kerja CSS berbasis utilitas yang sangat dapat dikonfigurasi. Tidak seperti kerangka kerja UI tradisional seperti Bootstrap atau Materialize, Tailwind CSS tidak menyediakan komponen yang telah ditetapkan sebelumnya seperti tombol atau kartu. Sebaliknya, ia menawarkan sekumpulan besar kelas utilitas tingkat rendah yang dapat Anda gunakan untuk membuat desain khusus langsung di HTML Anda.

Pendekatan ini memberi Anda fleksibilitas yang tak tertandingi atas tampilan antarmuka Anda, memungkinkan Anda untuk menerapkan desain yang sangat spesifik tanpa harus menimpa gaya yang telah ditetapkan sebelumnya. Ini juga berarti bahwa Anda hanya menyertakan CSS yang Anda gunakan, menghasilkan ukuran file yang lebih kecil dan performa yang lebih baik.

1.2 Mengapa Memilih Tailwind CSS?

Ada beberapa alasan mengapa pengembang memilih Tailwind CSS daripada kerangka kerja CSS lainnya:

Fleksibilitas: Tailwind CSS memberi Anda kendali penuh atas gaya elemen Anda. Anda tidak terbatas pada komponen atau gaya yang telah ditetapkan sebelumnya.
Performa: Karena Anda hanya menggunakan kelas utilitas yang Anda butuhkan, Tailwind CSS menghasilkan ukuran file CSS yang lebih kecil daripada kerangka kerja tradisional.
Pemeliharaan: Tailwind CSS mendorong konsistensi dan dapat diprediksi dalam basis kode Anda. Karena Anda menggunakan kelas utilitas yang sama di seluruh proyek Anda, lebih mudah untuk memelihara dan memperbarui gaya Anda.
Kustomisasi: Tailwind CSS sangat dapat dikonfigurasi. Anda dapat menyesuaikan tema default, menambahkan utilitas Anda sendiri, dan menggunakan plugin untuk memperluas fungsionalitasnya.
Responsif: Tailwind CSS menyediakan serangkaian lengkap kelas responsif yang memudahkan untuk membuat desain yang beradaptasi dengan ukuran layar yang berbeda.

1.3 Manfaat Menggunakan Tailwind CSS

Menggunakan Tailwind CSS menawarkan beberapa manfaat dibandingkan dengan kerangka kerja CSS tradisional atau menulis CSS khusus:

Pengembangan yang Lebih Cepat: Kelas utilitas Tailwind CSS memungkinkan Anda untuk dengan cepat menambahkan gaya ke elemen Anda tanpa harus beralih antara HTML dan file CSS Anda.
Konsistensi yang Ditingkatkan: Menggunakan kelas utilitas yang sama di seluruh proyek Anda memastikan konsistensi dalam desain Anda.
Kemampuan Pemeliharaan yang Lebih Baik: Kode Tailwind CSS mudah dibaca dan dipahami, sehingga memudahkan untuk memelihara dan memperbarui gaya Anda.
Ukuran File yang Lebih Kecil: Tailwind CSS menghilangkan gaya yang tidak digunakan, menghasilkan ukuran file CSS yang lebih kecil dan performa yang lebih baik.
Desain Responsif yang Mudah: Kelas responsif Tailwind CSS memudahkan untuk membuat desain yang beradaptasi dengan ukuran layar yang berbeda.

1.4 Kapan Tailwind CSS adalah Pilihan yang Tepat?

Tailwind CSS adalah pilihan yang bagus untuk proyek-proyek berikut:

Proyek Kustom: Jika Anda perlu membuat desain yang unik dan khusus, Tailwind CSS memberi Anda fleksibilitas untuk melakukannya.
Proyek yang Berpusat pada Kinerja: Jika kinerja adalah prioritas utama, ukuran file Tailwind CSS yang kecil dapat membantu Anda meningkatkan kecepatan pemuatan situs web Anda.
Proyek Skala Besar: Tailwind CSS mendorong konsistensi dan kemampuan pemeliharaan, yang penting untuk proyek skala besar.
Proyek yang Membutuhkan Desain Responsif: Kelas responsif Tailwind CSS memudahkan untuk membuat desain yang beradaptasi dengan ukuran layar yang berbeda.

Namun, Tailwind CSS mungkin bukan pilihan terbaik untuk proyek-proyek berikut:

Proyek Kecil: Untuk proyek kecil dengan persyaratan gaya yang sederhana, overhead untuk mengatur dan mempelajari Tailwind CSS mungkin tidak sepadan.
Proyek yang Menggunakan Desain yang Telah Ditetapkan Sebelumnya: Jika Anda menggunakan desain yang telah ditetapkan sebelumnya dari kerangka kerja UI, Tailwind CSS mungkin tidak diperlukan.

2. Penyiapan dan Instalasi

2.1 Prasyarat

Sebelum menginstal Tailwind CSS, Anda perlu memastikan bahwa Anda memiliki prasyarat berikut:

Node.js: Tailwind CSS membutuhkan Node.js untuk diinstal dan dijalankan. Anda dapat mengunduh Node.js dari situs web resminya: https://nodejs.org/
npm (Node Package Manager) atau Yarn: npm dan Yarn adalah pengelola paket untuk Node.js. Keduanya digunakan untuk menginstal dan mengelola dependensi proyek Anda. npm disertakan dengan Node.js, dan Yarn dapat diinstal secara terpisah.
Editor Kode: Anda akan memerlukan editor kode untuk menulis HTML dan CSS Anda. Beberapa editor kode populer termasuk VS Code, Sublime Text, dan Atom.

2.2 Instalasi melalui npm

Cara yang paling umum untuk menginstal Tailwind CSS adalah melalui npm:

Buat Proyek Baru: Buat direktori baru untuk proyek Anda dan navigasikan ke dalamnya di terminal Anda:

mkdir my-tailwind-project
cd my-tailwind-project

Inisialisasi Proyek npm: Inisialisasi proyek npm baru dengan menjalankan perintah berikut:

npm init -y

Instal Tailwind CSS dan Dependensi Lainnya: Instal Tailwind CSS, PostCSS, dan Autoprefixer sebagai dependensi pengembangan:

npm install -D tailwindcss postcss autoprefixer

Buat File tailwind.config.js: Buat file tailwind.config.js untuk menyesuaikan konfigurasi Tailwind CSS Anda:

npx tailwindcss init -p

2.3 Instalasi menggunakan CDN

Anda juga dapat menggunakan Tailwind CSS melalui CDN (Content Delivery Network). Ini adalah cara termudah untuk memulai, tetapi tidak disarankan untuk proyek produksi karena tidak memungkinkan Anda untuk menyesuaikan konfigurasi Tailwind CSS Anda.

Untuk menggunakan Tailwind CSS melalui CDN, tambahkan tag <link> berikut ke bagian <head> dari file HTML Anda:

<link href="https://cdn.jsdelivr.net/npm/tailwindcss@3.3.3/tailwind.min.css" rel="stylesheet">

2.4 Konfigurasi Tailwind CSS

File tailwind.config.js digunakan untuk menyesuaikan konfigurasi Tailwind CSS Anda. Anda dapat menggunakannya untuk mengubah tema default, menambahkan utilitas Anda sendiri, dan menggunakan plugin.

Berikut adalah contoh file tailwind.config.js:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{html,js}",
    "./public/*.html",
  ],
  theme: {
    extend: {
      colors: {
        'custom-blue': '#1e3a8a',
      },
      fontFamily: {
        'sans': ['Inter', 'sans-serif'],
      },
    },
  },
  plugins: [],
}

Dalam contoh ini:

content: Menentukan file mana yang harus dipindai Tailwind CSS untuk kelas utilitas.
theme: Digunakan untuk menyesuaikan tema default Tailwind CSS.
extend: Digunakan untuk menambahkan nilai baru ke tema default.
plugins: Digunakan untuk menambahkan plugin Tailwind CSS.

2.5 Menyiapkan File CSS Anda

Setelah Anda menginstal Tailwind CSS dan membuat file tailwind.config.js, Anda perlu menyiapkan file CSS Anda. Ini melibatkan menambahkan direktif Tailwind CSS ke file CSS Anda.

Buat File CSS: Buat file CSS baru, misalnya src/input.css.
Tambahkan Direktif Tailwind CSS: Tambahkan direktif berikut ke file CSS Anda:

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

Kompilasi CSS Anda: Gunakan Tailwind CLI untuk mengkompilasi file CSS Anda:

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

Perintah ini akan memantau file src/input.css untuk perubahan dan mengkompilasi CSS yang dihasilkan ke dist/output.css.

Tautkan File CSS ke HTML Anda: Tautkan file dist/output.css ke bagian <head> dari file HTML Anda:

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

3. Dasar-Dasar Tailwind CSS

3.1 Memahami Sintaks Utilitas

Tailwind CSS menggunakan sintaks utilitas untuk menerapkan gaya ke elemen. Sintaks ini terdiri dari serangkaian kelas yang sesuai dengan properti CSS tertentu.

Misalnya, untuk memberikan elemen latar belakang berwarna biru, Anda akan menggunakan kelas bg-blue-500:

<div class="bg-blue-500">
  Ini adalah kotak biru.
</div>

Kelas bg-blue-500 sesuai dengan properti CSS background-color: #3b82f6;.

3.2 Konvensi Penamaan Kelas

Tailwind CSS menggunakan konvensi penamaan kelas yang konsisten dan dapat diprediksi. Konvensi ini didasarkan pada properti CSS yang distyle dan nilai yang ingin Anda terapkan.

Secara umum, kelas Tailwind CSS mengikuti format berikut:

{properti}-{nilai}

Misalnya:

text-center: Memposisikan teks di tengah.
font-bold: Membuat teks menjadi tebal.
m-4: Menambahkan margin sebesar 1rem (16px).

Untuk properti yang menerima beberapa nilai, Tailwind CSS menggunakan pemisah tanda hubung:

{properti}-{nilai1}-{nilai2}

Misalnya:

border-t-2: Menambahkan border atas dengan lebar 2px.
rounded-tl-lg: Membulatkan sudut kiri atas dengan ukuran yang lebih besar.

3.3 Gaya Responsif

Tailwind CSS menyediakan serangkaian lengkap kelas responsif yang memungkinkan Anda untuk menerapkan gaya yang berbeda berdasarkan ukuran layar.

Kelas responsif didasarkan pada breakpoint berikut:

sm: 640px
md: 768px
lg: 1024px
xl: 1280px
2xl: 1536px

Untuk menerapkan gaya hanya pada ukuran layar tertentu, Anda akan menambahkan awalan breakpoint ke kelas utilitas:

<div class="text-center md:text-left">
  Teks ini akan berada di tengah pada layar kecil dan kiri pada layar sedang dan lebih besar.
</div>

Dalam contoh ini, kelas text-center akan diterapkan pada semua ukuran layar, dan kelas md:text-left akan diterapkan pada ukuran layar sedang dan lebih besar.

3.4 Keadaan Hover, Fokus, dan Aktif

Tailwind CSS juga menyediakan kelas untuk menerapkan gaya pada keadaan yang berbeda dari sebuah elemen, seperti saat kursor diarahkan di atasnya (hover), saat difokuskan (focus), atau saat diklik (active).

Untuk menerapkan gaya hanya pada keadaan tertentu, Anda akan menambahkan awalan keadaan ke kelas utilitas:

<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
  Tombol
</button>

Dalam contoh ini, tombol akan memiliki latar belakang berwarna biru (bg-blue-500) secara default. Saat kursor diarahkan di atasnya, latar belakang akan berubah menjadi biru yang lebih gelap (hover:bg-blue-700).

3.5 Varian Tema

Tailwind CSS mendukung varian tema, seperti mode gelap. Anda dapat menggunakan kelas varian untuk menerapkan gaya yang berbeda berdasarkan tema yang sedang digunakan.

Untuk menggunakan varian tema, Anda perlu mengaktifkan mode gelap di file tailwind.config.js Anda:

/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: 'class',
  // ...
}

Kemudian, Anda dapat menggunakan awalan dark: untuk menerapkan gaya hanya pada mode gelap:

<div class="bg-white dark:bg-gray-800 text-gray-800 dark:text-white">
  Teks ini akan berwarna abu-abu gelap pada latar belakang putih dalam mode terang, dan putih pada latar belakang abu-abu gelap dalam mode gelap.
</div>

4. Utilitas Utama Tailwind CSS

4.1 Warna

Tailwind CSS menyediakan serangkaian lengkap kelas utilitas untuk mengontrol warna elemen Anda. Anda dapat menggunakan kelas-kelas ini untuk mengatur warna teks, warna latar belakang, warna border, dan banyak lagi.

Beberapa contoh kelas warna:

text-red-500: Mengatur warna teks menjadi merah.
bg-green-200: Mengatur warna latar belakang menjadi hijau muda.
border-blue-300: Mengatur warna border menjadi biru.

4.2 Tipografi

Tailwind CSS menyediakan serangkaian lengkap kelas utilitas untuk mengontrol tipografi elemen Anda. Anda dapat menggunakan kelas-kelas ini untuk mengatur ukuran font, berat font, tinggi baris, dan banyak lagi.

Beberapa contoh kelas tipografi:

text-xl: Mengatur ukuran font menjadi ekstra besar.
font-bold: Membuat teks menjadi tebal.
leading-relaxed: Mengatur tinggi baris agar lebih lapang.
text-center: Menengahkan teks.

4.3 Latar Belakang

Tailwind CSS menyediakan serangkaian lengkap kelas utilitas untuk mengontrol latar belakang elemen Anda. Anda dapat menggunakan kelas-kelas ini untuk mengatur warna latar belakang, gambar latar belakang, dan banyak lagi.

Beberapa contoh kelas latar belakang:

bg-gray-100: Mengatur warna latar belakang menjadi abu-abu muda.
bg-cover: Menyesuaikan ukuran gambar latar belakang agar menutupi seluruh elemen.
bg-center: Memposisikan gambar latar belakang di tengah elemen.

4.4 Perbatasan

Tailwind CSS menyediakan serangkaian lengkap kelas utilitas untuk mengontrol perbatasan elemen Anda. Anda dapat menggunakan kelas-kelas ini untuk mengatur warna border, lebar border, dan gaya border.

Beberapa contoh kelas border:

border: Menambahkan border dengan lebar default.
border-2: Menambahkan border dengan lebar 2px.
border-red-500: Mengatur warna border menjadi merah.
rounded-md: Membulatkan sudut border dengan ukuran sedang.

4.5 Tata Letak (Fleksibel, Grid)

Tailwind CSS menyediakan serangkaian lengkap kelas utilitas untuk mengontrol tata letak elemen Anda. Anda dapat menggunakan kelas-kelas ini untuk membuat tata letak fleksibel dan grid.

Beberapa contoh kelas tata letak:

flex: Membuat wadah fleksibel.
grid: Membuat wadah grid.
grid-cols-3: Membuat grid dengan 3 kolom.
gap-4: Menambahkan jarak antar item grid atau fleksibel.
items-center: Menyelaraskan item secara vertikal di tengah wadah.
justify-between: Menyelaraskan item secara horizontal dengan ruang di antara mereka.

4.6 Penspasian (Margin, Padding)

Tailwind CSS menyediakan serangkaian lengkap kelas utilitas untuk mengontrol penspasian elemen Anda. Anda dapat menggunakan kelas-kelas ini untuk menambahkan margin dan padding.

Beberapa contoh kelas penspasian:

m-2: Menambahkan margin sebesar 0.5rem (8px) ke semua sisi elemen.
mt-4: Menambahkan margin atas sebesar 1rem (16px) ke elemen.
p-3: Menambahkan padding sebesar 0.75rem (12px) ke semua sisi elemen.
px-6: Menambahkan padding horizontal sebesar 1.5rem (24px) ke elemen.

4.7 Ukuran

Tailwind CSS menyediakan serangkaian lengkap kelas utilitas untuk mengontrol ukuran elemen Anda. Anda dapat menggunakan kelas-kelas ini untuk mengatur lebar dan tinggi elemen.

Beberapa contoh kelas ukuran:

w-1/2: Mengatur lebar elemen menjadi 50% dari wadahnya.
h-screen: Mengatur tinggi elemen menjadi tinggi layar.
w-full: Mengatur lebar elemen menjadi 100% dari wadahnya.
h-auto: Mengatur tinggi elemen secara otomatis.

4.8 Efek (Bayangan, Opasitas)

Tailwind CSS menyediakan serangkaian lengkap kelas utilitas untuk menambahkan efek ke elemen Anda. Anda dapat menggunakan kelas-kelas ini untuk menambahkan bayangan dan mengubah opasitas.

Beberapa contoh kelas efek:

shadow-md: Menambahkan bayangan sedang ke elemen.
opacity-50: Mengatur opasitas elemen menjadi 50%.
transition-all: Menambahkan transisi ke semua properti CSS.
duration-300: Mengatur durasi transisi menjadi 300ms.

4.9 Transformasi

Tailwind CSS menyediakan serangkaian lengkap kelas utilitas untuk mengubah elemen Anda. Anda dapat menggunakan kelas-kelas ini untuk memutar, menskalakan, dan menerjemahkan elemen.

Beberapa contoh kelas transformasi:

rotate-45: Memutar elemen sebesar 45 derajat.
scale-150: Menskalakan elemen sebesar 150%.
translate-x-4: Menerjemahkan elemen sebesar 1rem (16px) ke kanan.

4.10 Filter

Tailwind CSS menyediakan serangkaian lengkap kelas utilitas untuk menerapkan filter ke elemen Anda. Anda dapat menggunakan kelas-kelas ini untuk menambahkan blur, kontras, dan efek lainnya.

Beberapa contoh kelas filter:

blur-sm: Menambahkan blur kecil ke elemen.
contrast-150: Meningkatkan kontras elemen sebesar 150%.
grayscale: Menerapkan efek skala abu-abu ke elemen.

5. Kustomisasi Tailwind CSS

5.1 File `tailwind.config.js`

File tailwind.config.js adalah jantung dari kustomisasi Tailwind CSS. Ini adalah tempat Anda dapat menyesuaikan tema default, menambahkan utilitas Anda sendiri, dan menggunakan plugin.

File tailwind.config.js harus diekspor sebagai objek JavaScript. Objek ini dapat berisi properti berikut:

content: Menentukan file mana yang harus dipindai Tailwind CSS untuk kelas utilitas.
theme: Digunakan untuk menyesuaikan tema default Tailwind CSS.
plugins: Digunakan untuk menambahkan plugin Tailwind CSS.
darkMode: Mengaktifkan atau menonaktifkan mode gelap.

5.2 Menyesuaikan Tema (Warna, Tipografi, Penspasian, dll.)

Anda dapat menyesuaikan tema default Tailwind CSS dengan memodifikasi properti theme di file tailwind.config.js Anda. Properti theme adalah objek yang dapat berisi properti berikut:

colors: Menyesuaikan palet warna.
fontFamily: Menyesuaikan daftar font yang tersedia.
fontSize: Menyesuaikan ukuran font.
fontWeight: Menyesuaikan berat font.
lineHeight: Menyesuaikan tinggi baris.
letterSpacing: Menyesuaikan jarak antar huruf.
spacing: Menyesuaikan nilai margin dan padding.
borderRadius: Menyesuaikan radius border.
boxShadow: Menyesuaikan bayangan kotak.

Untuk menyesuaikan tema default, Anda dapat menggunakan properti extend di dalam properti theme. Properti extend memungkinkan Anda untuk menambahkan nilai baru ke tema default tanpa harus menggantinya sepenuhnya.

Misalnya, untuk menambahkan warna kustom ke palet warna, Anda dapat menggunakan kode berikut:

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      colors: {
        'custom-blue': '#1e3a8a',
      },
    },
  },
  plugins: [],
}

Setelah Anda menambahkan warna kustom, Anda dapat menggunakannya di HTML Anda seperti ini:

<div class="bg-custom-blue">
  Ini adalah kotak biru kustom.
</div>

5.3 Menambahkan Utilitas Kustom

Anda dapat menambahkan utilitas kustom Anda sendiri ke Tailwind CSS dengan menggunakan properti addComponents, addUtilities, dan addVariants di dalam plugin Tailwind CSS.

Untuk menambahkan utilitas kustom, Anda perlu membuat plugin Tailwind CSS. Plugin Tailwind CSS adalah fungsi JavaScript yang menerima fungsi addBase, addComponents, addUtilities, dan addVariants sebagai argumen.

Fungsi addUtilities digunakan untuk menambahkan kelas utilitas baru ke Tailwind CSS.

Misalnya, untuk menambahkan utilitas kustom yang mengatur ukuran font menjadi 2rem, Anda dapat menggunakan kode berikut:

const plugin = require('tailwindcss/plugin')

module.exports = {
  plugins: [
    plugin(function({ addUtilities }) {
      addUtilities({
        '.text-2xl': {
          'font-size': '2rem',
        }
      })
    })
  ]
}

Setelah Anda menambahkan utilitas kustom, Anda dapat menggunakannya di HTML Anda seperti ini:

<p class="text-2xl">
  Ini adalah paragraf dengan ukuran font 2rem.
</p>

5.4 Menambahkan Komponen Kustom

Anda dapat menambahkan komponen kustom Anda sendiri ke Tailwind CSS dengan menggunakan properti addComponents di dalam plugin Tailwind CSS.

Fungsi addComponents digunakan untuk menambahkan kelas komponen baru ke Tailwind CSS.

Misalnya, untuk menambahkan komponen kustom yang membuat tombol dengan gaya default, Anda dapat menggunakan kode berikut:

const plugin = require('tailwindcss/plugin')

module.exports = {
  plugins: [
    plugin(function({ addComponents }) {
      const buttons = {
        '.btn': {
          padding: '.5rem 1rem',
          borderRadius: '.25rem',
          fontWeight: '600',
        },
        '.btn-primary': {
          backgroundColor: '#3b82f6',
          color: '#fff',
          '&:hover': {
            backgroundColor: '#2563eb',
          },
        },
      }

      addComponents(buttons)
    })
  ]
}

Setelah Anda menambahkan komponen kustom, Anda dapat menggunakannya di HTML Anda seperti ini:

<button class="btn btn-primary">
  Tombol Utama
</button>

5.5 Menggunakan Plugin

Tailwind CSS memiliki banyak plugin yang tersedia yang dapat Anda gunakan untuk memperluas fungsionalitasnya. Beberapa plugin populer termasuk:

@tailwindcss/forms: Menyediakan gaya default untuk elemen formulir.
@tailwindcss/typography: Menyediakan kelas untuk menambahkan gaya tipografi ke konten Anda.
@tailwindcss/aspect-ratio: Menyediakan kelas untuk mengontrol rasio aspek elemen Anda.
@tailwindcss/line-clamp: Menyediakan kelas untuk membatasi jumlah baris teks yang ditampilkan.

Untuk menggunakan plugin, Anda perlu menginstalnya melalui npm atau Yarn:

npm install -D @tailwindcss/forms

Kemudian, Anda perlu menambahkan plugin ke file tailwind.config.js Anda:

/** @type {import('tailwindcss').Config} */
module.exports = {
  plugins: [
    require('@tailwindcss/forms'),
  ],
}

6. Komponen dengan Tailwind CSS

6.1 Membuat Tombol

Berikut cara membuat tombol menggunakan Tailwind CSS:

<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
  Tombol
</button>

Kelas-kelas ini melakukan hal berikut:

bg-blue-500: Mengatur warna latar belakang menjadi biru.
hover:bg-blue-700: Mengubah warna latar belakang menjadi biru yang lebih gelap saat kursor diarahkan di atasnya.
text-white: Mengatur warna teks menjadi putih.
font-bold: Membuat teks menjadi tebal.
py-2: Menambahkan padding vertikal sebesar 0.5rem (8px).
px-4: Menambahkan padding horizontal sebesar 1rem (16px).
rounded: Membulatkan sudut border.

6.2 Membuat Kartu

Berikut cara membuat kartu menggunakan Tailwind CSS:

<div class="max-w-sm rounded overflow-hidden shadow-lg">
  <img class="w-full" src="/img/card-top.jpg" alt="Sunset in the mountains">
  <div class="px-6 py-4">
    <div class="font-bold text-xl mb-2">The Coldest Sunset</div>
    <p class="text-gray-700 text-base">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia, nulla! Maiores et perferendis eaque, exercitationem praesentium nihil.
    </p>
  </div>
  <div class="px-6 pt-4 pb-2">
    <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">#photography</span>
    <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">#travel</span>
    <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">#winter</span>
  </div>
</div>