Tailwind CSS Unveiled: Simplifying Web Styling with Practical Utility Classes

Published in

Amikom Computer Club

5 min readMar 4, 2024

Halo genkssssss🙌
Di pertemuan ke-4 ini kita akan mempelajari sebuah framework yaitu Tailwind CSS. Hayooooo apa itu Tailwind, oke mari kita mulaiii 🚀🚀(logat Sisca Kohl)

Table of Content
1. Pengertian Tailwind
2. Keuntungan Menggunakan Tailwind CSS
3. Instalasi dan Konfigurasi
4. Utility Classes
5. Pseudo Class
6. Group

Sebelum membahas Tailwind CSS, mari pahami terlebih dahulu apa itu framework. Dalam konteks pengembangan web, framework adalah kerangka kerja atau struktur dasar yang menyediakan aturan, konvensi, dan alat-alat yang membantu pengembang dalam membangun dan merancang situs web atau aplikasi. Framework bertujuan untuk mempermudah web developer dalam pengembangan menulis baris kode.

Apa sih Tailwind CSS itu?

Jadi Tailwind CSS adalah sebuah framework CSS yang dikembangkan untuk memudahkan pembuatan antarmuka pengguna (UI) dalam pengembangan web. Selain Tailwind masih ada framework CSS lain, seperti Bootstrap, Foundation, Bulma dan masih banyak lagi.

Keuntungan menggunakan Tailwind CSS
Ada banyak keuntungan di Tailwind CSS, yaitu sebagai berikut:

Sederhana dan mudah dipahami
Tailwind menyediakan Utility Classes yang mudah dimengerti, seperti “bg-blue-500” untuk warna biru. Ini membuatnya sangat sederhana dan mudah dipahami, bahkan untuk pemula sekalipun.
Peningkatan kecepatan pengembangan
Dengan menggunakan Utility Classes, pengembang dapat membuat desain dengan cepat tanpa perlu menulis banyak kode CSS. Hal ini dapat menghemat waktu dan mengurangi kompleksitas proyek temen-temen.
Fleksibilitas dan kustomisasi
Tailwind memberikan fleksibilitas yang tinggi. Meskipun menggunakan Utility Classes, pengembang bisa melakukan kustomisasi dengan menyesuaikan konfigurasi atau menambahkan kelas-kelas khusus.
Responsif secara alami
Tailwind mendukung desain responsif secara alami dengan menyediakan kelas-kelas untuk berbagai ukuran layar. Hal ini mempermudah pengembang untuk membuat tata letak yang responsif tanpa menulis banyak kode tambahan.
Ringan dan efisien
Tailwind menghasilkan file CSS yang lebih kecil daripada beberapa framework CSS lainnya. Ini dapat meningkatkan kecepatan pemuatan halaman dan efisiensi penggunaan bandwidth.

Instalasi dan Konfigurasi Tailwind

CDN
Instalasi Tailwind dengan CDN sangatlah mudah, hanya dengan menambahkan kode di file html, selesai dehh! 🚀

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

Konfigurasi Tailwind CSS dengan CDN
Untuk mengedit objek tailwind.config dan menyesuaikannya dengan token desainmu sendiri, kamu dapat menggunakan berbagai properti yang disediakan oleh Tailwind CSS. Berikut adalah contoh pengaturan dasar yang dapat kamu masukkan ke dalam section head HTML kita

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

Custom Utilily

Kita dapat memanfaatkan semua fitur yang disediakan oleh Tailwind CSS, seperti Custom Utilily. Untuk melakukannya, cukup tambahkan baris kode berikut ke section head HTML kita.

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

NPM

Install Tailwind CSS melalui npm
Dengan menggunakan perintah

npm install -D tailwindcss

2. Buat file konfigurasi Tailwind

Setelah instalasi, langkah selanjutnya adalah membuat file konfigurasi Tailwind. File ini berguna untuk menyesuaikan setting Tailwind sesuai dengan kebutuhan proyek. Untuk membuat file konfigurasi, eksekusi perintah berikut:

npx tailwindcss init

Perintah diatas akan menghasilkan file tailwind.config.js

3. Siapkan file CSS

Kamu perlu membuat file CSS khusus untuk Tailwind. Buat file dengan nama apapun sesuai kebutuhan (misalnya style.css) dan tambahkan baris berikut di file yang baru kita buat

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

4. Kompilasi file CSS
Setelah menyiapkan file CSS, kamu harus mengompilasinya menjadi file CSS akhir yang akan digunakan di website. Jalankan perintah berikut di terminal:

npx tailwindcss build styles.css -o output.css

5. Sertakan CSS ke dalam proyek web
Langkah terakhir yang harus dilakukan adalah menyertakan file CSS ke dalam file HTML, dengan menambahkan tag <link> seperti berikut

<link href="/path/to/your/output.css" rel="stylesheet">

Pastikan untuk mengganti /path/to/your/ dengan directory path sesuai tempat file output.css berada.

Utility Classes pada Tailwind CSS

Dalam dunia pengembangan web, Tailwind CSS telah menghadirkan pendekatan inovatif dengan memperkenalkan ide baru yang disebut “utility classes”. Apa yang dimaksud dengan utility classes? Dan bagaimana penggunaannya untuk mempermudah proses styling? Lets go kita telusuri lebih lanjut🚀.

Utility classes adalah kelas-kelas kecil yang menyediakan gaya dan tata letak pada elemen HTML secara langsung. Ini adalah konsep dalam pengembangan web dengan menggunakan kelas-kelas kecil untuk memberikan gaya langsung ke elemen, tanpa perlu menulis banyak kode CSS terpisah.

Keuntungan dari utility classes adalah kemudahan penggunaan dan fleksibilitas. teman-teman tidak perlu membuat aturan CSS tambahan dalam file terpisah, dan dapat mengubah gaya elemen dengan cepat hanya dengan menambahkan atau menghapus kelas-kelas utilitas di dalam HTML.

Cara menggunakan utility classes: Menggunakan utility classes di Tailwind sangatlah mudah. Sebagai contoh, membuat kotak dengan background color biru, teks putih dan pading 4.

<div class="bg-blue-500 text-white p-4">
  Ini adalah elemen dengan latar belakang biru, teks putih, dan padding 4.
</div>

contoh penggunaan kustomisasi dan responsif

<div class="lg:flex lg:justify-between">
  <!-- Tampilan ini hanya muncul pada layar besar (lg) -->
</div>

<p class="text-sm md:text-lg lg:text-xl">
  <!-- Ukuran teks akan berubah sesuai dengan ukuran layar -->
</p>

Pseudo Class

Pseudo-class digunakan untuk mengatur tampilan atau gaya suatu elemen HTML pada kondisi atau state tertentu. Pseudo-class ditandai dengan tanda titik dua : diikuti oleh nama pseudo-class. Beberapa contoh pseudo-class umum melibatkan interaksi pengguna seperti :hover untuk saat elemen dihover, :focus untuk saat elemen mendapat fokus, dan :active untuk saat elemen sedang dalam keadaan aktif (diklik).

Sebagai contoh, kita dapat memodifikasi warna teks pada suatu tautan ketika mouse berada di atasnya dengan menggunakan properti CSS saat mengarahkan kursor (hover).

<a href="#" class="text-blue-500 hover:text-red-500">Pertemuan 4</a>

Group pada Tailwind

Dalam Tailwind CSS, kelas group digunakan untuk menangani kasus di mana ketika kita ingin menerapkan gaya pada elemen induk (parent) berdasarkan interaksi pada elemen anak (child).

<div class="group">
      <p class="text-gray-500 group-hover:text-black">Pertemuan 4</p>
      <button
        class="bg-blue-500 hover:bg-blue-700 text-white py-2 px-4 rounded"
      >
        Klik Disini
      </button>
    </div>

Kesimpulan:

Dalam pertemuan 4 kali ini, kita menjelajahi Tailwind CSS, sebuah framework CSS yang memperkenalkan pendekatan baru dalam pembuatan antarmuka pengguna (UI) dengan konsep “utility classes”.

Langkah-langkah instalasi dan konfigurasi awal Tailwind CSS melalui CDN dan NPM telah dijelaskan dengan jelas, memungkinkan kita untuk mengintegrasikan framework ini ke dalam proyek web dengan mudah.

Utility classes, Responsif, Pseudo class, dan Group juga sudah dijelaskan dengan jelas. Jadi kesimpulannya, Tailwind CSS itu keren, gampang dipahami, dan bikin styling jadi party! 🎉

Oke, sampai jumpa di pertemuan selanjutnya!

AMCC
Learning By Doing, Learning By Teaching