Belajar Tailwind CSS

CSS Framework dengan konsep utility first yang mengurangi kerjaan kamu untuk memikirkan nama kelas yang sulit diingat

gambar Tailwind CSS
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 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


Tag: Kenapa belajar Tailwind CSS, Mengenal apa itu Tailwind CSS, Di mana mulai belajar Tailwind CSS, mulai dari mana belajar Tailwind CSS , tutorial Tailwind CSS bahasa indonesia untuk pemula dari dasar, apa kegunaan Tailwind CSS, bagaimana cara menggunakan Tailwind CSS, belajar bertahap Tailwind CSS, kursus online Tailwind CSS
premium logo tube

Hey, sedang ada diskon premium untuk akses semua kelas. Lihat di sini