Halo teman-teman semua, selamat datang kembali di channel WPU bersama saya Sandika Gali. Dan di video kali ini, kita akan memulai sebuah seri atau playlist baru mengenai... Tailwind CSS, teman-teman ya. Di playlist ini nanti kita akan belajar mengenai framework CSS yang saat ini lagi banyak banget dipakai.
Dan di video pertama, seperti biasa, kita akan mulai dulu dari penjelasan mengenai apa sih itu Tailwind CSS ya. Kita akan mulai dari definisinya, dari konsepnya, serta nanti kita akan melihat perbedaannya dengan framework-framework yang lain yang sering kita gunakan seperti Bootstrap misalnya. Oke teman-teman ya, jadi langsung aja kita mulai dengan penjelasannya. Oke yang pertama, seperti yang tadi saya bilang, kita akan mulai dengan definisi dari Tailwind.
Kita akan langsung lihat menurut website resminya yaitu tailwindcss.com. Jadi katanya Tailwind itu a utility-first CSS framework that packs with classes. Jadi ini katanya sebuah utility-first framework yang di dalamnya terdapat banyak sekali kelas-kelas yang tentu saja nanti bisa kita gunakan. Tapi sebelum kita membahas lebih lanjut mengenai Tailwind CSS ini, kita harus cari tahu dulu apa itu Utility First.
Dimana Tailwind ini masuk ke dalam kategori CSS Framework ini, Utility First. Mari kita lihat dulu contoh berikut ini ya teman-teman. Jadi ceritanya misalnya gini, kita punya sebuah komponen alert. Kita bisa membuat komponen alert di dalam sebuah website kita. Bentuknya seperti ini, kotak, ujungnya tumpul, ada bayangannya, ada tulisannya, ada juga ikonnya.
Nah ini kalau misalkan kita bikin menggunakan vanilla CSS atau CSS murni yang kita bikin sendiri, itu mungkin contohnya seperti ini. Jadi kita bisa bikin div yang punya nama kelas chat notification atau chat alert atau apapun namanya sesuai dengan keinginan kita, bebas aja. Terus dalamnya juga kita punya div lagi untuk nyimpen gambarnya, terus juga kita punya div lagi untuk nyimpen tulisannya. Kita pisahin divnya, terus juga nanti kita kasih flex supaya berjajar kiri kanan.
Pokoknya bebas aja kita kasih CSS sesuai keinginan kita. Misalnya CSS untuk chat notification-nya seperti ini. Sebagai pembungkus, kita kasih dia display-nya flex, ukurannya berapa, margin-nya berapa, padding-nya berapa.
Ini nggak ada masalah. Mungkin kita sudah terbiasa dengan membuat CSS seperti ini. Tapi ini bukan utility-first, teman-teman.
Jenis coding HTML CSS ini kita sebut dengan komponen. first. Jadi kita anggap elemennya sebagai komponen, terus kita kasih style untuk komponen tersebut. Satu komponen memiliki banyak style. Ini baru untuk pembungkusnya, chat notification.
Belum kita bikin untuk elemen-elemen di dalamnya. Oke ya? Nah sekarang kalau kita bikin ini pakai Tailwind, jadinya mungkin sama seperti ini. Tampilannya sama, tapi teman-teman lihat HTML kita nantinya jadi seperti ini. Dimana di dalam HTML-nya kita punya kelas-kelas...
Ada P6, Max WSM, MX Auto. Nah, di mana kelas-kelasnya ini kita akan definisikan di dalam CSS-nya. Ya, walaupun kalau di Tailwind, ini bukan kita yang bikin CSS-nya, tapi Tailwind yang bikin.
Kita cukup panggil kelas-kelasnya aja. Nah, semua kelas-kelas ini itu kita sebut dengan kelas utility. Jadi, kelas yang berfungsi untuk melakukan persis satu hal saja.
Jadi, P6 ini artinya kasih padding untuk keempat sisinya, atas, kanan, bawah, kiri. Max WSM ini untuk memberi width yang maksimal dengan lebar small. MX Auto untuk memberi margin pada sumbu X sebesar auto. Jadi satu kelas hanya mengerjakan satu hal saja. Jadi ini termasuk ke dalam framework yang utility first.
Isinya hanya utility-utility saja. Tidak ada komponen ya. Tidak ada satu kelas yang di dalamnya banyak CSS.
Ya teman-teman ya. Nah tapi mungkin sampai sini teman-teman sudah mulai bertanya-tanya nih. Ini juga termasuk pertanyaan yang ada di pikiran saya ketika saya mau mulai belajar Tailwind. Yang pertama mungkin, kok jadi kayak inline CSS ini pak?
Kita nulis kelasnya banyak banget untuk sebuah elemen. Terus juga mungkin pertanyaannya, apa bedanya dong dengan bootstrap? Kan bootstrap juga di dalamnya ada utility-utility-nya.
Walaupun memang ada komponennya ya. Terus pertanyaan yang terakhir, kok kelihatannya jadi nggak semantik ya pak? Kan kalau tadi kita lihat chat notification, itu kan udah jelas ya.
Kita bikin sebuah elemen. yang bertugas sebagai chat notification tinggal kita kasih stylenya aja. Nah, mungkin ini juga menjadi pertanyaan dari teman-teman semua.
Ya, nggak usah khawatir. Nanti kita akan sama-sama cari jawabannya satu per satu ya, teman-teman ya. Kita balik lagi ke sini deh.
Kita udah tahu bahwa Tailwind itu adalah utility-first CSS framework yang di dalamnya banyak kelas. Terus katanya lagi di website-nya, itu dia adalah sebuah framework yang dapat membuat kita dengan cepat membangun website yang modern. Nah terus keywordnya nih Without ever leaving your HTML Jadi semuanya bisa kita buat Tanpa meninggalkan kodingan HTML kita Jadi bahkan kita gak perlu Menyentuh file CSS Karena semua utility CSS-nya udah ada menjadi kelas di HTML. Ini yang menurut saya sangat menarik dari Tailwind ya. Kita nggak perlu bongkar CSS, kita nggak perlu bikin satu baris CSS pun.
Semuanya udah bisa ditangani oleh kelas utility-nya di dalam HTML. Jadi ya teman-teman, jadi itu marketing-nya lah istilahnya yang dijagokan oleh si Tailwind CSS-nya. Sekarang kita lihat lebih detil lagi mengenai pembuatnya siapa.
Ini adalah foto pembuatnya, namanya Adam Watan. Dan Tailwind CSS ini dibuat atau dirilis pertama kali itu pada tahun 2017 ya 1 November lebih tepatnya 1 November 2017 Ya dan sampai saat ini versi yang paling baru saat video ini dibuat Ada di versi Ya versi 3 nya baru aja rilis di akhir Desember 2021 Dan kalau kalian mengunjungi reponya di GitHub Saat ini udah banyak banget yang kasih star Ada sampai dengan 51.000 star ya Oke, nah selanjutnya kita lihat utility-utility apa aja yang bisa kita modifikasi di dalam HTML tadi. Ya, secara umum sih hampir semua properti CSS itu ada kelas utility-nya. Mulai dari Tailwind ini nyebutnya Preflight.
Ya, Preflight ini kalau saya lihat itu merupakan CSS Reset ya. Jadi dia mereset properti-properti default yang ada di dalam elemen-elemen HTML. Jadi ini udah ada bawaan resetnya sendiri. Terus juga mulai dari Layouting, Flexbox dan Grid, Spacing dan Sizing.
untuk ngatur spasi seperti margin dan padding. Terus juga sizing untuk mengatur width dan height sebuah elemen. Terus juga ada typography buat ngatur font ya teman-teman ya. Terus untuk background dan borders, efek dan filter juga. Terus juga ada transisi, transformasi, dan animasi.
Nah ini yang menurut saya juga keren ya, karena ini bisa disimpan di dalam kelas-kelas HTML-nya. Dan juga ada pengaturan untuk tabel. Jadi rasanya properti-properti CSS yang sering kita gunakan itu sudah ada utility-nya. Jadi betul tadi memungkinkan kita untuk nggak keluar atau berpindah dari file HTML kita.
Terus kita bikin CSS baru gitu ya. Itu memungkinkan tidak terjadi. Dan masih banyak utilities lain yang bisa kita gunakan.
Contohnya untuk sizing misalnya ya. Kalau kita mau bikin sebuah elemen itu ukurannya itu berapa. Ya kita cukup kasih sebuah kelas utility yang namanya w-atau minus ya.
Kasih ukurannya berapa. Ini ada sampai 96. Terus ada untuk warna. Pilihan warnanya sangat banyak sekali Dan kayaknya juga hampir meng-cover seluruh Palet warna yang ada Ya mungkin kalau kalian butuhnya yang sangat spesifik hexanya Itu memang nggak ada dikasih di defaultnya Tapi kita bisa juga nanti Modifikasi ketika kita ingin memberi Nilai yang sangat spesifik Tapi ini ada warnanya banyak Ini hanya sedikit yang ditampilkan disini Terus juga untuk typography atau untuk font ya Kita bisa kasih fontnya mulai dari jenisnya Apakah dia sans serif atau serif Atau bahkan monospace Dan masih banyak lagi yang lain ya Ini saya ambil langsung dari website Tailwind ya Oke dan sekarang kita lihat fitur-fitur utama atau fitur unggulan yang diberikan oleh si Tailwind ini Yang pertama adalah Interactivity Jadi kita bisa memberi interaksi pada elemen kita menggunakan utility classnya Terus yang kedua kita juga bisa merancang responsif untuk halaman kita menggunakan utility classnya Dapat dengan mudah menambahkan dark mode untuk aplikasi kita Terus juga kalau misalnya nanti elemen-elemen HTML kita itu akan dijadikan sebuah komponen yang akan dipakai berulang kali, fitur reusability ini juga membantu kita.
Dan kalau misalnya style yang diberikan oleh Tailwind ini belum cukup untuk memenuhi kebutuhan kita, misalnya warnanya nggak sesuai, ukurannya nggak spesifik dengan yang kita mau, atau style-style lainnya, kita bisa memberikan style custom kita sendiri dengan cukup mudah. Terus juga ada di dalam Tailwind, karena dia juga menggunakan preprocessor, di dalamnya, kita bisa gunakan function dan directives. Sama seperti ketika kita menggunakan sas misalnya. Jadi ini beberapa fitur yang menjadi keunggulan dari Tailwind.
Sekarang kita lihat beberapa contohnya. Misalnya untuk yang interactivity teman-teman. Contohnya kita membuat sebuah tombol ya.
Kita membuat sebuah tombol. Kalau kita gunakan Tailwind itu nulisnya begini. Jadi kita tinggal kasih background color-nya warnanya sky blue.
Dengan kadar kebiruannya 600. Semakin tinggi nilainya birunya akan semakin gelap. Semakin rendah nilainya, birunya akan semakin pudar ya Semakin muda gitu Semakin besar, semakin tua Jadi nilai defaultnya bisa kita kasih Menggunakan utility yang sebelah kiri BG Sky 600 Nah tapi ketika kita mau memberikan interaktifitas Misalnya ketika kursornya berada di atas elemennya Dan kita pengen agar warnanya menjadi gelap Kita naikkan kadar kebiruannya Nah kita cukup tambahkan Utility class hover.2. Jadi ini yang merupakan salah satu keunggulan dari Tailwind. Kita bisa langsung nyimpen interaksinya di dalam kelasnya. Jadi ketika di hover, ganti background sky 600-nya jadi background sky.
Sky 700. Makanya dia akan menjadi semakin gelap. Gitu ya. Nah dan interaksinya ini macem-macem ya.
Gak cuman hover aja. Kita bisa lihat di pseudo classes. Salah satunya hover tadi. Tapi selain hover masih banyak yang lain.
Kita bisa kasih di focus. Kita bisa kasih di active. Ya focus itu ketika misalnya kita ngisikan sebuah text input. Ketika kursor kita berada di inputan tersebut, misalnya username, password.
Ketika kursor kita lagi ada di username, itu fokus. Active ketika sebuah elemen kita klik. First itu untuk memilih elemen pertama, last untuk memilih elemen terakhir, dan masih banyak yang lain.
Itu kita bisa masukkan ke dalam utility class-nya. Atau juga pseudo-elemen. Nah, ini juga keren nih. Kita bisa kasih untuk pseudo-elemen before, after, untuk placeholder.
Kita bisa kasih style untuk tulisan yang ada di placeholder inputan kita. Misalnya kita pengen warnanya beda gitu placeholder-nya, kasih style aja di placeholder. Cara ngasihnya juga sama tadi, tinggal tulis placeholder.2 dan seterusnya. Ini akan kita bahas lebih detail ketika kita masuk ke materinya ya.
Terus juga ada file untuk ngatur perilaku dari input kita yang dipunya file. Dan selection ini untuk ngatur ketika kita menyeleksi teks. Misalnya sekarang highlight warna ketika teks diseleksi itu jadi warna apa gitu ya. Itu dia untuk interactivity. Selanjutnya untuk responsive design.
itu kita bisa kasih beberapa breakpoints ya. Jadi ketika di lebar layar default, yang paling kecil ketika kita buka di handphone, ini adalah defaultnya. Jadi kalau kita kasih utility class, tanpa ada di depannya prefix lebar layarnya, itu akan berlaku ke semua lebar layar. Contohnya tadi kalau misalkan kita kasih BG Sky 600, berarti itu di semua layar warnanya akan BG Sky 600. Tapi ketika nanti kita kasih prefix atau imbuhan di depannya ya, maka itu akan berubah sesuai dengan breakpointnya misalkan pada saat di lebar layar small jadi 2 kolom di lebar layar medium jadi 3 kolom seperti ini dan di lebar layar large betul-betul berubah seperti ini nah ini tinggal kita masukkan ke dalam tiap-tiap kelasnya ya contohnya yang defaultnya ini tadi kita nggak perlu pakai embel-embel atau prefix apapun di depannya maka ini padding untuk sumbu Y-nya dan padding untuk sumbu X-nya akan berlaku di semua layar Tapi ketika kita kasih di sebelahnya yang ini, SM, P6, maka pada lebar layar small, paddingnya di keempat sisinya berubah jadi 6. Tadinya kan di sumbu X itu 4, nah sekarang di semua sisinya jadi 6. Di lebar layar medium berubah lagi, untuk sumbu Y-nya 10, untuk sumbu X-nya 8. Dan di lebar layar large berubah lagi.
Kita dapat memberikan prefix kalau mau desain kita responsif. Terus juga kalau misalkan kita mau kasih dark mode. Kita tinggal kasih kelas yang namanya dark Jadi kalau misalkan gak dikasih dark Berarti itu untuk yang light mode biasa aja Tapi kalau misalkan dikasih dark Maka dia akan berubah ketika modenya mode dark ya Dark mode nya ini bisa otomatis ngecek ke sistem kita Apakah sistem kita mendukung dark mode Atau kita juga bisa menggunakan tombol atau toggle seperti ini Sehingga ketika kita pilih atau klik tombol dark mode nya Dia otomatis akan memilih kelas utility yang versi dark nya Jadi itu beberapa fitur dari yang sudah kita lihat di slide sebelumnya. Oke, selanjutnya kita akan coba jawabin nih 3 pertanyaan utama ini.
Kita mulai dari yang ini dulu. Apa bedanya dengan bootstrap pak? Nah, harusnya teman-teman dengan melihat perilaku dari kelas-kelas di Tailwind tadi, harusnya udah bisa nebak ya bahwa 2 framework ini sebetulnya berbeda.
Bootstrap itu merupakan UI framework. Sedangkan tadi Tailwind itu disebutnya Utility First Framework. Kenapa UI Framework?
Karena di dalamnya nggak cuma ada utility aja. Kita tahu Bootstrap juga bisa kita kasih kelas-kelas utility. Tag Center, terus juga BG Dark misalnya ya. Tag Primary, itu utility-utility class. Tapi di dalamnya nggak cuma ada utility class.
Dia punya juga komponen. Sedangkan Tailwind itu secara default nggak punya komponen. Isinya utility semua.
Itu makanya. Bootstrap itu biasa disebut dengan UI framework Karena di dalamnya banyak komponen-komponen UI yang siap pakai Tinggal kita panggil kelasnya, jadi D button Tinggal kita panggil kelasnya, jadi D card Sedangkan Tailwind bisa bikin button, bisa bikin card Tapi kita harus bikinnya dari awal Kita rancang kelas-kelas utility-nya Jadi kalau misalkan kita lihat ya Jenis-jenis dari UI framework dan utility first framework ini Banyak juga macamnya Kalau UI framework kita tahu ada Bootstrap Material UI, Foundation, Semantic UI Bulma, dan masih banyak yang lain ya Sedangkan untuk Utility First Framework Itu juga banyak macamnya, selain Tailwind Ada yang lain tuh, ada Tachyon, ada Shed CSS, Bus CSS Expressive CSS, dan lain-lain Nah, di dalamnya ini semua Nggak ada komponennya, cuman ada Utility-Utility Class aja Walaupun memang, untuk Tailwind Khususnya, ada Ada juga komponen ya teman-teman. Kalau teman-teman mengunjungi website yang namanya tailwindui.com, ada juga sebenarnya komponen yang siapakah yang bisa kita gunakan.
Itu cuma masalahnya berbayar teman-teman. Jadi ada nih, all application UI component dan lain sebagainya bisa kita pakai, cuma bayar. Dan sebetulnya kalau ngomongin berbayar, bootstrap juga punya yang berbayar ya. Cuma bedanya kalau bootstrap yang bayarnya itu adalah temanya. Jadi kalau teman-teman masuk ke sini, teams.getbootstrap.com ya ada, cuman bootstrap ngasihnya udah jadi website-nya.
Nah, tapi kita nggak akan ngomongin yang berbayar, kita akan bandinginnya, keduanya ini yang versi gratis bawaannya aja lah ya. Dan gimana kalau misalnya kita bandinginnya nggak cuma bootstrap dan Tailwind aja. Gimana kalau kita bandingin pakai vanilla CSS deh.
Vanilla ini maksudnya CSS murni ya, tanpa framework apapun. Jadi CSS polos. Kita bandingin sama bootstrap, kita bandingin sama Tailwind ketika kita mau bikin sebuah komponen yang sama persis. Kita lihat. Kalau misalnya kita mau bikin tombol yang simple lagi nih.
Tombol submit, warna biru. Seperti ini tulisannya putih. Yang pertama kita butuh button ya. Jelas kita butuh button tipenya submit. Atau tipenya button bebas.
Terus kelasnya. Ini bebas. Kita bikin nama kelas kita sendiri.
Jadi misalkan saya mau kasih nama kelasnya tombol ya. Bebas aja. Nah tapi nanti kita harus bikin CSS. Yang nama selektornya adalah tombol.
Supaya kita hubungkan selektor ini ke kelas. Terus kita kasih nih. Masing-masing properti CSSnya.
Paddingnya berapa. Border radio supaya sudutnya tumpul. Warna backgroundnya supaya biru.
Warna tulisannya supaya putih. Bordernya. Ini transisi. supaya ketika kita hover perubahan warna antara biru muda dan biru tuanya ada transisinya.
Jadi kita harus tulis beberapa baris seperti ini manual. Pasti udah tau lah ya cara bikinnya ya. Jadi ada dua hal yang harus dibikin. HTML-nya harus kita pikirin juga CSS-nya. Itu kalau vanilla CSS.
Sekarang gimana kalau di bootstrap 5? Buat yang udah pernah pake bootstrap 5, harusnya udah pada tau ya gampang banget bikinnya. Kita cukup panggil dua buah kelas. Bikin button sama, tipenya submit Tapi di kelasnya kita panggil kelas btn spasi btn primary Kelas pertama untuk bikin tombol ini tipenya button Ya dia ngereset style default dari browsernya Baru kita kasih warna biru Pake button primary Udah selesai Kalo pake bootstrap gampang banget Kasih 2 kelas Beres Gak perlu mikirin CSSnya Itu udah dipikirin sama bootstrap Nah sekarang kalo pake Tailwind gimana? Kalo pake Tailwind Itu kayaknya kita ngegabungin dua-duanya ya Maksudnya gimana?
Coba kita liat Yang pertama kita harus bikin semuanya sendiri sama seperti yang kita bikin pakai vanilla CSS walaupun kita bikinnya nggak di CSS kita bikinnya di kelasnya kita atur warna backgroundnya kita kasih warna tulisan putih padding sumbu X-nya padding sumbu Y-nya ujungnya tumpul dan ketika di hover warna backgroundnya berubah jadi ini semua kita bikin di dalam kelas tapi kita nggak perlu bikin CSS-nya sendiri CSS-nya udah dipikirin sama Tailwind-nya jadi kita nulisin Kelasnya aja sama seperti bootstrap Cuman bedanya kalau bootstrap ini semuanya udah dikerjain sama bootstrapnya Kalau Tailwind ini semua kita bikin sendiri Jadi ini perbedaan ketika kita nulis satu komponen yang sama Menggunakan tiga cara ini Hasilnya bisa aja mirip lah ya Mungkin gak 100% sama tapi mirip Atau kalau misalkan kalian nanya Wah jadi lebih bagus mana nih antara ketiga hal ini Nah coba kita bandingkan satu persatu ya Untuk yang Vanilla CSS Jadi menurut saya sebetulnya nggak ada yang lebih baik ya Semuanya punya kelebihan dan kekurangannya masing-masing Semuanya ada peruntukannya masing-masing Untuk yang vanilla CSS Yang pertama, kelebihannya adalah kita punya kendali penuh Kita yang nulisin nama kelas yang kita bikin sendiri CSS-nya itu kita nulis sendiri Terus juga kode CSS-nya lebih optimal Walaupun saya kasih di sini tanda bintang artinya syarat dan ketentuan berlaku ya Ini tergantung yang ngoding juga Cuman kalau yang ngodingnya udah tau caranya gimana bisa lebih optimal karena yang nulis kita. Kalau ada kode CSS yang udah nggak dibutuhin, tinggal dihapus. Kalau ada komponen HTML yang berubah, kita tinggal ubah CSS-nya.
Jadi cenderung bisa lebih optimal. Karena ini tadi, kendali penuh ada di kita. Kekurangannya adalah, kita harus bikin semuanya dari nol.
Bahkan mungkin kalau bener-bener vanilla CSS, sampai reset-resetnya pun kan kita harus bikin dari awal. Dan jadinya, tentu saja pembuatannya cenderung lebih lama gitu ya, karena kita bikin semuanya dari nol. Nah, sekarang kita lihat Bootstrap 5. Bootstrap 5 ini akan bikin coding kita jadi sangat cepat, karena kita cukup fokus di HTML-nya aja, dan kita fokus di komponen apa yang mau kita bikin.
Mau bikin button, panggil kelasnya, mau bikin navbar, panggil kelasnya, langsung jadi navbar yang cukup kompleks ya, dan cenderung lebih gampang, karena bisa aja kalian tunggu. terlalu paham CSS, itu bisa bikin website yang sudah tampil dengan bagus. Karena kita tinggal panggil kelasnya, udah jadi.
Jadi menurut saya sangat ramah untuk pemula bootstrap ini. Dan di dalamnya kelebihannya, ada banyak komponen yang siap digunakan. Karena tadi dia adalah UI framework.
Mau bikin navbar, gampang. Tinggal copy paste HTML dan kelas-kelasnya jadi. Padahal kalau misalkan kita bikin pakai vanilla navbar itu, ya lumayan juga ya.
Butuh berapa baris CSS. Nah, tapi kerugiannya adalah ini. Tidak ada kendali. Jadi apa yang dikasih oleh bootstrap? Ya kita terima aja.
Bootstrap itu secara default hanya ngasih beberapa warna utama. Kalau kalian nggak cocok dengan warnanya, nah berarti kalian harus memodifikasi bootstrapnya. Entah itu dengan memberikan style CSS kalian sendiri, yang mana itu artinya kalian bikin file CSS keluar dari HTML-nya, atau bahkan kalian bisa kasih inline CSS, dan itu pun kalian jadinya harus paham CSS lagi ya.
Jadi tidak ada kendali, karena memang semuanya udah diatur sama si bootstrapnya. Terus banyak kode CSS yang nggak kepake. Nah ini maksudnya gimana?
Jadi misalnya kalau website kita hanya pake beberapa kelas dari bootstrap, beberapa komponen, dan ketika kita manggil file bootstrapnya itu semua kelasnya terpanggil, ya pasti banyak kode CSS yang kita load tapi nggak kita pake. Jadi makanya saya tulis banyak kode CSS yang nggak kepake. Dan yang terakhir, website-website yang pake bootstrap itu udah keliatan kalau itu pake bootstrap. Apalagi kalau kita nggak modifikasi tadi. Jadi satu sama lain website-nya itu kayak mirip-mirip lah.
Oh ini pasti pakai bootstrap nih, udah ketahuan. Dan kalau pakai Tailwind, ini yang pertama pembuatannya bisa lebih cepat. Walaupun ini balik lagi juga tergantung yang ngodingnya.
Karena meskipun kita nulisin semua utility-nya satu persatu di dalam HTML-nya, kita nggak perlu nulisin CSS. Jadi cenderung lebih cepat lah. Terus juga diklaim mengikuti best practices. Jadi karena utility-utility yang kita gunakan itu sudah ngikutin.
aturan yang biasa dipakai orang-orang lah ya walaupun mungkin ini masih bisa muncul perdebatan juga, cuman kayaknya kita bisa melihat disini, kalau kita pakai ukuran, ukurannya itu sudah menggunakan ukuran yang relatif, kalau kita pakai responsif grid systemnya sudah dibuatkan di belakang layar, nah kalau misalkan kita pakai vanilla itu semua harus kita bikin dari awalnya terus juga kode CSSnya optimal karena Tailwind itu hanya menggunakan utility yang kita pakai aja Jadi utility yang nggak kita pakai itu nantinya nggak akan di-compile jadi file CSS kita. Tapi kekurangannya ini menurut saya si kode HTML-nya jadi nggak rapi ya. Atau jadi jelek lah menurut saya ya.
Karena banyak kelas tadi ya untuk bikin satu komponen kita rancang satu persatu. Jadi banyak kelas-kelasnya gitu. Padahal kalau misalkan kita mau bikin button, button kan simple ya.
Cuma button tipe submit terus tulisannya kirim misalnya. Harusnya kan simple tapi dengan banyaknya kelas itu bisa jadi numpuk gitu. Terus yang selanjutnya, kita harus paham CSS.
Jadi beda sama bootstrap, bootstrap itu ramah pemula. Kalau menurut saya, tetap aja meskipun kita panggil kelas-kelas, menggunakan Tailwind ini kita harus paham vanilla CSS. Jadi nggak bisa dibilang ramah untuk pemula ya.
Itu dia beberapa perbedaannya. Jadi mudah-mudahan sekarang kalian udah kebayang nih, kira-kira kalian cocoknya pakai yang mana gitu ya. Kapan saya harus menggunakan apa. Selanjutnya, kita ke pertanyaan berikutnya. Kok jadi kayak inline CSS nih pak?
Atau ada yang bilang Tailwind itu inline CSS dengan gaya gitu ya. Nah kita lihat. Sebenernya sama gak sih dengan inline CSS?
Nah ini saya punya 2 buah HTML seperti yang tadi ya. Yang atas dibikin pake Tailwind. Yang bawah dibikin pake inline CSS.
Ya sama-sama gak bagus ya menurut saya ya. Dua-duanya kelasnya banyak. Kalau yang vanilla stylenya isinya CSS banyak.
Nah kelihatan ya kalau dari sini sama aja. Betul memang. Padding 6px 12px. Ini sama. Px3py2.
Dua-duanya. melakukan hal yang sama ya. Padding, sumbu Y, sumbu X, ini juga sama.
Nah, tapi ada perbedaan, teman-teman. Ternyata menggunakan inline CSS itu nggak se-flexible ketika kita pakai Tailwind tadi. Alasan utamanya adalah ketika kita mau kasih interaktifitas dan juga responsif. Nih, kalau kita kasih responsif, pakai media query, dan juga kita kasih interaktifitas, pakai hover state, pakai Tailwind bisa.
Pakai vanilla CSS, kita nggak bisa masukin hover dan media query di dalam inline CSS. Itu harus kita panggil file CSS sendiri. Atau kita tulis di dalam tag style gitu.
Jadi mungkin secara kerapihan sama-sama nggak rapih ya. Tapi secara fungsi pakai Tailwind itu lebih fleksibel lagi. Oke jadi jawabannya tidak sama ya. Antara Tailwind CSS dan juga inline CSS. Oke dan pertanyaan terakhir.
Kok jadi nggak semantik ya Pak? Nah ini pertanyaan ini mungkin akan... Kita jawab lebih detail di video berikutnya ya. Oke, jadi itu ya teman-teman ya.
Semoga sampai saat ini udah paham sekilas mengenai Tailwind tuh seperti apa. Mudah-mudahan jadi makin penasaran dan jadi semakin semangat lagi untuk ngikutin playlistnya. Nah, tapi sebelum saya akhiri, saya mau kasih prerequisite dulu.
Kira-kira apa sih yang harus dipelajarin sebelum kita mulai masuk belajar Tailwind ini ke depannya. Yang pertama jelas kalian harus belajar HTML dulu ya. Terus yang kedua belajar CSS. Yang ketiga belajar bootstrap ini opsional Kalian boleh pahami dulu bootstrap atau tidak Tapi menurut saya dengan memahami bootstrap Kalian jadi tau gitu nanti bedanya kapan kita pake bootstrap Kapan kita pake Tailwind ya Jadi gak ada salahnya untuk dipelajari dulu Terus juga kalian harus tau mengenai CSS preprocessor Karena nanti di dalam Tailwind ini juga kita bisa pake perilaku dari CSS preprocessor Untuk mempermudah kita Dan kita harus belajar yang namanya NPM atau npm ya, node package manager karena untuk menggunakan tailwind kita butuh npm jadi kalian harus tau dulu apa itu npm fungsinya buat apa, cara pakenya gimana sebaiknya dipelajari dulu, jadi ini perasyarat dari playlist ini agar kalian enak ngikutinnya nanti ke depannya dan semua materinya udah ada di channel WPW ini, kalian tinggal ikutin aja playlist-playlist yang udah saya buat, mulai dari HTML, CSS, Grid dan Flexbox, SAS sebagai preprocessor, dan juga npm, ya silahkan diikuti dulu... materi-materi ini.
Lalu untuk software requirement, apa aja software yang harus kalian install di komputer atau di laptopnya untuk ngikutin playlist ini, yang pertama jelas harus ada web browser ya. Silahkan kalian boleh pake web browser kesayangan kalian, apapun boleh. Cuman yang nanti akan saya tunjukkan pake Google Chrome. Ya mau pake Edge boleh, pake Mozilla boleh, Safari boleh, silahkan. Terus juga untuk kode editor, nanti kita akan pake Visual Studio Code.
Ya kenapa pake Visual Studio Code? Karena nanti kita akan install satu extension untuk mempermudah ngoding kita yang namanya Tailwind CSS IntelliSense. Ini langsung dari Tailwind-nya.
Jadi bahkan Tailwind-nya nyaranin kita kalau mau ngoding pakai Tailwind, install dulu extension ini di VS Code. Dan yang terakhir, karena tadi ya kita mau pakai Tailwind ini harus pakai NPM, maka kita harus install sebuah package manager di dalam komputer kita yang namanya NPM ini, Node Package Manager, dengan cara kalian install Node.js di komputernya. Oke, jadi mungkin itu saja untuk video pengantar kita.
Sekali lagi mudah-mudahan teman-teman bersemangat untuk ngikutin playlistnya. Karena kedepannya kita akan belajar hal-hal seru yang ada di dalam Tailwind ini ya. Tapi untuk video berikutnya, itu sabar dulu.
Kita nggak akan langsung ngoding Tailwindnya. Kita akan cari tahu dulu ya, kenapa sih ada Tailwind ini ya. Saya pengen masuk dulu ke kepala si pembuatnya gitu ya.
Kenapa dia sampai bikin Tailwind CSS ini? Alasannya kenapa? Terus tujuannya apa?
Supaya nanti kita lebih paham lagi ketika menggunakan Tailwind CSSnya. Oke jadi mungkin itu aja, terima kasih teman-teman sudah menyaksikan, kita akan ketemu lagi di video berikutnya, saya Sandika Ghalipamit dan seperti biasa, jangan lupa titik komen.