Apa itu Tailwind CSS

Tailwind CSS adalah kerangka kerja CSS tingkat rendah yang berfokus pada utilitas, yang menyediakan kelas utilitas yang sangat dapat dikomposisikan dan dapat disesuaikan untuk membangun antarmuka pengguna modern. Berbeda dengan kerangka kerja CSS tradisional seperti Bootstrap atau Foundation yang menyediakan komponen yang telah dirancang sebelumnya, Tailwind memungkinkan pengembang untuk membuat desain yang unik tanpa meninggalkan file HTML.

Pendekatan Utility-First

Pendekatan utility-first adalah prinsip inti di balik Tailwind CSS. Dalam penulisan CSS tradisional, kita cenderung membuat kelas atau ID khusus untuk elemen HTML dan mendefinisikan gaya mereka dalam file CSS terpisah. Namun, hal ini dapat mengakibatkan file gaya yang besar dan sulit diatur, serta terjadi ketidaksesuaian antara HTML dan CSS.

Sebaliknya, pendekatan utility-first mendorong untuk menggabungkan gaya langsung dalam markup HTML menggunakan kelas utilitas. Setiap kelas utilitas dalam Tailwind sesuai dengan pasangan properti-nilai CSS tertentu. Misalnya, kelas text-center menerapkan aturan CSS { text-align: center; }. Begitu pula, bg-blue-500 menerapkan warna biru tertentu sebagai warna latar belakang, yang sesuai dengan { background-color: #3b82f6; }.

Pendekatan utility-first memiliki beberapa keuntungan:

• Prototyping yang lebih cepat
  Anda dapat dengan cepat membuat prototipe desain langsung dalam markup Anda tanpa harus beralih antara file HTML dan CSS.

• Pemeliharaan yang lebih baik
  Dengan semua gaya yang diterapkan pada tingkat komponen, risiko gaya saling bentrok antara bagian yang berbeda dalam aplikasi Anda dapat dikurangi.

• Customisasi tinggi
  Anda dapat menyesuaikan desain setiap komponen secara langsung, sehingga menghasilkan desain yang lebih unik dan fleksibel.

Menyiapkan Tailwind CSS

Menyiapkan Tailwind CSS dalam proyek Anda adalah proses yang sederhana dan melibatkan beberapa langkah kunci:

1. Pemasangan
   Tailwind CSS tersedia sebagai paket npm. Untuk menginstalnya, Anda memerlukan Node.js dan npm terpasang di mesin Anda. Anda dapat menambahkan Tailwind CSS ke proyek Anda dengan menjalankan perintah npm install tailwindcss.

2. Membuat Berkas Konfigurasi
   Setelah menginstal, Anda dapat menghasilkan berkas konfigurasi default (tailwind.config.js) untuk proyek Anda menggunakan perintah npx tailwindcss init. Berkas konfigurasi ini adalah tempat Anda akan menyesuaikan pengaturan default Tailwind, menambahkan utilitas baru, dan mengendalikan pembuatan varian.

3. Mengimpor Tailwind dalam CSS Anda
   Dalam berkas CSS Anda, Anda perlu menggunakan direktif @import untuk memasukkan gaya dasar, komponen, dan utilitas Tailwind. Contoh berkas CSS Anda mungkin terlihat seperti ini:

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

Utilitas Dasar Tailwind CSS

Tailwind CSS menyediakan berbagai kelas utilitas yang mencakup hampir setiap properti CSS yang Anda butuhkan untuk mengatur gaya elemen HTML Anda. Mari kita bahas beberapa utilitas ini.

Warna Latar Belakang

Tailwind CSS menyediakan beragam utilitas warna latar belakang. Anda dapat mengatur warna latar belakang suatu elemen menggunakan utilitas bg-{color}, di mana {color} adalah tempat penampung untuk warna yang ingin Anda terapkan.

Misalnya, jika Anda ingin mengatur warna latar belakang sebuah div menjadi biru, Anda dapat melakukannya seperti berikut:

<div class="bg-blue-500">
    This is a blue div.
</div>

Pada contoh di atas, bg-blue-500 mengatur warna latar belakang div menjadi warna biru tertentu. Tailwind CSS menyediakan palet warna yang luas, masing-masing dengan berbagai nuansa yang dapat digunakan.

Warna dan Ukuran Teks

Untuk mengatur warna teks, Anda dapat menggunakan utilitas text-{color}. Misalnya, untuk mengatur warna teks menjadi putih, Anda dapat melakukannya seperti berikut:

<div class="text-white">
    This is white text.
</div>

Untuk ukuran teks, Tailwind menyediakan sejumlah utilitas dalam format text-{size}. {size} dapat berupa xs, sm, base, lg, xl, 2xl, 3xl, 4xl, 5xl, atau 6xl. Misalnya, untuk membuat teks menjadi besar, Anda dapat menggunakan text-lg:

<div class="text-lg">
    This is large text.
</div>

Padding, Margin, dan Ruang

Tailwind CSS menyediakan sejumlah utilitas ruang dan tata letak yang komprehensif. Misalnya, untuk mengontrol padding di sekitar suatu elemen, Anda dapat menggunakan utilitas p-{size}.

<div class="p-4">
    This div has a padding size of 4.
</div>

Demikian pula, Anda dapat mengontrol margin di sekitar suatu elemen menggunakan utilitas m-{size}.

Selain itu, Tailwind memungkinkan Anda untuk mengontrol padding dan margin secara vertikal dan horizontal secara terpisah menggunakan utilitas px-{size}, py-{size}, mx-{size}, dan my-{size}. Anda juga dapat mengontrol sisi individu dengan pt-{size}, pr-{size}, pb-{size}, pl-{size}, mt-{size}, mr-{size}, mb-{size}, dan ml-{size}.

Referensi

https://tailwindcss.com/
https://tailwindcss.com/docs/installation