Crafting Website from Figma Design with Tailwind CSS

Semua Kebagian Giliran

Waktu magang di Inatechno Training Center, ada satu aturan yang berlaku buat semua peserta: minimal sekali, kamu harus berdiri di depan sebagai pemateri workshop. Jadwalnya digilir setiap minggu, jadi tidak ada yang bisa kabur dari giliran. Selain jadi pemateri, kami juga bergantian mengisi berbagai divisi, mulai dari tim produksi, media sosial, sampai marketing, supaya semua orang tahu rasanya bekerja di posisi yang berbeda-beda.

Kenapa Tailwind, Bukan yang Lain

Pas giliran saya tiba, saya memilih membawakan materi Tailwind CSS. Alasannya sebenarnya sederhana. Waktu itu saya sendiri sedang serius belajar framework ini, dan rasanya sayang kalau ilmu yang baru saja nyangkut di kepala tidak langsung dibagikan. Selain itu, kebanyakan teman-teman masih lebih akrab dengan Bootstrap, jadi saya ingin memperkenalkan alternatif yang menurut saya lebih fleksibel untuk membangun antarmuka website.

Dua Sesi, Satu Landing Page

Materinya saya bagi jadi dua bagian. Sesi pertama berisi pengenalan Tailwind CSS: konsep utility-first dan bagaimana alur kerjanya sehari-hari. Setelah itu langsung lanjut ke praktik, di mana peserta membuat sebuah landing page portfolio sederhana berdasarkan desain dari Figma menggunakan Tailwind. Di tengah sesi tentu ada beberapa kendala teknis, tapi jujur saja itu sudah seperti bumbu wajib di setiap workshop. Untungnya semuanya masih bisa diatasi tanpa mengganggu jalannya acara sampai selesai.

Yang Saya Harapkan

Lebih dari sekadar mengenal Tailwind CSS, saya berharap teman-teman jadi sedikit lebih berani. Berani mencoba framework baru, dan berani menerapkannya di proyek mereka sendiri tanpa harus menunggu merasa cukup jago dulu. Kalau setelah workshop itu ada satu dua orang yang penasaran lalu iseng ngoprek Tailwind di rumah, buat saya itu sudah lebih dari cukup.