Tailwind CSS vs Bootstrap: Membuat Web yang Responsif

Di sini, saya akan membahas tentang dua framework CSS yang populer, yaitu Tailwind CSS dan Bootstrap. Saya akan menjelaskan apa itu Tailwind CSS dan Bootstrap, apa perbedaan dan persamaannya, serta bagaimana cara menggunakan keduanya untuk membuat web yang responsif.

¶Apa itu Tailwind CSS?

Tailwind CSS adalah framework CSS yang berbasis utility untuk membuat UI atau tampilan dari aplikasi web. Berbasis utility artinya Tailwind cuma terdiri dari 100% utility class dan nggak ada class komponen seperti Navbar, Button, Card, Modal, dll. Komponen-komponen ini kita buat sendiri dengan class utility.

Utility class adalah class yang memiliki satu fungsi spesifik, misalnya untuk mengatur margin, padding, warna, font, dll. Contohnya:

<div class="bg-blue-500 text-white p-4 rounded-lg">
    <h1 class="text-xl font-bold">Hello World</h1>
    <p class="text-sm">This is a simple example of using Tailwind CSS</p>
</div>

Di atas, kita menggunakan beberapa utility class untuk membuat sebuah div dengan background biru, teks putih, padding 4 unit, border radius besar, judul dengan ukuran xl dan font tebal, serta paragraf dengan ukuran kecil.

Kelebihan dari Tailwind CSS adalah kita bisa bebas mengkustomisasi tampilan web kita tanpa harus menulis kode CSS sama sekali. Kita hanya perlu menggunakan class-class yang sudah disediakan oleh Tailwind. Selain itu, Tailwind juga mendukung responsive design dengan mudah. Kita bisa menambahkan prefix seperti sm:, md:, lg:, atau xl: di depan nama class untuk mengatur tampilan di berbagai ukuran layar.

¶Apa itu Bootstrap?

Bootstrap adalah framework CSS yang berbasis komponen untuk membuat UI atau tampilan dari aplikasi web. Berbasis komponen artinya Bootstrap sudah menyediakan banyak class komponen yang siap pakai, seperti Navbar, Button, Card, Modal, dll.

Komponen adalah kumpulan dari beberapa elemen HTML yang sudah ditata dengan CSS untuk membentuk sebuah fungsi tertentu. Contohnya:

<div class="card">
    <img src="https://via.placeholder.com/150" class="card-img-top" alt="Gambar Card" />
    <div class="card-body">
        <h5 class="card-title">Judul Card</h5>
        <p class="card-text">Ini adalah contoh card menggunakan Bootstrap 5.</p>
        <a href="#" class="btn btn-primary">Lihat Detail</a>
    </div>
</div>

Di atas, kita menggunakan beberapa elemen HTML seperti div, img, h5, p, dan a untuk membuat sebuah card dengan gambar di atas, judul, teks, dan tombol di bawahnya. Kita juga menggunakan beberapa class komponen dari Bootstrap seperti card, card-img-top, card-body, card-title, card-text, dan btn untuk mengatur tampilan dari elemen-elemen tersebut.

Kelebihan dari Bootstrap adalah kita bisa membuat web yang profesional dan konsisten dengan cepat dan mudah. Kita hanya perlu menggunakan class-class yang sudah disediakan oleh Bootstrap tanpa harus menulis kode CSS sendiri. Selain itu, Bootstrap juga mendukung responsive design dengan sistem grid yang fleksibel. Kita bisa menggunakan class seperti col-, col-sm-, col-md-, col-lg-, atau col-xl- untuk mengatur lebar kolom di berbagai ukuran layar.

¶Perbedaan dan Persamaan antara Tailwind CSS dan Bootstrap

Tailwind CSS dan Bootstrap adalah dua framework CSS yang berbeda dalam pendekatan dan filosofi mereka. Berikut adalah beberapa perbedaan dan persamaan antara keduanya:

• Tailwind CSS lebih fleksibel dan kustomisasi daripada Bootstrap. Tailwind CSS memberikan kita kebebasan untuk membuat tampilan web sesuai dengan keinginan kita tanpa harus terikat dengan gaya atau desain yang sudah ditentukan oleh Bootstrap. Bootstrap lebih cocok untuk membuat web yang standar dan konsisten dengan gaya atau desain yang sudah umum digunakan.
• Tailwind CSS lebih ringan dan efisien daripada Bootstrap. Tailwind CSS hanya akan menambahkan class-class yang kita gunakan saja ke file CSS hasil build. Jadi, ukuran file CSS akan lebih kecil dan tidak akan ada kode CSS yang tidak terpakai. Bootstrap akan menambahkan semua class komponen ke file CSS hasil build, meskipun kita tidak menggunakannya. Jadi, ukuran file CSS akan lebih besar dan ada kemungkinan ada kode CSS yang tidak terpakai.
• Tailwind CSS dan Bootstrap sama-sama mendukung responsive design dengan mudah. Keduanya memiliki sistem class yang bisa digunakan untuk mengatur tampilan web di berbagai ukuran layar. Perbedaannya adalah Tailwind CSS menggunakan prefix seperti sm:, md:, lg:, atau xl: di depan nama class, sedangkan Bootstrap menggunakan class seperti col-, col-sm-, col-md-, col-lg-, atau col-xl- untuk mengatur lebar kolom.
• Tailwind CSS dan Bootstrap sama-sama memiliki dokumentasi yang lengkap dan mudah dipahami. Keduanya juga memiliki komunitas yang aktif dan ramah yang bisa membantu kita jika kita mengalami masalah atau kesulitan dalam menggunakan framework tersebut.

¶Cara Menggunakan Tailwind CSS

Untuk menggunakan Tailwind CSS , kita perlu menginstal dan mengkonfigurasi framework tersebut di proyek web kita. Kita juga perlu menulis kode HTML yang menggunakan class-class dari framework tersebut untuk membuat tampilan web kita. Berikut adalah langkah-langkahnya:

¶Menginstal dan Mengkonfigurasi Tailwind CSS

Untuk menginstal Tailwind CSS, ada beberapa cara yang bisa kita gunakan, seperti menggunakan CDN (Content Delivery Network), dan npm atau yarn. Di sini, saya akan menggunakan cara npm Untuk menginstal Tailwind CSS, kita perlu menggunakan Node.js dan npm (Node Package Manager). Jika kita belum menginstal Node.js dan npm, kita bisa mengikuti tutorial ini. Setelah itu, kita bisa membuat folder proyek kita dan masuk ke dalamnya dengan terminal atau command prompt. Contohnya:

mkdir tailwind-project
cd tailwind-project

Kemudian, kita bisa menginisialisasi proyek npm dengan perintah:

npm init -y

Perintah ini akan membuat file package.json yang berisi informasi tentang proyek kita. Selanjutnya, kita bisa menginstal Tailwind CSS dengan perintah:

npm install tailwindcss

Perintah ini akan menambahkan Tailwind CSS sebagai dependensi di file package.json dan juga membuat folder node_modules yang berisi file-file dari Tailwind CSS. Setelah itu, kita bisa membuat file konfigurasi Tailwind CSS dengan perintah:

npx tailwindcss init

Perintah ini akan membuat file tailwind.config.js yang berisi pengaturan dasar dari Tailwind CSS. Kita bisa mengubah pengaturan ini sesuai dengan kebutuhan kita, misalnya untuk menambahkan warna, font, atau class baru. Selanjutnya, kita bisa membuat file CSS utama kita, misalnya dengan nama style.css. Di dalam file ini, kita bisa menambahkan kode berikut:

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

Kode ini akan mengimpor semua class utility dari Tailwind CSS ke file CSS kita. Terakhir, kita bisa memproses file CSS kita dengan Tailwind CSS dengan perintah:

npx tailwindcss -i style.css -o output.css --watch

Perintah ini akan mengambil file style.css sebagai input, menghasilkan file output.css sebagai output, dan juga mengawasi perubahan pada file input. File output.css inilah yang nantinya akan kita sertakan di file HTML kita.

Untuk menggunakan CDN, kita hanya perlu menambahkan tag link di bagian head dari file HTML kita. Tambahkan tautan (link) ke stylesheet Tailwind CSS menggunakan CDN. Ini akan mengambil kode CSS Tailwind dari server eksternal dan memuatnya ke halaman Anda. Berikut contohnya:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://cdn.tailwindcss.com"></script>
  </head>

  <body>
    <h1 class="text-3xl font-bold underline">Hello world!</h1>
  </body>
</html>

Anda bisa menyesuaikan versi Tailwind CSS yang ingin Anda gunakan dengan mengganti nomor versi dalam tautan di atas.

¶Menulis Kode HTML dengan Tailwind CSS

Setelah kita menginstal dan mengkonfigurasi Tailwind CSS, kita bisa mulai menulis kode HTML yang menggunakan class-class dari framework tersebut untuk membuat tampilan web kita. Di sini, saya akan memberikan contoh sederhana untuk membuat web yang responsif dengan Tailwind CSS.

¶Membuat Header dengan Tailwind CSS

Header adalah bagian atas dari web yang biasanya berisi logo, nama, atau navigasi. Untuk membuat header dengan Tailwind CSS, kita bisa menggunakan elemen div dengan class flex, items-center, justify-between, bg-gray-800, p-4, dan text-white. Class-class ini akan membuat div menjadi flexbox yang menata elemen-elemennya secara horizontal, rata kiri dan kanan, dengan background abu-abu gelap, padding 4 unit, dan teks putih. Contohnya:

<div class="flex items-center justify-between bg-gray-800 p-4 text-white">
    <!-- Logo -->
    <div class="flex items-center">
        <img src="logo.png" alt="Logo" class="h-8 mr-2" />
        <span class="text-xl font-bold">Tailwind CSS</span>
    </div>
    <!-- Navigasi -->
    <div class="flex items-center">
        <a href="#" class="px-4 py-2 hover:bg-gray-700">Home</a>
        <a href="#" class="px-4 py-2 hover:bg-gray-700">About</a>
        <a href="#" class="px-4 py-2 hover:bg-gray-700">Contact</a>
    </div>
</div>

Di dalam div header, kita membuat dua div lagi untuk logo dan navigasi. Untuk logo, kita menggunakan elemen img dengan class h-8 dan mr-2 untuk mengatur tinggi gambar menjadi 8 unit dan memberikan margin kanan 2 unit. Untuk nama web, kita menggunakan elemen span dengan class text-xl dan font-bold untuk membuat teks berukuran xl dan tebal.

Untuk navigasi, kita menggunakan elemen a dengan class px-4, py-2, dan hover:bg-gray-700 untuk membuat link dengan padding horizontal 4 unit, padding vertikal 2 unit, dan background abu-abu gelap saat di-hover.

¶Membuat Footer dengan Tailwind CSS

Footer adalah bagian bawah dari web yang biasanya berisi informasi tambahan atau kredit. Untuk membuat footer dengan Tailwind CSS, kita bisa menggunakan elemen div dengan class flex, items-center, justify-center, bg-gray-800, p-4, dan text-white. Class-class ini akan membuat div menjadi flexbox yang menata elemen-elemennya secara horizontal, rata tengah, dengan background abu-abu gelap, padding 4 unit, dan teks putih. Contohnya:

<div class="flex items-center justify-center bg-gray-800 p-4 text-white">
    <!-- Teks -->
    <span>© 2023 by Tailwind vs Bootstrap. All rights reserved.</span>
</div>

Di dalam div footer, kita membuat elemen span untuk menampilkan teks kredit.

¶Cara Menggunakan Bootstrap

Untuk menggunakan Bootstrap, kita perlu menginstal dan mengkonfigurasi framework tersebut di proyek web kita. Kita juga perlu menulis kode HTML yang menggunakan class-class dari framework tersebut untuk membuat tampilan web kita. Berikut adalah langkah-langkahnya:

¶Menginstal dan Mengkonfigurasi Bootstrap

Untuk menginstal Bootstrap, ada beberapa cara yang bisa kita gunakan, seperti menggunakan CDN (Content Delivery Network), npm, atau download manual. Di sini, saya akan menggunakan cara CDN dan NPM.

Untuk melanjutkan artikel, saya akan menjelaskan cara menggunakan CDN dan NPM untuk menginstal Bootstrap. Pertama saya akan menggunakan cara npm Untuk menginstal Bootstrap, kita perlu menggunakan Node.js dan npm (Node Package Manager). Pastikan Anda memiliki Node.js dan NPM terinstal di komputer Anda. Jika belum, Anda dapat mengunduh dan menginstalnya dari situs resmi Node.js.

Buka terminal atau command prompt Anda.

Buat direktori (folder) untuk proyek Anda, atau gunakan direktori yang sudah ada.

Di terminal, navigasikan ke direktori proyek Anda dengan perintah cd /path/to/your/project.

Sekarang, jalankan perintah berikut untuk menginstal Bootstrap secara lokal di proyek Anda:

npm install bootstrap

Setelah proses instalasi selesai, Bootstrap akan tersedia dalam folder node_modules di direktori proyek Anda.

Kedua menggunakan CDN, CDN adalah jaringan server yang menyimpan file-file dari Bootstrap di berbagai lokasi di dunia. Dengan menggunakan CDN, kita bisa mengakses file-file tersebut dengan cepat dan mudah tanpa harus mengunduh atau menginstalnya di komputer kita.Untuk menggunakan CDN, kita hanya perlu menambahkan dua tag link di bagian head dari file HTML kita. Tag link pertama untuk menghubungkan file CSS dari Bootstrap, dan tag link kedua untuk menghubungkan file JavaScript dari Bootstrap. Contohnya:

<head>
    <!-- ... -->
    <!-- Bootstrap CDN -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" />
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>

Dengan menambahkan tag link ini, kita sudah bisa menggunakan class-class komponen dari Bootstrap di file HTML kita.

¶Menulis Kode HTML dengan Bootstrap

Setelah kita menginstal dan mengkonfigurasi Bootstrap, kita bisa mulai menulis kode HTML yang menggunakan class-class dari framework tersebut untuk membuat tampilan web kita. Di sini, saya akan memberikan contoh sederhana untuk membuat web yang responsif dengan Bootstrap.

¶Membuat Main dengan Bootstrap

Main adalah bagian tengah dari web yang biasanya berisi konten utama. Untuk membuat main dengan Bootstrap, kita bisa menggunakan elemen div dengan class container dan mt-4. Class-class ini akan membuat div menjadi kontainer yang menata elemen-elemennya secara terpusat dan memberikan margin atas 4 unit. Contohnya:

<div class="container mt-4">
    <!-- Judul -->
    <h1 class="text-center">
        Tailwind CSS vs Bootstrap: Cara Menggunakan Keduanya untuk Membuat Web yang
        Responsif
    </h1>
    <!-- Konten -->
    <div class="row">
        <!-- Kolom kiri -->
        <div class="col-md-6">
            <!-- Paragraf -->
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quis leo
                quis lorem aliquet fringilla. Quisque vitae lorem quis nisi lacinia
                tincidunt. Morbi id nisl sit amet nisl ullamcorper sagittis.
            </p>
            <!-- Gambar -->
            <img src="tailwind.png" alt="Tailwind" class="img-fluid" />
        </div>
        <!-- Kolom kanan -->
        <div class="col-md-6">
            <!-- Paragraf -->
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quis leo
                quis lorem aliquet fringilla. Quisque vitae lorem quis nisi lacinia
                tincidunt. Morbi id nisl sit amet nisl ullamcorper sagittis.
            </p>
            <!-- Gambar -->
            <img src="bootstrap.png" alt="Bootstrap" class="img-fluid" />
        </div>
    </div>
</div>

Di dalam div main, kita membuat elemen h1 dengan class text-center untuk membuat judul dengan teks rata tengah. Kemudian, kita membuat div dengan class row untuk membuat baris yang bisa dibagi menjadi beberapa kolom. Di dalam div row, kita membuat dua div dengan class col-md-6 untuk membuat dua kolom yang masing-masing memiliki lebar 50% di layar medium ke atas dan 100% di layar kecil ke bawah.

Di dalam masing-masing kolom, kita membuat elemen p untuk membuat paragraf dan elemen img dengan class img-fluid untuk membuat gambar yang menyesuaikan lebar kontainernya.

¶Kesimpulan

Tailwind CSS dan Bootstrap adalah dua framework CSS yang populer untuk membuat UI atau tampilan dari aplikasi web. Keduanya memiliki kelebihan dan kekurangan masing-masing, tergantung pada kebutuhan dan preferensi kita. Kita bisa menggunakan keduanya secara bersamaan untuk membuat web yang responsif dengan mudah dan cepat.

Semoga artikel ini bermanfaat dan membantu Anda dalam belajar Tailwind CSS dan Bootstrap.Terima kasih telah membaca artikel ini. 😊