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 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
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
Daftar Materi Tailwind CSS
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
Perkenalan tailwind css
Yu 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
install dan setup tailwind
apa saja yang perlu diinstall dan setup jika ingin menggunaka tailwind css
bikin homepage sekolahkoding
mari membuat ulang halaman homepage sekolahkoding dengan tailwind css
responsive, hover dan efek lain
Selain nama nama yang cukup intuitif, di tailwind css kita juga punya utility tambahan seperti responsive, hover dan efek lain
kustomisasi tailwind
tailwind datang dengan banyak hal dan mengurangi pekerjaan kamu di CSS hampir 100%. Tapi tenang saja, tetap ada cara untuk mengubah konfirgurasi atau kustomisasi tailwind
fungsi apply tailwind
kamu butuh mengelompokkan suatu css tailwind karena berkali kali menggunakannya? jika menggunakan framework javascript, ada fungsi component, jika tidak tersedia, kamu bisa menggunakan fungsi apply pada tailwind
group hover efek ke child
apa itu group hover di tailwind css? kita menggunakannya ketika ingin memberi efek css ke elemen yang berbeda atau pada child ketika parentnya dihover
responsive menu tailwind
bagaimana cara membuat responsive menu pada tailwind css
