adydetra_
28 Nov 2023

Pengenalan TailwindCSS

Apa itu TailwindCSS?

TailwindCSS adalahh kerangka kerja CSS sekumpulan utility classes untuk membangun antarmuka kustom dengan cepat.

Saya pribadi semua project yang saya kerjakan hampir seluruhnya menggunakan TailwindCSS, baik dalam project skala kecil maupun besar.

Sejarah Singkat

TailwindCSS dibuat oleh Adam Wathan yang sekarang menjabat sebagai CEO Tailwind Labs dan rekannya yang bernama Steve Schoger.

Versi alpha TailwindCSS resmi dirilis pada tanggal 1 November 2017.

Kenapa Digemari Developer

Alasan TailwindCSS digemari oleh developer dikarenakan utilitas yang diberikan.

Sebagai perbandingan dengan Vanilla CSS, Saya akan memberikan gambaran penggunaannya:

index.html
<div class="margin-padding">
  <p class="text">www.adydetra.my.id</p>
</div>

File CSS dengan metode external

style.css
.margin-padding {
  margin: 1rem;
  padding: 1rem;
}

.text {
  color: #000;
  font-size: 1.25rem;
  line-height: 1.75rem;
}

Sekarang saya aplikasikan dengan TailwindCSS di dalam file HTML tanpa menggunakan file CSS

index.html
<div class="m-4 p-4">
  <p class="text-black text-xl">www.adydetra.my.id</p>
</div>

Penutup

Oke, mungkin pengenalan TailwindCSS cukup sampai disini saja, mungkin terasa singkat, memang secara signifikan tidak ada lagi pembahasan yang penting.

Namun di materi-materi selanjutnya akan menarik dari TailwindCSS ini, saya akan mengajarkan kalian berdasarkan ilmu yang saya dapatkan dengan TailwindCSS.

Selanjutnya Saya akan memberikan materi terkait penginstalan TailwindCSS baik secara non framework maupun framework layaknya vue, react, dll.