Dokumentasi dan Ekosistem

Pendekatan yang baik dalam belajar Tailwind adalah bukan dengan membaca seluruh isi dokumentasi teknisnya, melainkan dengan memahami secara konseptual bagaimana Tailwind bekerja. Setelah memahaminya, kemudian dapat dilanjut dengan praktik membuat visual komponen sambil bolak-balik membaca dokumentasi dari setiap class-class yang digunakan (seperti yang dilakukan pada bab Komponen Pertama). Sebab, Tailwind hanyalah abstraksi dari konsep fundamental CSS yang dibangun atas metodologi atomic. Ini berarti, memahami CSS sama saja memahami Tailwind, bukan sebaliknya.

Membaca Dokumentasi

Apa saja yang dibahas dalam materi belajar ini, tentu saja, berdasarkan dokumentasi resmi Tailwind. Namun, tidak semua materi di dalamnya dibahas dalam materi belajar ini. Oleh karena itu, sangat dianjurkan untuk selalu membaca dokumentasi resmi Tailwind untuk mendapatkan referensi yang lebih lengkap dan mutakhir.

Membaca dokumentasi Tailwind sama saja seperti membaca dokumentasi framework pada umumnya. Faktanya, dokumentasi Tailwind sangat mudah digunakan dan juga dipahami. Sebagai contoh, bila kita menggunakan class padding, kita dapat mencari referensinya di dokumentasi Tailwind melalui fitur pencariannya:

1. Pergi ke dokumentasi Tailwind di https://tailwindcss.com (opens in a new tab)
2. Klik tombol "Quick Search" atau dengan menekan tombol kombinasi CTRL+K (CMD+K di macOS)
3. Cari dengan kata kunci yang spesifik, misal, "padding"
4. Kita akan dibawa ke halaman referensi yang lebih lengkap tentang class atau fitur tersebut

Di halaman referensi class, umumnya terdiri dari beberapa bagian:

• Tabel referensi
• Contoh penggunaan
• Penerapan secara kondisional
• Menggunakan nilai kustom

Tabel Referensi

Bagian ini dapat digunakan untuk referensi cepat. Misal, kita hendak mencari tahu daftar class untuk padding. Seperti yang dapat dilihat, sebelah kiri adalah class Tailwind dan sebelah kanan merupakan kode CSS untuk class tersebut.

Contoh Penggunaan

Bagian ini akan menunjukkan contoh kasus yang bermanfaat dengan visualisasi yang ciamik. Seperti yang dapat dilihat, pada contoh gambar di atas sedang menunjukkan perbedaan antara nilai padding yang berbeda.

Penerapan Kondisional

Bagian ini memberi petunjuk soal bagaimana menggunakan class secara kondisional melalui modifier state, seperti hover:, focus:, atau responsive modifier.

Mengatur Nilai Kustom

Bagian ini memberi panduan menyesuaikan nilai kustom untuk class tersebut melalui fail konfigurasi atau fitur arbitrary values.

Ekosistem

Tailwind memiliki ekosistem yang besar, mulai dari komunitas, sumber daya belajar, dan proyek sumber terbuka pihak ketiga yang berkaitan dengan Tailwind. Semua material tersebut biasanya dapat diakses melalui repository awesome-tailwindcss (opens in a new tab).

Selain itu, bila hendak mendapatkan pembaruan mengenai proyek Tailwind, bisa ikuti akun Twitter pencipta Tailwind dan akun proyeknya itu sendiri:

• Adam Wathan (opens in a new tab)
• Tailwind CSS (opens in a new tab)