Skodev
Belajar coding dalam bahasa Indonesia
Tahun baru, skill baru! 🚀. Masukkan kupon "skill2025" untuk diskon 30% di kelas apa saja
Skodev
Belajar coding dalam bahasa Indonesia
Daftar Isi:
Sudah berapa kali kamu membuat website dan harus memikirkan nama kelas yang cocok untuk komponen HTMLnya? belum lagi kalau websitenya berkembang, kamu harus mengingat dan menciptakan nama kelas baru lagi.
Tenang saja! sekarang ada tailwind css, di awal kamu akan merasa aneh, tapi setelah lama menggunakannya kamu bisa merasakan mengembangkan desain website tanpa perlu berganti ganti halaman html dan css karena tailwind menyediakan berbagai kelas yang siap kita pakai tanpa nama yang aneh dan spesifik.
Tailwind CSS adalah framework CSS (Cascading Style Sheets) yang dianggap unik karena menggunakan pendekatan “utility-first” untuk styling.
Dibandingkan dengan framework CSS lain seperti Bootstrap atau Foundation yang biasanya menyediakan komponen siap pakai (seperti button, navbar, dll), Tailwind memungkinkan pengembang untuk membuat desain mereka sendiri menggunakan class kecil yang melakukan fungsi tertentu.
Ini beberapa konsep dasar dari Tailwind CSS yang perlu kamu tahu
Dengan Tailwind CSS, Anda mendapatkan sekumpulan class utility untuk membangun desain Anda. Class ### ini memetakan secara langsung ke atribut CSS tertentu (seperti text-center untuk text-align center; atau bg-red-500 untuk background color merah). Pendekatan ini memberikan fleksibilitas luar biasa dalam pembuatan desain dan biasanya mengarah pada HTML yang lebih eksplisit dan mudah dipahami.
Tailwind CSS memungkinkan Anda untuk merancang interface yang responsif tanpa harus menulis media ### queries khusus. Anda cukup menambahkan prefix seperti sm:, md:, lg:, atau xl ke class utility apa pun untuk menerapkan gaya tersebut hanya pada ukuran layar tertentu.
Meski Tailwind merupakan kerangka kerja berbasis utility, Anda masih dapat menggunakan pendekatan berbasis komponen dengan memanfaatkan fitur @apply dalam CSS atau PostCSS (catatan: apply tidak lagi disarankan). Ini memungkinkan Anda untuk mengekstrak class-class utility berulang menjadi komponen CSS khusus Anda sendiri.
Tailwind CSS sangat dapat dikustomisasi, memungkinkan Anda untuk mengubah palet warna, ukuran font, padding, margin, dan variabel lainnya sesuai dengan kebutuhan Anda melalui file konfigurasi.
Tailwind CSS secara otomatis menghapus semua class yang tidak digunakan pada tahap produksi, menghasilkan file CSS yang sangat kecil dan efisien.
Tailwind CSS telah menjadi populer di kalangan pengembang front-end karena memungkinkan mereka untuk membuat desain unik tanpa harus meninggalkan HTML mereka.
Tailwind CSS adalah framework yang menyediakan kumpulan class utility untuk memudahkan styling, sedangkan CSS Native adalah penulisan gaya tanpa menggunakan kerangka kerja apa pun, yang memberikan kontrol penuh tetapi bisa lebih kompleks dan memakan waktu.
Baca belajar seputar CSS di sini.
Tailwind CSS dan Bootstrap adalah dua framework CSS dengan pendekatan yang sangat berbeda. Bootstrap adalah framework berbasis komponen yang menyediakan komponen dan layout siap pakai yang dapat Anda gunakan untuk mempercepat proses pengembangan. Desain default Bootstrap telah banyak digunakan, sehingga mungkin sulit untuk membuat situs yang terlihat unik tanpa melakukan modifikasi yang cukup signifikan.
Di sisi lain, Tailwind CSS adalah framework utility-first yang memberikan Anda kumpulan class utility untuk membuat desain Anda sendiri daripada mengandalkan komponen pra-dibangun. Ini memberikan fleksibilitas yang lebih besar dalam desain, tetapi mungkin memerlukan lebih banyak upaya pada awalnya. Tailwind biasanya mengarah pada HTML yang lebih eksplisit dan mudah dipahami, sementara Bootstrap dapat mengarah pada kode HTML yang lebih ringkas.
Yuk berkenalan apa itu tailwind css! tailwind css dibuat oleh Adam Wathan, seorang yang cukup terkenal di komunitas laravel dengan beberapa coursenya. Kali ini dia menawarkan konsep baru yang berbeda dari bootstrap, bulma, atau css framework lainnya lewat Tailwind css
Website dan dokumentasinya sendiri sangat cantik dan mudah untuk mencari sesuatu, kamu harus coba di dokumentasi tailwind . Selain catatan lengkap untuk setiap attribute atau nama kelas yang bisa digunakan, ada juga playground tailwind untuk kamu mulai bermain dengan kelasnya di browser tanpa harus text editor sendiri.
Berikut contoh perbandingan tailwind sendiri dibandingkan cara lama (penamaan kelas yang spesifik) . Contoh membuat elemen notifikasi chat
Contoh nama kelas spesifik
<div class="chat-notification">
<div class="chat-notification-logo-wrapper">
<img class="chat-notification-logo" src="/img/logo.svg" alt="ChitChat Logo">
</div>
<div class="chat-notification-content">
<h4 class="chat-notification-title">ChitChat</h4>
<p class="chat-notification-message">You have a new message!</p>
</div>
</div><style>
.chat-notification {
display: flex;
max-width: 24rem;
margin: 0 auto;
padding: 1.5rem;
border-radius: 0.5rem;
background-color: #fff;
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
.chat-notification-logo-wrapper {
flex-shrink: 0;
}
.chat-notification-logo {
height: 3rem;
width: 3rem;
}
.chat-notification-content {
margin-left: 1.5rem;
padding-top: 0.25rem;
}
.chat-notification-title {
color: #1a202c;
font-size: 1.25rem;
line-height: 1.25;
}
.chat-notification-message {
color: #718096;
font-size: 1rem;
line-height: 1.5;
}
</style>Dengan tailwind
<div class="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-md flex items-center space-x-4">
<div class="flex-shrink-0">
<img class="h-12 w-12" src="/img/logo.svg" alt="ChitChat Logo">
</div>
<div>
<div class="text-xl font-medium text-black">ChitChat</div>
<p class="text-gray-500">You have a new message!</p>
</div>
</div>Kalau kamu tertarik, yuk mulai belajar
Tailwind css adalah css framework yang menawarkan konsep baru dengan konsep utility first di mana kamu tidak perlu lagi memikirkan panjang nama kelas untuk komponen HTMLnya. Tailwind terdiri dari nama kelas yang cukup intuitif untuk digunakan