Mengenal TailwindCSS: Panduan untuk Pemula

Daftar Isi

Apa Itu TailwindCSS?
- Apa Itu Utility-First?
Cara Implementasi TailwindCSS dalam Web
Kelebihan TailwindCSS
Kekurangan TailwindCSS
Menggunakan TailwindCSS di VSCode
Kesimpulan

Apa Itu TailwindCSS?

TailwindCSS adalah framework CSS utility-first yang dirancang untuk mempercepat proses pengembangan front-end.

Dengan TailwindCSS, kamu dapat membuat tampilan yang elegan dan responsif dengan cepat tanpa harus menulis banyak kode CSS dari nol.

Framework ini menyediakan berbagai kelas utility yang dapat digunakan langsung dalam HTML untuk mengatur styling elemen.

Apa Itu Utility-First?

Pendekatan “utility-first” dalam CSS adalah metode penulisan CSS di mana kamu menggunakan kelas-kelas kecil yang sudah ditentukan untuk mengatur styling elemen HTML secara langsung.

Alih-alih menulis CSS khusus untuk setiap elemen atau komponen, kamu mengaplikasikan beberapa kelas utility yang masing-masing memiliki satu tujuan spesifik.

Contoh Pendekatan Tradisional vs Utility-First:

Pendekatan Tradisional

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Traditional CSS</title>
    <style>
        .header {
            font-size: 24px;
            font-weight: bold;
            color: blue;
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
    <h1 class="header">Hello, World!</h1>
</body>
</html>

Pada pendekatan tradisional, kamu menulis aturan CSS di dalam sebuah stylesheet terpisah atau di dalam tag

Pendekatan Utility-First dengan TailwindCSS

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Utility-First CSS</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
</head>
<body>
    <h1 class="text-3xl font-bold text-blue-500 mb-5">Hello, World!</h1>
</body>
</html>

Dalam pendekatan utility-first, kamu menggunakan kelas-kelas utility yang sudah ada untuk setiap properti CSS. Pada contoh ini, text-3xl mengatur ukuran font, font-bold mengatur ketebalan font, text-blue-500 mengatur warna teks, dan mb-5 mengatur margin bawah.

Cara Implementasi TailwindCSS dalam Web

Menggunakan CDN TailwindCSS

Cara termudah untuk mulai menggunakan TailwindCSS adalah dengan menambahkan link CDN di bagian dari file HTML-mu.

Contohnya:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
</head>
<body>
    <h1 class="text-3xl font-bold underline">Hello, TailwindCSS!</h1>
</body>
</html>

Menggunakan NPM TailwindCSS

Untuk proyek yang lebih besar dan kompleks, kamu bisa menginstal TailwindCSS melalui NPM. Caranya:

Pertama, pastikan kamu sudah menginstal Node.js dan npm.
Instal TailwindCSS dengan perintah berikut:

npm install tailwindcss

Buat file konfigurasi Tailwind dengan perintah:

npx tailwindcss init

Konfigurasikan TailwindCSS di file CSS kamu

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

Tambahkan skrip untuk build TailwindCSS di package.json

"scripts": {
    "build": "tailwindcss build src/styles.css -o dist/styles.css"
}

Jalankan perintah build

npm run build

Jika kamu mengalami kesulitan, kamu bisa melihat dokumentasi lengkap TailwindCSS pada halaman ini.

Menggunakan Framework atau Build Tools

Kamu juga bisa mengintegrasikan TailwindCSS dengan framework atau build tools seperti Next.js, Vue.js, atau Laravel.

Dokumentasi resmi TailwindCSS menyediakan panduan langkah demi langkah untuk setiap framework.

Kelebihan TailwindCSS

Utility-First

TailwindCSS menggunakan pendekatan utility-first yang memungkinkan kamu untuk menggunakan kelas-kelas utility untuk styling. Ini membuat kode CSS lebih modular dan mudah dikelola.

Customizable

Kamu dapat mengonfigurasi TailwindCSS sesuai kebutuhanmu dengan mengedit file konfigurasi. Termasuk warna, ukuran, dan breakpoint.

Responsive

TailwindCSS menyediakan kelas-kelas responsif yang memudahkan pembuatan desain yang adaptif di berbagai ukuran layar.

Performance

Dengan menggunakan PurgeCSS, kamu dapat menghapus kelas-kelas yang tidak digunakan dalam produksi, sehingga ukuran file CSS menjadi lebih kecil dan performa situs meningkat.

Kekurangan TailwindCSS

Verbosity

Kelas-kelas utility yang digunakan langsung di HTML dapat membuat kode menjadi lebih panjang dan sulit dibaca, terutama untuk pemula.

Learning Curve (Proses Belajar)

Bagi yang terbiasa dengan CSS tradisional, adaptasi ke TailwindCSS mungkin membutuhkan waktu. Karena mungkin belum terbiasa dengan keyword atau properties yang akan digunakan dalam CSS.

Custom Styling

Jika kamu memerlukan styling yang sangat spesifik dan kompleks, kamu mungkin perlu menulis CSS tambahan di luar kelas utility TailwindCSS.

Menggunakan TailwindCSS di VSCode

Karena class-nya yang sangat banyak kamu mungkin kesulitan untuk mengingat class apa saja yang ada pada Tailwind. Untuk mengatasi hal ini, kamu bisa menggunakan plugin pada VSCode, yaitu Tailwind CSS Intellisense.

Dokumentasinya bisa kamu lihat disini: https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss

Kesimpulan

TailwindCSS adalah pilihan yang sangat baik untuk developer web, terutama bagi pemula yang ingin mempercepat proses development dan memastikan konsistensi desain.

Meskipun ada beberapa kekurangan, manfaat yang ditawarkan oleh TailwindCSS, seperti modularitas, kemampuan kustomisasi, dan performa, membuatnya layak dipertimbangkan.

Dengan mempelajari dan memahami cara kerja TailwindCSS, kamu dapat membuat tampilan web yang profesional dan responsif dengan lebih efisien.