{"id":16052,"date":"2024-03-15T08:53:29","date_gmt":"2024-03-15T01:53:29","guid":{"rendered":"https:\/\/www.jetorbit.com\/blog\/?p=16052"},"modified":"2024-03-07T14:00:04","modified_gmt":"2024-03-07T07:00:04","slug":"apa-itu-tailwind-css","status":"publish","type":"post","link":"https:\/\/www.jetorbit.com\/blog\/apa-itu-tailwind-css\/","title":{"rendered":"Ketahui Apa Itu Tailwind CSS dan Perbedaan antara Tailwind dengan Bootstrap"},"content":{"rendered":"

Seiring berjalannya waktu, <\/span>framework <\/span><\/i>yang digunakan pada sebuah website dapat beraneka ragam. Salah satunya adalah Tailwind CSS. Ingin tahu penjelasan selengkapnya, kah? Okay, tak usah pakai lama, langsung simak pembahasan detailnya yuk tentang <\/span>Ketahui Apa Itu Tailwind CSS dan Perbedaan antara Tailwind dengan Bootstrap<\/b><\/p>\n

Apa Itu Tailwind CSS?<\/b><\/h2>\n

Tailwind CSS<\/a> adalah salah satu <\/span>framework <\/span><\/i>CSS dengan berbasis <\/span>utility-first<\/span><\/i> yang bertujuan untuk membangun <\/span>user interface<\/span><\/i> dari sebuah website. Membuat performa dalam membangun <\/span>user interface<\/span><\/i> dapat lebih mudah dan cepat dengan teknologi <\/span>utility-first<\/span><\/i>.<\/span><\/p>\n

Pengembangan Tailwind dimulai pada tahun 2017 dan <\/span>framework <\/span><\/i>ini pertama kali diperkenalkan ke publik pada bulan Oktober 2017 melalui sebuah blog post di website Medium oleh Adam Wathan. Jadi, <\/span>framework <\/span><\/i>ini masih sangat baru namun popularitasnya sudah melejit di kalangan <\/span>front-end developer<\/span><\/i>.<\/span><\/p>\n

Nah, dari tahun 2017 hingga saat ini, versi terbaru terus lahir untuk dapat memperbaiki dan mengembangkan komponen-komponen agar lebih optimal.<\/span><\/p>\n

Framework <\/span><\/i>Tailwind CSS ini merupakan <\/span>software open-source<\/span><\/i> gratis yang dapat digunakan oleh para <\/span>developer <\/span><\/i>untuk membangun sebuah <\/span>user interface<\/span><\/i> atau hanya digunakan untuk belajar.<\/span><\/p>\n

Konsep Utility First pada Tailwind CSS\u00a0<\/b><\/h2>\n

Konsep yang digunakan oleh Tailwind CSS adalah menggunakan <\/span>utility-first<\/span><\/i> yang dapat mempercepat dan memudahkan sebuah <\/span>user interface<\/span><\/i> dibangun.<\/span><\/p>\n

Sebenarnya konsep <\/span>utility first<\/span><\/i> pada Tailwind CSS apa sih? Jadi, pengembang menggunakan kelas utilitas tingkat rendah (<\/span>low-level<\/span><\/i>) langsung di HTML untuk menerapkan gaya dan tata letak. Hal ini berbeda dari pendekatan tradisional, yang mana pengembang membuat aturan CSS khusus untuk setiap elemen.\u00a0<\/span><\/p>\n

Keunggulan dari Tailwind adalah <\/span>framework <\/span><\/i>ini mengutamakan utilitas untuk membuat desain yang unik atau spesifik. Tailwind tidak memberikan <\/span>style <\/span><\/i>ataupun <\/span>template <\/span><\/i>tertentu.<\/span><\/p>\n

Namun, Tailwind memiliki metode <\/span>opinionated building blocks<\/span><\/i> yang dikenal sebagai kelas utilitas untuk membantu mengatur <\/span>style <\/span><\/i>komponen website lebih sederhana.\u00a0<\/span><\/p>\n

Jadi, pada Tailwind CSS hanya perlu menggabungkan detail-detail komponen yang sering digunakan lalu digabungkan. Alur dari Tailwind CSS adalah Tailwind akan mengambil <\/span>raw-file<\/span><\/i> dari CSS lalu memprosesnya melalui file konfigurasi, setelah itu menghasilkan <\/span>output <\/span><\/i>yang sudah dikonfigurasi sebelumnya.<\/span><\/p>\n

Apa Perbedaan Tailwind dan Bootstrap?<\/b><\/h2>\n

Berikut ini perbedaan Tailwind dan Bootstrap<\/a> yang bisa dijadikan pertimbangan dalam memilih sebuah <\/span>framework<\/span><\/i>:<\/span><\/p>\n

\"Apa<\/a><\/p>\n

Dapat dilihat bahwa perbedaan yang paling menonjol terdapat pada metode desain yang digunakan.<\/span><\/p>\n

Metode <\/span>utility-first <\/span><\/i>menjadi <\/span>highlight <\/span><\/i>dari Tailwind CSS yang dapat memberi dampak cukup besar bagi <\/span>developer <\/span><\/i>yang sebelumnya menggunakan Bootstrap dan ingin beralih ke Tailwind CSS.<\/span><\/p>\n

Apakah Tailwind CSS Merupakan Suatu Framework?<\/b><\/h2>\n

Apakah Tailwind CSS merupakan suatu <\/span>framework<\/span><\/i>? Jawabannya adalah YES! Tailwind CSS hadir dalam bentuk <\/span>framework <\/span><\/i>yang dapat memudahkan dalam membangun <\/span>user interface<\/span><\/i> di sebuah website.<\/span><\/p>\n

Tailwind CSS dapat disebut sebagai sebuah <\/span>framework <\/span><\/i>karena menyediakan struktur dan seperangkat alat untuk membangun dan merancang <\/span>user interface<\/span><\/i> pada pengembangan web.\u00a0<\/span><\/p>\n

Contoh Tailwind CSS<\/b><\/h2>\n

Agar lebih memahami, kalian harus memulai dengan mempelajari pendekatan <\/span>utility-first<\/span><\/i> yang akan diterapkan pada <\/span>framework <\/span><\/i>Tailwind CSS. Kalian bisa mulai dari contoh di bawah ini dan selanjutnya harus berlatih melakukan kustomisasi menggunakan pendekatan <\/span>utility-first<\/span><\/i> ini.<\/span><\/p>\n

Berikut merupakan contoh dari Tailwind CSS :<\/span><\/p>\n

<!DOCTYPE html><\/span><\/p>\n

<html lang=”en”><\/span><\/p>\n

<head><\/span><\/p>\n

\u00a0<meta charset=”UTF-8″><\/span><\/p>\n

\u00a0<meta name=”viewport” content=”width=device-width, initial-scale=1.0″><\/span><\/p>\n

\u00a0<script src=”https:\/\/cdn.Tailwindcss.com”><\/script><\/span><\/p>\n

\u00a0<title>Belajar Tailwind CSS<\/title><\/span><\/p>\n

<\/head><\/span><\/p>\n

<body class=”bg-gray-100 h-screen flex items-center justify-center”><\/span><\/p>\n

\u00a0<button class=”bg-black-500 hover:bg-black-700 text-white font-bold py-2 px-4 rounded”><\/span><\/p>\n

\u00a0Click Me<\/span><\/p>\n

\u00a0<\/button><\/span><\/p>\n

<\/body><\/span><\/p>\n

<\/html><\/span><\/p>\n

Contoh di atas akan menampilkan web sederhana yang memiliki button atau tombol. Berikut ini penjabaran lebih detailnya:<\/span><\/p>\n

    \n
  1. bg-gray-100:<\/b> Memberikan latar belakang berwarna abu-abu pada elemen <\/span>body <\/span><\/i>atau bagian isi website<\/span><\/li>\n
  2. h-screen:<\/b> Memberikan kustomisasi tinggi elemen <\/span>body <\/span><\/i>setara dengan tinggi layar.<\/span><\/li>\n
  3. flex items-center justify-center:<\/b> Menggunakan <\/span>flexbox <\/span><\/i>untuk meletakkan elemen <\/span>body <\/span><\/i>secara vertikal maupun horisontal.<\/span><\/li>\n
  4. bg-black-500: <\/b>Memberikan latar belakang <\/span>button <\/span><\/i>dengan warna hitam.<\/span><\/li>\n
  5. hover:bg-black-700:<\/b> Menentukan warna latar belakang <\/span>button <\/span><\/i>saat melakukan <\/span>hover<\/span><\/i>.<\/span><\/li>\n
  6. text-white:<\/b> Mendeklarasikan warna putih untuk <\/span>font <\/span><\/i>yang ada dalam <\/span>button<\/span><\/i>.<\/span><\/li>\n
  7. font-bold:<\/b> Menebalkan <\/span>font<\/span><\/i>.<\/span><\/li>\n
  8. py-2 px-4:<\/b> Memberikan <\/span>padding <\/span><\/i>pada sumbu y (py) sebesar 2 dan pada sumbu x (px) sebesar 4.<\/span><\/li>\n
  9. rounded:<\/b> Memberikan sudut yang melengkung pada <\/span>button<\/span><\/i>.<\/span><\/li>\n<\/ol>\n

    Penggunaan Tailwind CSS ini dianggap lebih sederhana dan mudah oleh sebagian <\/span>developer <\/span><\/i>karena tak perlu lagi menuliskan lebih banyak baris kode untuk melakukan kustomisasi pada <\/span>user interface<\/span><\/i> website.<\/span><\/p>\n

    Jadi, kalian sudah punya ketertarikan kah untuk belajar Tailwind CSS?<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"

    Seiring berjalannya waktu, framework yang digunakan pada sebuah website dapat beraneka ragam. Salah satunya adalah Tailwind CSS. Ingin tahu penjelasan selengkapnya, kah? Okay, tak usah pakai lama, langsung simak pembahasan detailnya yuk tentang Ketahui Apa Itu Tailwind CSS dan Perbedaan antara Tailwind dengan Bootstrap Apa Itu Tailwind CSS? Tailwind CSS adalah salah satu framework CSS … Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":16053,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"generate_page_header":"","footnotes":""},"categories":[25],"tags":[5931,5936,283,7,5934,5935,5932,5933],"class_list":["post-16052","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-info","tag-apa-itu-tailwind-css","tag-contoh-tailwind-css","tag-domain-murah","tag-hosting-murah","tag-konsep-utility-first","tag-perbedaan-tailwind-dan-bootstrap","tag-tailwind-css","tag-tailwind-css-adalah","infinite-scroll-item","generate-columns","tablet-grid-50","mobile-grid-100","grid-parent","grid-33"],"_links":{"self":[{"href":"https:\/\/www.jetorbit.com\/blog\/wp-json\/wp\/v2\/posts\/16052","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.jetorbit.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jetorbit.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jetorbit.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jetorbit.com\/blog\/wp-json\/wp\/v2\/comments?post=16052"}],"version-history":[{"count":1,"href":"https:\/\/www.jetorbit.com\/blog\/wp-json\/wp\/v2\/posts\/16052\/revisions"}],"predecessor-version":[{"id":16055,"href":"https:\/\/www.jetorbit.com\/blog\/wp-json\/wp\/v2\/posts\/16052\/revisions\/16055"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.jetorbit.com\/blog\/wp-json\/wp\/v2\/media\/16053"}],"wp:attachment":[{"href":"https:\/\/www.jetorbit.com\/blog\/wp-json\/wp\/v2\/media?parent=16052"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jetorbit.com\/blog\/wp-json\/wp\/v2\/categories?post=16052"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jetorbit.com\/blog\/wp-json\/wp\/v2\/tags?post=16052"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}