TailWind CSS.

TailWind CSS adalah utility-first framework CSS yang di desain untuk mempermudah
dan mempercepat pembuatan aplikasi menggunakkan desain custom.

Utility-first classes merupakan utilitas tingkat rendah (low-level) untuk membuat desain
khusus di dalam file HTML, developer hanya perlu memberi nama kelas utilitas sesuai tujuan
yang di maksud, sehingga nama kelas tersebut bisa dipahami banyak orang.

Dengan menggunakkan kelas-kelas utilitas, developer hanya dapat mengontrol layout,

warna, spasi, typography, bayangan, dan lain-lain supaya desain komponennya bisa sesuai
kebutuhan, Pekerjaan itu bisa dilakukan tanpa perlu meninggalkan kode HTML atau menulis
CSS khusus.

Konsep menarik dari TailWind yaitu Framework ini mengutamakan utilitas untuk
membuat desain khusus, TailWind tidak menawarkan style dan template tertentu, sebagai
gantinya, Tailwind menawarkan opinionated building blocks yang dikenal sebagai kelas utilitas
untuk membantu mengatur style komponen website.

Untuk membuat user interface yang menarik, developer bekerja dengan

menggabungkan komponen-komponen kecil. Tailwind hanya mengambil file CSS mentah,
memprosesnya melalui file konfigurasi, lalu menghasilkan output yang diinginkan.
Fungsi Tailwind CSS

Berbeda dengan framework CSS lainnya seperti Bootstrap atau Materialize, Tailwind
merupakan framework yang lebih sederhana. Tailwind tidak menyediakan komponen siap pakai
seperti button, dropdown, atau navigation bar dengan style yang sudah ditentukan. Sebaliknya,
.framework ini menawarkan kelas utilitas yang memungkinkan developer untuk membuat
komponen mereka sendiri dan dapat digunakan kembali sesuai kebutuhan.

Developer juga memiliki lebih banyak fleksibilitas dan kendali terhadap tampilan aplikasi,
sehingga memungkinkan pembuatan situs yang lebih unik.

Berikut beberapa fungsi Tailwind CSS dirangkum dari Hubspot:

● Mengurangi penulisan CSS khusus:

 developer bisa mengatur tampilan elemen menggunakan kelas-kelas yang sudah ada
langsung di HTML. Mereka juga dapat membuat desain kustom tanpa perlu menulis
CSS.

● Bisa menjaga ukuran file CSS tetap kecil:

jika tidak menggunakan framework seperti Tailwind, developer harus terus menulis CSS
saat menambahkan fitur dan komponen baru. Akibatnya, file CSS akan semakin besar
dan berat. Namun dengan menggunakan utilitas seperti flexbox dan padding di Tailwind,
sebagian besar style dapat digunakan kembali sehingga tidak perlu perlu menulis CSS
baru.

● Tidak perlu menciptakan nama kelas sendiri:

developer bisa memilih kelas-kelas dari sistem desain dengan nama yang sudah
ditentukan sebelumnya. Mereka tidak perlu bingung mencari nama kelas untuk style dan
komponen tertentu, atau bahkan mengingat nama-nama yang rumit.

● Bisa melakukan perubahan dengan lebih aman:

dalam pendekatan tradisional, saat melakukan perubahan pada CSS kemungkinan akan
merusak halaman situs secara keseluruhan. Namun, kelas utilitas dalam HTML bersifat
lokal yang dapat diubah tanpa khawatir merusak hal lain di website

Kapan Menggunakan Tailwind CSS?

Tailwind CSS merupakan pilihan yang cocok untuk membuat prototype secara cepat.
Dengan menggunakan kelas utilitas dari Tailwind CSS, developer bisa dengan mudah meniru
komponen aplikasi tanpa perlu repot menulis CSS khusus atau mengubah style yang sudah
ada. Hal ini memungkinkan mereka untuk bisa fokus pada layout dan fungsionalitas halaman.

Selain itu, Tailwind CSS juga berguna untuk menciptakan desain yang konsisten. Developer
bisa menggunakan kelas-kelas yang sama di seluruh proyek untuk memastikan keseragaman
desain tanpa perlu mengingat atau mencari nama kelas yang berbeda.
FAQ (Frequently Asked Question)
Apa perbedaan Tailwind vs Bootstrap?

Bootstrap merupakan salah satu framework untuk pembangunan website yang responsif
dan mobile-friendly. Di sisi lain, Tailwind CSS adalah framework CSS untuk mengembangkan
user interface dengan cepat.

Perbedaan utama antara Tailwind CSS dan Bootstrap terletak pada pendekatan yang
digunakan. Tailwind CSS bukanlah kit UI yang sudah jadi dan siap pakai, berbeda dengan
Bootstrap yang sudah memiliki template khusus.

Tailwind CSS tidak memiliki tema atau komponen user interface bawaan. Namun, framework ini
menyediakan kelas-kelas utilitas yang dapat digunakan untuk membangun situs dari awal.

Berikut ini adalah beberapa perbedaan lain antara Tailwind dan Bootstrap dirangkum dari
Tutorials Point:

● Tailwind CSS menawarkan pendekatan yang lebih custom dan fleksibel dalam desain
user interface. Sedangkan Bootstrap menyediakan tema dan template siap pakai.

● Aplikasi dan website yang dibuat menggunakan Tailwind CSS memiliki tampilan yang
unik dan fleksibel. Sementara aplikasi yang dibuat dengan Bootstrap umumnya memiliki
tampilan yang serupa karena menggunakan template bawaan.

● Dibandingkan Tailwind CSS yang cenderung baru dan masih terus berkembang,
Bootstrap sudah lebih lama eksis karena dikenal responsif serta efisien.

● Tailwind CSS memiliki ukuran file yang lebih kecil, berbeda dengan Bootstrap yang
membutuhkan ukuran file lebih besar.

● Beberapa perusahaan terkenal yang menggunakan Tailwind CSS antara lain MAKE IT,
Superchat, dan Livestorm. Bootstrap digunakan oleh perusahaan terkenal lainnya
seperti Twitter, LinkedIn, Spotify, dan StackShare.
Sejarah singkat tentang Tailwind CSS

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

Versi alpha Tailwind css resmi di rilis pada tanggal 1 November 2017 dan hingga saat ini
tailwind css sudah mencapai versi 3.1.8.

Persiapan untuk belajar Tailwind CSS

Ada tiga alat yang kita butuhkan untuk coding Tailwind:

1. Teks editor - untuk menulis kode.

2. Web browser - untuk melihat hasil dari codingan tersebut.

3. Nodejs - untuk menginstal library dan package.

Node js dipakai untuk menginstal Tailwind CSS dan juga beberapa modul yang diperlukan.

Penjelasan Nodejs secara singkat

Perlu kita ketahui bahwa pada awalnya Javascript hanya dapat berjalan pada sebuah
browser, Javascript berjalan pada sebuah Javascript engine. Kita ambil contoh, pada browser
chrome, digunakan Javascript engine yang bernama V8, V8 menyediakan runtime environment
yang memungkinkan kode javascript di eksekusi dalam sebuah browser, pada saat itu,
javascript hanya berjalan disisi client atau web browser saja, hingga akhirnya, muncullah
sebuah alternatif baru yang bernama Node js.

Node js merupakan sebuah runtime environment yang bersifat open source dan juga
cross-platform di mana kita bisa mengeksekusi Javascript di luar environment browser, Node js
berjalan pada V8 yaitu sebuah Javascript engine yang memungkinkan kita untuk mengeksekusi
kode Javascript di dalamnya.

Kembali ke Tailwind.

Kemudian untuk text editor bebas, bisa memakai apa saja, sesuai keinginan masing -
masing.

Text editor yang biasa di pakai :

- VSCode.
- Sublime Text.
- Atom.
- Web storm dll.

Pada tutorial ini saya akan menggunakan text editor Visual Studio Code, karena fitur
dan extensions yang ditawarkan dapat mempermudah proses development.

Jika kita menggunakkan VSCode, kita bisa menginstal extension Tailwind IntelliSense
untuk mempermudah saat kita kurang kurang ingat atau lupa nama - nama class.
Gambar extensions Tailwind CSS IntelliSense*

Setelah siap semua kita lanjut ke langkah selanjutnya.

Membuat Project Tailwind.

Disini ada dua cara yang bisa dilakukan untuk menggunakkan Tailwind di dalam sebuah
project :

1. Menggunakkan link CDN.

2. Menggunakkan NPM dari Nodejs.

Disini kita akan nyobain keduanya.

1. Menggunakkan Tailwind dari CDN.

Menggunakkan Tailwind dari CDN tidak di rekomendasikan untuk di pakai di production,

karena akan mendapatkan hasil build CSS yang optimal.
 Tapi jika hanya untuk belajar Tailwind dan hanya untuk mencoba-coba, ini di bolehkan.
Kita akan mulai belajar Tailwind dari CDN terlebih dahulu.

Pertama kita harus menyiapkan terlebih dahulu file atau kode HTML, kemudian di dalam
tag <head> tambahkan link CSS dengan alamat CDN Tailwind, langsung kita coba di vscode
nya.

Jika dilihat hasil nya di web akan jadi seperti ini :

 Caranya gampang tapi kita harus ingat CDN hanya dipakai untuk belajar dan coba-coba
aja tidak disarankan untuk production.

Jika ingin memakai Tailwind di production, maka kita harus menggunakan Tailwind CLI
dengan NPM. kita akan mencoba untuk yang menggunakkan NPM.

2. Membuat project Tailwind dengan NPM.

Pertama kita siapkan terlebih dahulu folder baru untuk project dan gunakan perintah ini :

Itu perintah untuk membuat folder baru dari terminal, untuk cara lebih detailnya bisa cari
sendiri di youtube atau sejenisnya.

Lalu kita masuk ke dalam folder yang telah dibuat tadi, menggunakkan perintah seperti
ini :

Setelah itu kita harus melakukan inisialisasi atau persiapan awal dengan NPM di dalam folder
tersebut, kita lakukan perintah seperti ini :

Kemudian isi dengan data project tapi jika tidak mau di ubah, biarin aja kosong lalu klik enter.

Perintah ini akan membuat file baru bernama package.json yang berisi metadata project
seperti (package name, version, description, author).

Lanjut kita akan menginstal Tailwind CSS menggunakan npm.

Jalankan perintah ini di terminal atau CMD :

Itu untuk menginstal Tailwind ke dalam project.

Tunggu sampai prosesnya selesai, setelah itu membuat file konfigurasi Tailwind.

Jalankan perintah :

Perintah ini akan membuat file baru bernama tailwind.config.js. File ini berisi konfigurasi yang
dibutuhkan Tailwind.

Kalo sudah hasilnya nanti bakal jadi seperti ini atau tampilan setelah melakukan proses instalasi
tailwind.

Kemudian, kita akan melakukan konfigurasi path konten pada file tailwind.config.js.
Di bagian content: disana kita menambahkan path ./src/**

Artinya saat kita melakukan build CSS, tailwind akan mencari class-class apa saja yang dipakai
di file HTML dan JS pada path tersebut.

Setelah itu buat folder baru dengan nama src di dalam project, kemudian buat file CSS dengan
nama input.css dan isi seperti ini:

Selanjutnya buat file index.html didalam folder src untuk menggunakkan class-class dari
tailwind.

Isi file index.html seperti ini:

Perhatikan link CSS di HTML ini, kita akan menulisnya seperti ini :
Karena kita buka di live server atau localhost, jika kamu ingin langsung buka tanpa live server,
cukup tuliskan seperti ini tanpa tanda /

Tanda ../ artinya kita ingin mengakses file CSS yang berada di parent direktori.

Ini karena kita menyimpan file HTML-nya didalam folder src.

Dan file dist/output.css ini belum ada. File ini akan di buatkan otomatis oleh Tailwind. Begini
caranya:

Jalankan perintah seperti ini:

Perintah ini bertujuan untuk membuat file CSS ( output.css ) berdasarkan class-class yang
dipakai pada path konten ( index.html ).

Hasilnya akan seperti ini:

Jika kamu ingin hasil buildnya dioptimasi (minify), gunakan opsi --minify di belakangnya,
contoh:

Hasil output.css akan di minify.

Hasil build yang minify ini cocok di pakai di production, karena ukuran lebih kecil dan sudah
dioptimasi.

Jika kamu membuka file index.html di browser sekarang, maka tidak akan ada hasil css dari
tailwind.

Saya ini ngambil dari website petani kode ya guys, jadi kalo masih bingung bisa liat langsung di
website resmi petani kodenya.

Hasil css gak masuk? Santai, ini karena kita menuliskan href dengan /dist seharusnya ../dist
agar dia bisa membaca folder dist.

Coba kalian ubah dari /dist/ menjadi ../dist/

Hasilnya bakal kayak gini:

Lanjut ke tutorial selanjutnya.

Menggunakkan live server

Alur kerja kita di project Tailwind dengan NPM adalah seperti ini:

1. Ubah atau gunakan class di file HTML.

2. Jalankan perintah untuk build CSS Tailwind.

3. Lihat hasilnya di browser.

Ini cukup merepotkan, karena harus dilakukan berulang-ulang kali.

Biar gak kayak gini, kita bisa pake live server dan membuat custom script sendiri di
package.json.

Silahkan di buka file package.json lalu di bagian “script” untuk menjadi seperti ini:
Pada script ini, kita menentukan perintah untuk build CSS tailwind dengan opsi --watch.

Ini artinya tailwind akan memantau perubahan yang terjadi pada konten, lalu langsung
melakukan build otomatis.

Setelah itu install extension live server preview di vscode.

Extension ini digunakan untuk melihat hasilnya langsung tanpa harus membuka browser
terlebih dahulu.

Lalu buka terminal dan masukan perintah seperti ini.

Ini akan menjalankan perintah yang sudah kita definisikan di package.json.

Setelah itu, klik kanan pada file index.html kemudian pilih show preview.

Oke kita lanjut lagi guys.

Pengantar
Sebagai front-end developer , pada dasarnya kita hanya perlu menguasai 3 bahasa, yaitu
HTML, CSS dan JavaScript. Jika kita sudah menguasai ketiga bahasa tersebut, kita sudah
dapat membuat sebuah website yang cantik dan attractive . Namun, kita seringkali
dibantu dengan alat-alat yang akan memudahkan dan mempercepat pekerjaan kita.
Framework dan library termasuk ke dalam alat-alat yang sering kita gunakan, entah itu
untuk CSS atau JavaScript.

Pada bagian JavaScript kita seringkali menemukan website yang dibangun dengan
jQuery, React, Vue, atau Angular. Pada bagian CSS kita seringkali menemukan website
yang dibangun dengan Bulma, Bootstrap, Spectre, Foundation, Materialize atau yang
lainnya. Pada dasarnya semua library dan framework memiliki kegunaan yang sama, yaitu
untuk memudahkan kita dalam merancang sebuah website .

Bootstrap misalnya, kita dapat membuat sebuah desain website dengan cepat
menggunakan Bootstrap, karena Bootstrap memiliki pra-desain komponen-komponen
yang dapat kita gunakan, sehingga kita tidak perlu lagi membuatnya dari awal.

Begitu juga dengan Bulma dan framework CSS semacamnya, memiliki pra-desain yang
cantik sehingga kita hanya perlu menyusun blok-blok komponen tadi hingga membentuk
sebuah website yang sesuai dengan keinginan kita — initnya, kita tidak perlu membuat
desain website dari awal dengan framework CSS tersebut. Framework-framework tadi
termasuk ke dalam jenis framework UI kit, karena mereka memiliki pra
desain komponen.
Framework UI kit memiliki beberapa masalah, seperti masalah dalam hal skalabilitas,
kustomisasi dan juga desain yang tidak unik. Bagaimana tidak, website yang dibangun
dengan framework UI kit akan memiiki desain yang cenderung sama dengan website lain
yang menggunakan framework yang sama. Hal ini terjadi karena framework UI kit
memiliki pra-desain yang siapun dapat menggunakannya.

Selain itu masalah skalabilitas, framework UI kit terdiri dari banyak pra desain dan dari
masing-masing pra-desain tersebut memiliki nama class . Ketika kita ingin membuat pra-
desain baru seringkali bingung memberikan nama class -nya atau kita juga perlu
membuat rule CSS baru yang seringkali membuat banyak duplikasi kode.

Dari masalah tersebut, hadirlah framework dengan jenis utility classes atau nama
metodologinya Atomic. Framework jenis ini tidak memiliki pra-desain komponen, tidak
seperti framework UI kit. Framework jenis ini hanya berisi sekumpulan class utilitas atau
class-class kecil yang merepresentasikan CSS declaration yang bila dikombinasikan akan
menghasilkan sebuah visual . Jadi, dengan framework jenis ini kita perlu kreatif dalam
mengkombinasikan utility class sehingga menamilkan sebuah elemen untuk desain
website yang kitainginkan.

Juga, dengan utility-first framework kita perlu membangun semua bagian-bagian atau
komponen-komponen website dari awal, kita membangunnya sendiri. Dengan seperti ini
desain website yang kita buat akan unik dan kemungkinan desainnya sama dengan orang
lain tidak tinggi. Tidak seperti framework UI kit, kita hanya perlu menggunakan nama-
nama class untuk setiap komponen dan kita hanya perlu menyusunnya saja. Sehingga
kemungkinan desain yang kita buat sama dengan orang lain sangat tinggi.
Utility-first framework juga memecahkan masalah skalabilitas. Karena semua
komponennya dibuat dari awal dan dibuat dari sekumpulan utility classes , maka tidak
akan ada masalah skalabilitas, tidak akan ada masalah duplikasi kode.

Terdapat banyak utility-first framework di luar sana, seperti Tachyons, Turret, Beard atau
yang lebih baru dan modern , Tailwind. Tailwind merupakan sebuah utility-first framework
yang dibuat oleh Adam Wathan dan dirilis pertama kali pada akhir tahun 2017.
Framework ini sangat digemari oleh banyak developer , dari front-end hingga back
end . Framework ini mudah digunakan sehingga sangat digemari oleh back-end developer
yang tidak begitu pandai dalam CSS. Tailwind juga biasa digunakan bersamaan dengan
Laravel atau framework JavaScript, seperti React dan Vue. Bila kamu memiliki phobia
terhadap CSS, maka Tailwind bisa menjadi obatnya.

Tailwind sangat memungkinkan kamu untuk membangun sebuah desain website yang
unik dan tanpa kamu perlu menulis kode CSS sedikitpun. Mungkin kamu akan berpikir
bahwa kamu akan membutuhkan waktu yang lebih lama ketika membangun sebuah
website dengan utility-first framework ketimbang dengan framework UI kit. Ya, benar.
Karena kamu harus memikirkan desain dan mengimplementasikan desain tersebut dari
 awal sendiri. Namun, kamu perlu ingat manfaat-manfaat yang diberikan oleh utility-first
framework , sehingga kamu dapat mempertimbangkannya.

Dalam buku ini, kita akan mempelajari framework Tailwind CSS. Mulai dari konsep,
workflow , hingga membuat sebuah website responsive dengan Tailwind CSS. Buku ini
tidak untuk semua orang, setidaknya kamu memahami cara mengoperasikan komputer,
memahami HTML, memahami CSS, atau bisa dibilang kamu sudah pernah membangun
website sebelumnya dan ingin mempelajari hal baru untuk meningkatkan skill .

CSS Fundamental
CSS ( Cascading Style Sheets ) merupakan sebuah bahasa untuk memberikan style pada
dokumen yang ditulis dengan bahasa markup , seperti HTML. CSS juga yang memberi
instruksi kepada browser , bagaimana HTML ditampilkan.

Sederhananya, CSS memungkinkan kamu untuk mengatur jenis huruf, ukuran huruf,
warna latar belakang, dan mengatur gaya elemen-elemen lainnya yang terdapat pada
dokumen web.

Misal, kamu memiliki kode HTML seperti berikut,

<p>Hai, nama saya Muhamad Nauval Azhar</p>

Kode di atas untuk membuat sebuah paragraph di HTML. Tentu, seharusnya kamu
menulisnya secara utuh, mulai dari doctype hingga
</html> .

CSS dapat mengendalikan style pada paragraph tersebut, contoh pertama ini kita akan
mengubah warna teks tersebut menjadi merah. Maka kodenya seperti berikut,

p {
color: red;
}

Kode di atas merupakan sebuah style rule pada CSS untuk mengatur
warna teks pada elemen HTML yang menggunakan tag dokumen web <p>
tersebut. pada

Perlu diingat, kode CSS di atas tidak akan mengubah 1 paragraf saja, melainkan
mengubah seluruh warna teks menjadi merah pada tag .
<p>
Apa hanya warna teks saja?

CSS tidak hanya mengatur warna teks saja, banyak yang dapat kamu lakukan dengan CSS.
Kamu dapat mengubah jenis huruf, warna latar belakang, mengatur latar belakang gambar,
membuat sistem grid, membuat menu, dan hal lainnya yang relevan dengan interface web
kamu.
 Kita tidak akan membahas dasar CSS secara lengkap di sini

Kita tidak akan membahas lagi dasar-dasar CSS secara lengkap. Karena, saya asumsikan
kamu sudah memahami konsep dan terminologi yang ada di CSS, seperti selector, CSS rule,
CSS declaration, property, value, vendor prefixes, dan hal lainnya. Tapi, sebagai pembuka
dan untuk pengingat, saya hanya akan membahas sekilas saja konsep dasar dari CSS yang
barusan disebutkan. Bisa saja kamu membaca post ini hingga selesai meskipun kamu tidak
begitu paham mengenai CSS, tapi, risikonya seringkali menghasilkan pertanyaan-pertanyaan
konyol yang mengundang orang untuk mem- bully kamu dalam diskusi publik. Tentu, kamu
nggak mau, kan?

Menulis CSS

Menulis kode CSS dan menyisipkannya ke dalam HTML terdapat beberapa cara. Pada
dasarnya ada 3 cara yang akan sebutkan, diantaranya: internal style , external style dan
inline style.

1. Internal Style
Menyisipkan kode CSS dengan cara ini yaitu menggunakan tag
<style>berikut, yang ada pada HTML. Misal kita memiliki struktur HTML
seperti
<!DOCTYPE html>
<html>
<head>
<title>Belajar CSS</title>
</head>

<body>
<p>Ini tulisan</p>
</body>
</html>

Kemudian kita ingin memberikan style atau menyisipkan kode CSS ke dalam HTML
tersebut, maka tuliskan CSS rule yang hendak kita gunakan di antara tag dan sisipkan
sebelumpenutup tag .
<style> </head>

<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
p {
color: red;
}
 </style>
</head>
<body>
<p>Ini tulisan</p>
</body>
</html>

2. External Style
Berbeda dengan cara sebelumnya, kita akan menuliskan semua CSS rule pada file yang
berbeda dengan file HTML. Buat sebuah file baru dengan ekstensi .css , di sini saya
berikan contoh dengan nama
style.css p { dan isi file tersebut seperti berikut,

color: red;
}

Untuk menyisipkan file tersebut ke dalam HTML maka gunakan tag seperti berikut,

<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet"href="style.css">
</head>
<body>
<p>Ini tulisan</p>
</body>
</html>

Attribute bertujuan untuk mengidentifikasi file CSS yang kita

href
gunakan pada HTML tersebut. Sedangkan attribute bertujuan
rel
untuk menspesifikasi relationship (hubungan) antara kedua file, dalam konteks ini
adalah HTML dan CSS, karena CSS merupakan stylesheet maka attribute diberi nilai
stylesheet.
rel

3. Inline Style
Ada kemiripan antara cara ini dengan internal style, karena keduanya tidak menuliskan
CSS rule pada file lain. Cara ini sangat sederhana, karena kamu tidak perlu menuliskan
selector pada kode CSS. Kamu akan langsung menuliskan CSS declaration, karena cara ini
akan menyisipkan kode CSS langsung pada tag yang dikehendaki. Sebagai contoh,

<!DOCTYPE html>
<html>
<head>
 <title></title>
</head>
<body>
<p style="color: red;">Ini tulisan saya yang sedang belajar
CSS</p>
</body>
</html>

Cara ini sekilas begitu sederhana dan mudah untuk diterapkan, tapi, silahkan luangkan
waktu untuk membayangkan bila kamu memiliki 1000 tag dan diharuskan memiliki style
yang sama. Tentu, kamu hanya
<p>
perlu menyalinnya saja, bukan? Tapi, ketika kamu perlu mengubah nilai dari property
yang ada pada CSS declaration, bagaimana? Lalu, bila CSS declarartion tadi terdapat lebih
dari 10 property, bagaimana? Tentu, akan merepotkan kamu.

Selain ketiga cara tersebut, kamu dapat menyisipkan style CSS pada HTML dengan
JavaScript. JavaScript memiliki DOM ( Document Object Model ), sederhananya, DOM
memandang HTML sebagai object dan memungkinkan kamu untuk memanipulasi style,
content, attribute dan lainnya melalui API yang disediakan oleh JavaScript.
Ketiga cara di atas juga bisa kamu terapkan sesuai kondisi. Hal yang perlu diingat adalah
menulis CSS rule yang reusable atau yang dapat digunakan kembali dan maintainable
atau yang dapat dipelihara, walaupun ada beberapa aspek lain yang perlu kamu terapkan
juga ketika menulis kode CSS, tapi, setidaknya dengan dua hal tadi saja kamu sudah
dapat menulis kode CSS yang human-readable .

CSS itu sederhana

CSS merupakan bahasa yang sederhana, memiliki sintaks atau gaya penulisan yang
sederhana dan mudah dipahami. Seperti yang sudah kamu lakukan sebelumnya, untuk
mengubah warna teks, hanya membutuhkan 3 baris kode saja, bukan?

Mari kita bedah dasar dari sintak CSS ini. CSS itu sederhana,

selector {
// CSS Declaration
}

Jangan terlebih dahulu panik karena mendengar istilah yang belum pernah kamu dengar,
terkadang istilah yang kedengerannya keren, padahal bisa jadi merupakan sesuatu yang
sederhana untuk dipahami.

Mari kita bedah kode CSS di atas, saya akan bagi menjadi beberapa poin agar lebih
mudahdipahami,
 1. CSSRule
Kode di atas merupakan sebuah CSS rule. Blok kode yang akan memberikan efek pada satu
atau beberapa elemen pada HTML. Efek yang akan diberikan setiap CSS rule itu berbeda-
beda, bergantung pada CSS declaration . CSS declarartion ditulis di antara tanda buka dan
tutup
kurawal, seperti ini: .
{ CSS _declarartion }_

2. CSSSelector
Seperti yang disebutkan sebelumnya, CSS rule dapat memberikan efek pada satu atau
beberapa elemen, hal itu bergantung pada selector . Sederhananya, selector merupakan
sebuah cara pada CSS yang memungkinkan kita dapat memilih elemen yang akan kita
berikan style. Pada sebuah dokumen web, sudah tentu terdapat lebih dari satu tag HTML
saja, maka dari itu, dengan selector kita dapat memilih satu atau beberapa elemen HTML
sekaligus untuk diberikan style yang sama.

Selector dapat berupa nama tag HTML, nama class, ID, attribute tag, pseudo-
selector, dan lain sebagainya.

Selector tag : kamu hanya perlu menuliskan nama tag- nya saja, misal: , , , , dan masih
banyak .
div table video span p

Selector ID: kamu perlu menambahkan tanda tagar (#) di awal nama ID, misal: , , dan lain
sebagainya.
#header #footer #main

Selector class : kamu perlu menambahkan tanda titik di awal nama

class , misal: , , , dan lain
.name .box .menu
.widget
sebagainya.

3. CSS Declaration
Di sini merupakan titik “kenikmatan” bermain dengan CSS. Karena, di sini kamu dapat
mengatur gaya yang kamu inginkan terhadap elemen yang sudah di- select sebelumnya. CSS
declaration merupakan jalan untuk mengatur gaya pada sebuah CSS rule. CSS declaration
terdiri dari property, colon, value dan semi-colon. Kita sudah membuat satu baris
CSS declaration sebelumnya, yaitu: . Kode tersebut
color: red;
merupakan satu baris CSS declaration. Kenapa disebut CSS declarartion? Karena, pada
kode tersebut terdapat sebuah property, yaitu ” Sebuah colon, yaitu . Sebuah value, yaitu .
color
: red
Terakhir, sebuah semi-colon, yaitu ;.
 Property Merupakan sebuah instruksi untuk memberikan jenis style. Property ditulis
dengan lower-case atau huruf kecil dan tanda “-“ sebagai pemisah (jika nama peroperty
terdiri dari 2 suku kata atau lebih). Setiap nama property memiliki efeknya masing-masing.
Efek yang diberikan juga bergantung pada value yang diberikan, value yang diberikan juga
harus relevan dengan nama property. Sebagai contoh sebelumnya, kita mengubah warna
teks menggunakan property color , membuatnya menjadi warna merah, karena kita
memberikan value red pada property tersebut. Maka dari itu, value dan nama property
harus relevan.

Pemberian nilai atau value pada sebuah property, yaitu setelah tanda titik dua
atau colon . Satu baris CSS declarartion diakhiri dengan
:

tanda semi-colon atau titik koma ; . CSS declarartion pada posisi terakhir tidak wajib
ditutup dengan tanda titik koma, tapi, bila menggunakan, lebih baik.

Tentu, kita dapat menulis beberapa CSS declarartion sekaligus pada satu buah CSS rule.
Berapa banyak CSS declarartion yang kita butuhkan, bergantung pada style apa yang
hendak kita buat untuk elemen tersebut. Misal, kita ingin mengubah warna teks, latar
belakang dan jenis
huruf pada elemen dengan class: .nama { background-color: blue; }

berikut, font-family: 'arial'; nama

color: red; . Maka, kodenya seperti

Kode di atas merupakan sebuah CSS rule dan akan mengubah warna teks menjadi
merah, latar belakang menjadi warna biru dan mengubah jenis huruf menjadi .
arial

Kita sudah mempelajari mengenai CSS pada bagian ini. Pada bagian berikutnya kita akan
membahas TailwindCSS dan saya asumsikan kamu sudah paham dasar dan terminologi
yang ada pada CSS. Bila belum paham, kamu dapat mengulang membacanya hingga
paham.

TailwindCSS
Bila framework pada umumnya yang kamu jumpai terdiri dari banyak pra desain komponen,
di TailwindCSS ini kamu tidak akan menemukan pra desain komponen seperti button, card,
alert, carousel atau yang lainnya. Karena TailwindCSS bukan merupakan sebuah UI kit,
melainkan sebuah utility-first framework untuk membangun antarmuka kustom dengan
 cepat.

Sederhananya, di dalam TailwindCSS terdapat banyak class-class kecil yang

merepresentasikan CSS declaration . Sehingga, ketika kamu ingin membuat sebuah
komponen, maka kamu perlu menggunakan beberapa class-class kecil tersebut hingga
tercipta komponen yang kamu maksud.

Misal, kamu ingin membuat sebuah komponen button. Pada Bootstrap framework atau
framework lain yang memiliki pra-desain komponen, kurang lebih kamu melakukannya
seperti ini:

<button class="btn">Button</button>

atau

<button class="button">Button</button>

Sedangkan, pada TailwindCSS kamu perlu melakukannya seperti ini:

<button class="bg-blue-500 text-white font-bold py-2 px-4 rounded">

Button
</button>

Class-class di atas mewakili property dan value (CSS declaration ) sendiri,

diantaranya:
bg-blue-500 merepresentasikan property #4299e1; font-bold merepresentasikan property
text-white merepresentasikan property font-weight: 700;
background-color: color: #fff;
py-2 maksudnya padding-y atau padding-vertical
merepresentasikan property padding- bottom: 0.5rem; padding-top: 0.5rem;
dan

px-4 maksudnya padding-x atau padding-horizontal merepresentasikan property

dan
padding-left: 1rem;
padding-right: 1rem;
rounded merepresentasikan border-radius: .25rem;

Sehingga dari semua utility class yang digunakan di atas, ketika di compute oleh browser
akan menghasilkan sebuah visual button yang kita inginkan. Browser akan membaca semua
utility class yang digunakan seperti ini:

background-color: #4299e1;
color: #fff;
font-weight: 700;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
padding-left: 1rem;
 padding-right: 1rem;
border-radius: .25rem;

Kelihatannya ribet, ya ?

Tapi, dengan seperti ini, UI yang kamu buat dengan orang lain akan berbeda meski
menggunakan framework yang sama. Berbeda halnya bila menggunakan UI kit, UI yang
dibuat akan cenderung sama, karena di dalam UI kit sudah tersedia pra-desain komponen,
meski style- nya dapat di- override, tetapi hasilnya mungkin tidak berbeda jauh.
TailwindCSS tidak dapat dibandingkan dengan framework UI kit — seperti Bootstrap, Bulma
atau Spectre — karena pada dasarnya, mereka memilikikonsepyangberbeda.

Bila pada framework UI kit kamu perlu membuat beberapa custom class untuk
mengkostumisasi pra-desain komponen yang digunakan, sedangkan di TailwindCSS kamu
akan dapat mereduksi penggunaan custom class . Karena, untuk membuat komponen kamu
perlu melakukannya dari awal, dengan cara menyusun utility class.

Mirip Seperti Inline Style?

Bila kamu menyadari bahwa Tailwind ini mirip seperti menulis CSS dengan teknik " inline
style ", berarti kamu sudah cukup paham dengan konsep Tailwind.

Secara teknik memang sama seperti kita menulis inline style pada sebuah elemen. Tapi,
perlu kamu ingat bila kamu menulisnya dengan teknik inline style , maka kamu akan
menulisnya seperti ini:

<button style="background-color: #4299e1; color: #fff; font-weight:

700; padding-top: 0.5rem; padding-bottom: 0.5rem; padding-left:
1rem; padding-right: 1rem; border radius: .25rem;">
Aku Adalah Button
</button>

Sedangkan bila dengan utility class , kamu melakukannya seperti ini:

<button class="bg-blue-500 text-white font-bold py-2 px-4 rounded">

Button
</button>
Bedanya apa? Bila menggunakan inline style , kamu benar benar menulis CSS declaration
secara langsung ke elemen tersebut. Sedangkan pada Tailwind, kamu menulis class atau
meng- assign utility class ke elemen tersebut. Sudah terlihat bedanya, kan?

Dengan seperti ini, desain kamu akan lebih konsisten karena kamu menggunakan class
bukan menulis CSS declaration secara langsung, sehingga elemen lain yang
menggunakan class yang sama akan memiliki visual yang sama.

Perlu diingat, Tailwind juga mendukung responsive design dan pseudo classes. Pernah
tidak terpikir oleh kamu untuk memberikan style yang berbeda ketika elemen tersebut
 dalam state tertentu, ketika di- hover misalnya. Dengan Tailwind kamu dapat
melakukan ini menggunakan
state variant:

<span class="text-indigo-500 hover:text-black">Saya text-

indigo-500
Text</span>

Elemen di atas hanyalah sebuah teks, teks tersebut memiliki warna dalam keadaan
normal. Nah, ketika cusror
menyentuh elemen teks tersebut, maka teks tersebut warnanya berubah menjadi .
text-black

Jika dalam CSS murni, kamu menuliskannya seperti ini:

<span>Saya Text</span> hover:

<style>
span {
color: indigo;
}
span:hover {
color: black;
}
</style>

Jadi, di Tailwind kamu hanya perlu menambahkan prefix

sebelum utility class yang kamu gunakan. Selain warna teks, kamu juga dapat
menggunakan yang lain, misal: , hover:bg-indigo-500
hover:opacity-50 dan yang lainnya.

Selain lain: hover pseudo-classes yang

, kamu juga dapat menggunakan

focus:{utility-class} active:
{utility-class} disabled:{utility-
class} visited:{utility-class}
active:{utility-class} first:
{utility-class} last:{utility-
class} odd:{utility-class}
even:{utility-class}
group-hover:{utility-class} group-
focus:{utility-class} focus-within:
{utility-class}
Seperti yang disebutkan sebelumnya, Tailwind juga sudah memiliki fitur responsive
design .
 Mirip seperti state variant , cara menggunakan responsive design di Tailwind juga
menggunakan prefix . Namun, nama prefix -nya yang berbeda. Sebelum membahas ini, saya
asumsikan kamu paham bagaimana responsive design pada CSS bekerja ( media queries ).

Tailwind memiliki 4 breakpoints :

sm: min-width: 640px

md: min-width: 768px
lg: min-width: 1024px
xl: min-width: 1280px

Misal, kamu ingin membuat elemen teks berwarna untuk

text-black
semua device , namun pada device dengan lebar >= 1024 akan berubah
warna teks tersebut menjadi menuliskannya seperti ini: text-blue-500
. Maka kamu

<span class="text-black lg:text-blue-500">Saya teks</span> Ya, menulis

responsive design di Tailwind formatnya seperti ini:

{breakpoint}:{utility-class} . sm:opacity-50 Contoh: , md:bg-blue-500

dan lain sebagainya.

Kamu dapat mempelajari tentang responsive design lebih lengkap pada Tailwind di
bagian responsive design .

TailwindCSS bukan satu-satunya utility first

framework
TailwindCSS dirilis pertama kali pada tahun 2017, tepatnya tanggal 2 November. Oleh
Adam Wathan. Sebelum itu, ada beberapa framework yang memiliki konsep yang
serupa seperti TailwindCSS, diantaranya:

Shed.CSS ( https://tedconf.github.io/shed-css )
Tachyons ( http://tachyons.io )
Beard ( http://buildwithbeard.com )
Turret ( https://turretcss.com )

dan masih banyak lagi

Framework-framework di atas lahir kurang-lebih 6–7 tahun kebelakang. Jadi, sebelum

adanya TailwindCSS, konsep utility-first framework sudah pernah diterapkan. Dalam kata
lain, TailwindCSS bukan satu-satunya utility-first framework.
Selain framework di atas, Bootstrap juga memiliki utility classes yang baru saja
ditambahkan pada versi 4. Sebelumnya juga sudah ditambahkan, tapi, saat versi 3 diberi
nama helper classes.

Meski belum lama, TailwindCSS begitu menarik perhatian, karena kurang dari 2 tahun
sudah mendapat 10,000+ star di GitHub.

Meski begitu, kita tidak dapat menyimpulkan bahwa TailwindCSS lebih bagus dari utility-
first framework yang lain, karena untuk menyimpulkan itu, kita perlu menguji beberapa
framework serupa yang lainnya. Belum tentu juga satu framework cocok untuk segala
kasus.

Jadi, bila kamu mencari framework yang terdiri dari sekumpulan pra desain komponen,
mungkin, TailwindCSS tidak cocok untuk kamu. Tapi, bila kamu ingin membangun
antarmuka yang memiliki identitas dan unik, mungkin TailwindCSS cocok untuk kamu.

Kamu tidak akan mengendarai mobil sport untuk off-roading

Konfigurasi

Tailwind CSS pada dasarnya tidak memerlukan berkas konfigurasi, karena framework ini
sudah memiliki konfigurasi bawaan. Artinya, kamu tidak perlu melakukan konfigurasi
apapun untuk memulai menggunakan framework ini. Tapi, terdapat beberapa kasus yang
mengharuskan kamu untuk melakukan kustomisasi, seperti ingin merubah kode warna
biru pada bawaan Tailwind, jenis huruf bawaan, atau style yang lain.

Untuk melakukan kustomisasi tersebut, kamu tidak perlu menulis kode CSS apapun,
kamu hanya perlu membuat sebuah berkas konfigurasi bernama . Berkas tersebut harus
berada di root
tailwind.config.js
folder proyek kamu. Juga, berkas tersebut tidak perlu kamu buat manual. Karena,
Tailwind CLI dapat menggenerasi berkas konfigurasi tersebut secaraotomatis.

npx tailwindcss init

Perintah di atas untuk menggenerasi berkas konfigurasi Tailwind, tentu kamu harus
berada di dalam root folder proyek kamu. Juga, berkas konfigurasi yang
berhasildigenerasi oleh perintah di atas akan berisi seperti ini:

// tailwind.config.js
module.exports = {
theme: {},
variants: {},
plugins: [],
}
Untuk saat ini, kamu tidak perlu panik karena tidak tahu bagaimana menulis konfigurasi di
Tailwind CSS. Karena, kita akan membahas konfigurasi lebih lengkap di bagian yang lain.
Pada bagian ini, saya hanya memberikan sedikit pratinjau bahwa Tailwind merupakan
sebuah framework yang highly customizable .
Betapa Besarnya TailwindCSS

Tailwind memiliki ukuran berkas yang lumayan besar dibanding framework populer yang
lain.

File Size

Comparation

Hal yang wajar mengingat Tailwind terdiri dari sekumpulan utility classes. Tentu solusi yang
memungkinkan adalah dengan menghapus utility class yang tidak kita gunakan. Tapi,
bagaimana caranya? Untuk mengatasi masalah ini, kamu dapat menggunakan PurgeCSS (
https://ww w.purgecss.com ). Ia merupakan sebuah tool yang akan membantu kamu
dalam menghapus CSS yang tidak terpakai. Keren, kan ?
Dengan seperti itu, ukuran file CSS kamu bisa saja hanya berukuran 13kb. Seperti yang
dilakukan Firefox Send ( https://send.firefox.com ), mereka menggunakan TailwindCSS dan
file CSS mereka hanya berukuran 13.1kb saja (setelah di- minify ) dan berukuran 4.7kb
(setelah di- gzip ).

Preflight

HTML memiliki default style pada setiap elemennya. Misal div , elemen ini memiliki CSS
declarartion bawaan, yaitu display: block; .

Inspect

Element

Untuk daftar lengkap elemen mana saja yang memiliki default style, kamu dapat
melihatnya di sini .

Setiap browser memiliki default style -nya masing-masing, diantaranya:

Internet Explorer ( http://web.archive.org/web/20170122223926/htt

p://www.iecss.com/ )
 Firefox ( https://dxr.mozilla.org/mozilla-central/source/layout/style/ res/html.css )
Opera ( http://web.archive.org/web/20161031005401/http://www.ie css.com/opera-
10.51.css )
Chrome/Webkit ( http://trac.webkit.org/browser/trunk/Source/Web
Core/css/html.css )
Di luar default CSS tersebut yang terbaru atau bukan, tapi esensinya adalah bahwa setiap
browser memiliki default style untuk setiap tag di HTML.

Tentu dapat dibayangkan, ketika kamu membangun sebuah website dan mengaksesnya
di browser yang berbeda, maka beberapa elemen yang telah kamu berikan style
sebelumnya ternyata memiliki tampilan yang sedikit berbeda karena “tercampur” dengan
default style browser tersebut. Maka tampilan website kamu akan menjadi inkonsisten
— meski tidak banyak.

Untuk mengatasi masalah seperti ini, framework atau library CSS pada umumnya memiliki
base style, yang tujuannya untuk meng- override default style pada setiap browser.
Dengan seperti itu, elemen pada HTML akan memiliki default style yang sama pada setiap
browser .

Tailwind memiliki base style -nya sendiri, bernama “preflight” atau yang sebelumnya
bernama “base”. Tailwind menggunakan library pihak ketiga untuk melakukan ini, yaitu
menggunakan Normalize.css ( https://github.c om/necolas/normalize.css/ ). Kamu dapat
melihat elemen mana saja yang diberikan default style oleh Tailwind di sini (
https://github.com/tai lwindcss/tailwindcss/blob/next/src/plugins/css/preflight.css ).

Warna Pada Tailwind

Tailwind menyediakan banyak sekali palet warna. Bahkan setiap warna dapat diatur tingkat
transparansinya. Setiap warna memiliki 9 tataran transparansi.

Misal biru:

Tailwind

Color Palette

Dengan seperti ini, kamu tidak ada keterbatasan dalam menggunakan warna. Sehingga,
kamu akan lebih bebas lagi dalam membuat komponen.

Beberapa utility classes yang terkait dengan warna:

bg-red-200
 text-green-900
border-teal-500
divide-blue-100
placeholder-indigo-400

Angka di belakang, seperti 200, 900, 500, 100 atau berapapun adalah tingkatan warna pada
Tailwind, semakin tinggi angkanya, semakin gelap warna tersebut. Kamu dapat memberikan
tingkatan warna dari 100-900.

Utility Classes

Tailwind membagi utility class -nya menjadi 15 kategori. Dari 15 kategori tersebut terdapat
beberapa utility class di bawahnya, dan saya tidak akan membahas semua utility class di
bawahnya, hanya akan membahas beberapa utility class yang dirasa perlu dijelaskan.
Karena
utility class lainnnya memiliki fungsi yang sama seperti CSS pada umumya.

15 kategori tersebut diantaranya:

1. Layout
2. Flexbox
3. Grid
4. Spacing
5. Sizing
6. Typography
7. Background
8. Border
9. Table
10. Effect
11. Transition
12. Transform
13. Interactivity
14. SVG
15. Accessibility

Seperti yang disebutkan di awal, semua utility class pada Tailwind tersebut
merepresentasikan CSS declaration- nya masing-masing. Jadi, Tailwind ini sebenernya
framework yang sederhana, kamu hanya perlu mendalami CSS dan kamu akan dapat
menggunakan Tailwind dengan sangat lancar.

Selesai
Selamat kamu baru saja belajar konsep dari TailwindCSS!
Mempelajari sesuatu yang baru terkadang seolah-olah menakutkan karena kita terlalu
mendengarkan asumsi orang lain terhadap sesuatu yang baru tadi. Untuk mengatasi hal
seperti tadi, kita hanya perlu mencobanya sendiri, dengan seperti itu kita akan memiliki
penilaian sendiri terharap sesuatu yang baru tersebut.

Menyiapkan Environment
Setelah berkenalan dengan Tailwind, saatnya belajar lebih dalam dengan Tailwind. Untuk
memulai eksplorasi, tentu, kita memerlukan alat-alat pendukung. Beberapa alat-alat ini
wajib di- install pada komputer kamu, dan beberapa yang lainnya tidak wajib.

Teks Editor

Saya asumsikan pembaca buku ini adalah seseorang yang pernah ngoding sebelumnya.
Jadi, sudah pasti paham soal teks editor dan sudah pasti terdapat teks editor di dalam
komputernya, terlepas dari nama teks editor yang digunakan. Kamu bisa saja
menggunakan teks editor A, dan temannu menggunakan teks editor B. Karena, memilih
teks editor merupakan hal yang subyektif. Dan, hal semacam ini adalah hal yang lumrah
— tidak perlu diperdebatkan.

Saya sendiri menggunakan teks editor Sublime Text versi 3. Bukan karena saya tidak
suka VS Code, melainkan karena Sublime Text memiliki performa lebih cepat ketimbang
teks editor yang berjalan di atas browser . Tapi, bila saya boleh menyarankan, kamu
dapat menggunakan VS Code. Karena kamu dapat meng- install sebuah extension yang
akan memudahkan kamu menggunakan Tailwind.

Extension/Package
Bila kamu menggunakan VS Code, maka istilah yang digunakan extension ; bila kamu
menggunakan Sublime Text, maka istilah yang digunakan adalah package . Keduanya
memiliki fungsi utama yang sama, yaitu untuk memperluas fungsi dari teks editor tersebut.

Kabar baik untuk kamu yang menggunakan kedua teks editor ini, karena terdapat extension
dan package yang dapat kamu install untuk mempermudah kamu dalam menggunakan
Tailwind. Extension atau package ini tidak wajib kamu install , namun, sangat
direkomendasikan.

VS Code
 IntelliSense

Intellisense merupakan sebuah extension VS Code yang akan mempermudah kamu dalam
menggunakan Tailwind. Fitur-fitur yang dimiliki extension ini:

Autocomplete . Dapat memberi saran nama class yang terdapat di Tailwind

Linting . Memberi tahu bila ada error atau potensi bug pada CSS dan HTML kamu
Hover Previews . Melihat kode CSS rule pada utility class Tailwind saat di- hover
Syntax Highlighting . Memberikan definisi syntax sehingga fitur Tailwind disorot
dengan benar

Kamu dapat meng- install -nya di VS Code kamu secara gratis melalui tautan ini:
https://tailwindcss.com/docs/intellisense .

Sublime Text

Tailwind CSS

Autocomplete
Tailwind CSS Autocomplete merupakan sebuah package Sublime Text yang akan
memudahkan kamu menggunakan Tailwind. Package ini lebih sederhana ketimbang
Intellisense. Package ini hanya menyediakan autocomplete nama-nama class yang
terdapat di Tailwind saja.
Kamu dapat meng- install -nya di Sublime Text melalui tautan berikut: htt
ps://github.com/danklammer/tailwind-sublime-autocomplete.

NodeJS

Node JS merupakan sebuah JavaScript runtime environment. Node JS memungkinkan

kamu menjalankan kode JavaScript di luar browser , lebih tepatnya di CLI. Ketika kamu
meng- install Node JS, di dalamnya sudah terdapat NPM. NPM sendiri merupakan Node
Package Manager yang di dengannya kamu dapat mengelola package Node, seperti
install , uninstall dan lain sebagainya. Node JS wajib kamu install , karena kita akan meng-
install Tailwind melalui NPM.

Kamu dapat meng- install Node di dalam komputer kamu melalui tautan berikut:
https://nodejs.org/en .

Browser

Saya sangat yakin kamu sudah tahu fungsi browser dan sudah pasti terdapat setidaknya
1 browser ter- install di dalam komputer kamu. Tapi, tidak sembarang browser dapat
kamu gunakan untuk melakukan web development . Kamu dapat memilih setidaknya satu
dari beberapa major browser berikut:

Chrome
Edge
Firefox
Internet Explorer
Opera
Safari

Atau bila saya boleh menyarankan, kamu dapat menggunakan antara Chrome atau
Firefox. Keduanya memiliki DevTools yang keren dan tentunya akan membantu kamu
untuk debugging HTML, CSS dan JavaScript.

Terminal/CMD

Bila kamu menggunakan Linux atau macOS di dalamnya sudah terdapat Terminal yang
dapat kamu gunakan untuk menjalankan perintah perintah, seperti node , mkdir , ls
dan lain sebagainya. Sebagai alternatif, bila kamu pengguna Windows kamu dapat
menggunakan CMD sebagaipenggantiTerminal.

Instalasi TailwindCSS Dengan CDN

Sebelum kita mulai menggunakan atau mulai bereksplorasi dengan suatu framework , hal
yang pertama yang perlu kita lakukan adalah meng install framework tersebut terlebih
dahulu.

Tailwind merupakan salah satu framework CSS, dan bila berbicara tentang framework CSS,
umumnya cara install mereka pasti mirip-mirip bahkan cenderung sama: bisa menggunakan
CDN atau package manager.

Kali ini kita akan mencoba meng- install Tailwind dengan beberapa cara, sesuai yang ada
pada dokumentasinya.

Implementasi

Kita akan mulai dengan sesuatu yang mudah terlebih dahulu. Bila menggunakan CDN, kamu
hanya perlu mengimpornya saja dan yes , Tailwind sudah berhasil di- install.

Tapi, perlu diingat dengan cara ini, beberapa hal di dalam Tailwind tidak dapat kamu
gunakan:

Kamu tidak dapat mengkustomisasi default theme Tailwind Kamu tidak dapat
menggunakan directive apapun, seperti: @apply , @variants, atau yang lainnya
Kamu tidak dapat mengaktifkan suatu fitur, seperti grup-hover misalnya
Kamu tidak dapat meng- install plugin pihak ketiga
Cara ini cocok untuk kamu yang hanya ingin eksplorasi atau hanya sekedar
menggunakan Tailwind untuk testing-testing saja.

1. Buat sebuah folder proyek baru atau gunakan proyek yang sudah ada

2. Impor Tailwind CSSdengan cara seperti ini:

Contohnya seperti ini:

<!DOCTYPE html>
<html>
<head>
<title>Tailwind Project</title>

<!-- TailwindCSS -->

<link
href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min .css"
rel="stylesheet">
</head>
<body>
<p class="text-4xl font-bold">Tailwind Project</p> </body>
</html>
Ketika kamu jalankan kode tersebut di browser , maka akan menampilkan hasil berikut ini:

Tailwind CDN

Ya, sudah berhasil. Kamu sudah dapat menggunakan utility classes yang terdapat pada
Tailwind.

Perlu diingat, ukuran Tailwind pada CDN sudah pasti lebih besar dan kamu tidak dapat
melakukan controlling file size pada Tailwind yang kamu gunakan melalui CDN tadi.

Instalasi TailwindCSS Dengan NPM&Yarn

Pada dasarnya, NPM dan Yarn sama-sama package manager di Node. Hanya saja terdapat
perbedaan yang signifikan, Yarn mengklaim lebih aman dan juga memiliki progress bar yang
lebih cantik ketimbang NPM. Terlepas dari hal tadi, kita akan mencoba meng- install
Tailwind dengan kedua package manager tersebut.

Instalasi Yarn Dengan NPM

Sebelumnya, Yarn perlu di- install melalui NPM, jadi, kamu perlu install Yarn terlebih
dahulu bila ingin menggunakan Yarn.

npm install yarn -g

Pastikan Yarn sudah ter- install ke dalam Node secara global, periksa dengan perintah
berikut:

yarn -v

Kira-kira seperti ini:

 Yarn

Memulai

Mari memulai meng-install Tailwind menggunakan kedua package manager tersebut.

Membuat Folder
Pertama, buat sebuah folder kosong yang akan kita gunakan sebagai folder proyek
kita kedepannya.

mkdir tw-tuts

Di sini saya menggunakan nama folder tw-tuts dan menggunakan perintah mkdir
untuk membuat folder tersebut.

Masuk ke dalam folder tersebut dengan menggunakan perintah cd {nama_folder} :

 cd tw-tuts

Sekarang saya sudah berada di dalam folder tw-tuts .

Init Proyek NPM/Yarn

Hal yang perlu kita lakukan berikutnya adalah kita harus meng- init folder tersebut dengan
NPM atau Yarn.

npm init -y

yarn init -y

Bila kamu hendak menggunakan NPM, kamu dapat menggunakan perintah npm init -y ;
bila kamu ingin menggunakan Yarn, kamu dapat menggunakan perintah yarn init -y –
pilih salah satu. Pada kesempatan ini saya akan menggunakan Yarn, ketimbang NPM.

Bila berhasil maka seperti ini:

yarn init -y

Penjelasan perintah di atas:

yarn adalah perintah yang kita gunakan untuk menjalankan package manager Yarn
init adalah bagian perintah dari Yarn untuk meng- init folder dan juga membuat
 berkas package.json di dalamnya
-y adalah flag atau opsi agar kita tidak perlu menjawab pertanyaan yang diajukan
CLI Yarn, sehingga semua isi dari package.json adalah default value dari Yarn

Ketika sudah berhasil, maka Yarn atau NPM akan men- generate sebuah berkas dengan
nama package.json yang di mana berkas tersebut akan mencatat semua dependencies
yang kita gunakan dan juga mencatat hal lainnya terkait proyek ini.

Install TailwindCSS
Sekarang kita dapat meng- install Tailwind ke dalam proyek tersebut dengan cara:

yarn add tailwindcss

npm install tailwindcss

Seperti sebelumnya, kamu dapat menggunakan salah satu perintah di atas untuk meng-
install Tailwind – bergantung pada package manager yang kamu gunakan sebelumnya.
Bila kamu sebelumnya menggunakan Yarn, maka harus menggunakan Yarn juga
kedepannya untuk proyek ini, begitu juga dengan NPM.

yarn add

tailwindcss
Bila berhasil, maka tailwindcss akan dicatat oleh Yarn ke dalam berkas
package.json di bagian dependencies .
 package.json

Seperti yang kamu lihat, di sini saya menggunakan tailwindcss versi 1.4.4 ,
kemungkinan versi yang kamu gunakan berbeda dengan yang saya gunakan saat ini.

Membuat Berkas tailwind.css

Setelah itu, kita peru membuat sebuah berkas CSS untuk menuliskan beberapa baris kode
Tailwind. Di sini saya menggunakan teks editor Sublime Text dan saya membuat sebuah
berkas CSS dengan nama tailwind.css .

tailwind.css

Penjelasan dari kode di atas:

@tailwind merupakan sebuah directive Tailwind untuk meng inject kode Tailwind yang
berada di dalam folder node_modules/tailwindcss ke dalam berkas CSS kita
tersebut (dalam hal ini adalah tailwind.css )
base merupakan sebuah berkas yang berisi kode CSS reset Preflight (
https://tailwindcss.com/docs/preflight ) yang dibangun di atas Normalize (
https://necolas.github.io/normalize.css)
 components merupakan sebuah berkas yang berisi komponen komponen bawaan
Tailwind, saat ini hanya ada .container saja utilities merupakan sebuah
berkas yang berisi seluruh utility classes Tailwind, seperti .mx-auto , bg-blue-500
dan yang lainnya

Menggenerasi Berkas Konfigurasi Tailwind

Berikutnya kita akan meng- generate sebuah berkas konfig Tailwind, yaitu
tailwind.config.js . Berkas ini tidak usah dibuat sendiri, karena Tailwind memiliki
perintah untuk men- generate- nya secara otomatis.

npx

tailwindcss init

Penjelasan perintah di atas:

npx merupakan package runner NodeJS, kamu dapat menjalankan sebuah

package Node tanpa harus meng- install- nya terlebih dahulu (secara eksplisit)
tailwindcss merupakan nama package yang akan di- execute oleh npx
init merupakan sebuah perintah yang terdapat di package tailwindcss untuk
men-generate berkas
tailwind.config.js

Bila berhasil maka akan terdapat sebuah berkas baru bernama tailwind.config.js di
dalam folder proyek kamu. Kira-kira isinya seperti ini:
 tailwind.confi

g.js

Memproses Kode Tailwind

Sekarang kamu sudah hampir selesai meng-install Tailwind. Tapi, tahukah kamu bahwa
kode Tailwind perlu diproses terlebih dahulu?
Ya, Tailwind memiliki sintaks sendiri yang tidak dapat dibaca oleh browser , seperti halnya
Sass. Hal yang perlu kamu lakukan adalah meng- compile atau memproses kode Tailwind
yang sudah kita tulis di berkas tailwind.css menjadi kode CSS murni yang akan
dimengerti oleh browser .

Hal ini mudah dilakukan, mengingat Tailwind memiliki Tailwind CLI untuk melakukannya.
Untuk memproses kode Tailwind kita menjadi kode CSS murni, dapat menggunakan
perintah berikut:

npx

tailwindcss build tailwind.css -o style.css

Penjelasan perintah di atas:

npx merupakan package runner NodeJS, kamu dapat menjalankan sebuah

 package Node tanpa harus meng- install- nya terlebih dahulu (secara eksplisit)
tailwindcss merupakan nama package yang akan di- execute oleh npx
build merupakan perintah yang terdapat di dalam Tailwind CLI untuk mem-
build atau memproses kode Tailwind menjadi kode CSS murni
tailwind.css merupakan sebuah argumen dari perintah build yang diisi
dengan nama berkas input atau berkas yang hendak kita proses, dalam hal ini
berkas yang hendak kita proses adalah berkas tailwind.css
-o merupakan sebuah flag yang memberi tahu Tailwind CLI bahwa kode CSS
murni hasil dari proses harus disimpan ke dalam sebuah berkas
style.css merupakan argumen dari flag -o yang akan memberitahu Tailwind
CLI bahwa kode CSS murni hasil build atau proses akan disimpan ke dalam berkas
style.css . Jangan khawatir, meskipun kita belum membuat berkas style.css
sebelumnya, Tailwind CLI akan otomatis membuatkannya untuk kita

Kamu akan melihat berkas style.css di dalam proyek kamu sekarang dan isinya
seperti ini:

style.css

Berkas tersebut dapat kamu impor ke dalam HTML dan kamu sudah dapat
menggunakannya.

Membuat Berkas index.html

Buat sebuah berkas HTML baru dengan nama index.html dan struktur seperti ini:
 Berkas

index.html

Ketika kamu jalankan berkas index.html di browser , maka akan memiliki

tampilan seperti ini:

index.html

Selamat! Kamu sudah berhasil meng- install Tailwind dengan NPM atau Yarn.

Latihan Membuat Komponen Card

Card merupakan komponen yang sering digunakan. Entah ketika kamu mendesain UI
dasbor atau UI landing page.

Persyaratan

Sebelum memulai mengikuti latihan ini, kamu harus memenuhi beberapa persyaratan,
diantaranya:

Paham dengan konsep TailwindCSS

Paham langkah-langkah memulai proyek Tailwind (Instalasi)
Karena di bagian latihan ini, saya asumsikan kamu sudah paham beberapa hal di atas.
Sehingga kita dapat fokus pada tahap-tahap latihannya saja, ketimbang mengulang
tahap-tahap yang sudah ditulis sebelumnya.

Memulai

Katakanlah kita akan membuat komponen card untuk blog post. Jadi, di dalam komponen
card tersebut terdapat beberapa elemen turunannya, seperti card image, card body, card
title dan yang lainnya.

Sebelum itu, saya akan membuat wireframe -nya terlebih dahulu menggunakan Figma.
Sehingga, kita akan memiliki bayangan komponen yang akan kita buat.

Card

Wireframe

Kira-kira seperti itu komponen card yang akan kita buat.

Struktur Markup
Pertama, kita akan menulis struktur markup -nya terlebih dahulu. Berdasarkan wireframe
di atas, maka ada beberapa elemen yang kita butuhkan, diantaranya:

div untuk membungkus keseluruhan komponen

img untuk menampilkan foto
div untuk membungkus body dari card
h4 untuk judul card
p untuk deskripsi card
buttonyang berperan sebagai call-to-action
Bila kita buat markup -nya maka akan seperti berikut ini,

<div>
 <img src="...">
<div>
<h4>...</h4>
<p>...</p>
<div>
<button>...</button>
</div>
</div>
</div>

Mencari Foto
Sebelum memberikan utility class, mari kita cari foto untuk diterapkan pada elemen img di
atas. Kamu dapat mencari foto gratis di Unsplash, Pexels, Pixabay dan masih banyak lagi.

Berikut ini foto yang akan saya gunakan,

Foto oleh

David Clode di Unsplash:

https://unsplash.com/photos/CIMk0FSOrAE

Implementasi Tailwind
Sekarang saatnya memberikan utility class ke dalam markup yang telah kita buat
sebelumnya.

Kita akan menerapkan foto yang kita punya ke dalam tag img , selain itu kita akan
berikan warna latar belakang putih dan akan memberikan shadow . Jadi, utility class yang
kita butuhkan adalah bg-white , shadow-lg dan w-64 untuk mengatur lebar dari
komponen card.

Struktur HTML-nya seperti berikut,

<div class="bg-white shadow-lg w-64">
<img src="https://images.unsplash.com/photo
1504575958497-ccdd586c2997?ixlib=rb
1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=754 &q=80"
alt="koala">
</div>
Utility class yang kita gunakan adalah sebagai berikut:

bg-white untuk memberikan latar belakang warna putih dan merepresentasikan

CSS declaration background-color: #fff; shadow-lg untuk memberikan efek
bayangan pada elemen dan merepresentasikan CSS declaration box-shadow: 0
10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -2px rgba(0,0,0,.05);

Sejauh ini kita memiliki tampilan seperti berikut,

Card Image

Kita juga akan menambahkan utility class ke elemen yang akan dijadikan sebagai card-
body.

Struktur HTML-nya seperti berikut ini,

<div class="p-6">
<h4 class="font-bold">Halo, nama saya Koala!</h4> <p class="text-sm
mt-2">Saya seekor yang hidup di dalam rumah dan saya bekerja sebagai
programmer.</p>
</div>

pada struktur HTML di atas, kita menemukan beberapa utility class yang baru kita
gunakan, diantaranya:

p-6 yang berarti padding dengan ukuran 6 dan merepresentasikan CSS declaration
padding: 1.5rem;
font-bold yang berarti font-weight dengan nilai bold dan merepresentasikan CSS
declaration font-weight: 700; text-sm yang berarti text ukuran small (kecil) dan
merepresentasikan CSS declaration font-size: .875rem; mt-2 yang berarti
margin-top dengan jarak 4 dan merepresentasikan CSS declaration margin-top:
0.5rem;

Sejauh ini kita sudah memiliki tampilan seperti berikut ini,

 Card Image &

Card Body

Berikutnya, kita perlu menambahkan tombol call-to-action ke dalam card di bawah

paragraf.

Kita dapat menyalin kode HTML yang telah kita buat sebelumnya pada saat mencoba
membuat komponen button.

Struktur HTML-nya seperti berikut,

<div class="text-right mt-4">

<button class="bg-blue-600 text-sm text-white py-1 px-3 rounded">
Read More
</button>
</div>
Bila kamu saat ini menguasai Bootstrap 4, kamu mungkin akan sedikit familiar dengan
beberapa utility class yang pernah kita gunakan sebelumnya, seperti text-right , mt-* ,
p-* , rounded dan yang lainnya. Utility class tersebut memiliki kegunaan yang sama
dengan utility class pada Bootstrap 4.

Sampai sini, kita sudah memiliki satu buah komponen card.

 Card

Component

Sekarang kita akan menyalin 1 kode blok komponen tersebut agar menjadi 3 buah
komponen card. Lalu kita akan membungkus ketiga komponen card tersebut dengan div
dan div tersebut akan diberikan utility class flex . Dengan seperti itu, komponen card di
dalam div tadi akan menjadi grid.

Card

Components

Selamat! Kamu sudah berhasil membuat sebuah komponen card dengan Tailwind.

Responsive Design
Ketika berbicara soal responsive web design , kita tidak bisa lepas dengan istilah
breakpoints – karena kuncinya adalah breakpoints . Bila kamu masih belum paham soal
breakpoint itu apa, saya akan beri sedikit penjelasannya.

Breakpoints

Katakanlah kamu sedanga membuat sebuah desain website, desain tersebut terlihat
bagus ketika di desktop , dan menjadi masalah ketika dibuka dengan ukuran perangkat
yang lebih kecil, seperti smartphone atau tablet .
Tentu saja kamu akan berusaha memperbaiki desain antarmuka website yang kamu buat
untuk setiap perangkat yang berbeda. Banyak sekali jenis perangkat di dunia ini dan sudah
pasti perangkat tersebut memiliki lebar yang berbeda-beda, ini akan menyulitkan kamu.

Ketika mengalami hal seperti itu, kamu hanya perlu mencari ukuran perangkat yang
umum digunakan, seperti halnya Bootstrap, framework populer ini hanya menyediakan
4 ukuran perangkat.

Bootstrap

Breakpoints

Ukuran perangkat tersebut diantaranya:

Small devices: landscape smartphones

Medium devices: tablets
Large devices: desktops
Extra large devices: large desktops

Dengan mengetahui ukuran perangkat tersebut kamu akan menjadi mudah untuk membuat
desain antarmuka website responsif; kamu hanya perlu membuat desain antarmuka website
menjadi bagus hanya untuk 4- 5 ukuran perangkat.

Nah, ukuran-ukuran perangkat tadi yang dinamakan dengan breakpoint. Pada setiap
breakpoint , desain antarmuka website akan berubah – menyesuaikan dengan ukuran
perangkatnya.

Istilah breakpoints tidak mengikat pada framework , jadi, tanpa framework pun kamu
tetap menggunakan istilah breakpoints .

Tailwind

Tailwind menyediakan fitur responsive design . Kamu dapat mengatur utility class untuk di
setiap breakpoint. Setidaknya Tailwind menyediakan 4 breakpoint, yaitu sm , md , lg
dan xl .

sm berlaku untuk perangkat yang minimal memiliki lebar 640px md berlaku

untuk perangkat yang minimal memiliki lebar 768px lg berlaku untuk
perangkat yang minimal memiliki lebar 1024px xl berlaku untuk perangkat
yang minimal memiliki lebar 1280px
Untuk menggunakannya bersamaan dengan utility class, maka kita perlu
menambahkannya sebelum utility class , format-nya seperti ini: sm: {utility-class}
, md:{utility-class} , lg:{utility-class} , xl:{utility-class}.

Utility class yang kita gunakan tadi berlaku disemua breakpoint atau dalam kata lain
berlaku di semua perangkat — termasuk perangkat mobile.

Semua breakpoints di atas merupakan default dari Tailwind, kamu dapat menambah atau
menghapus breakpoint yang ada. Juga, breakpoints tersebut akan ditransformasi menjadi
kode CSS media query.

Tailwind

Breakpoints

Sedangkan, bila kita ingin mengatur utility class hanya berlaku di beberapa ukuran
perangkat saja, maka kita perlu menspesifikasikan ukuran perangkat yang kita jadikan
target. Katakanlah kita ingin membuat warna teks berwarna biru di semua perangkat kecuali
pada perangkat tablet.

<p class="text-blue-900">Hello,bro!</p>

Kode di atas akan membuat tulisan tersebut berwarna biru, sedangkan bila kita ingin
merubah tulisan tersebut ketika diperangkat yang memiliki

<p class="text-blue-900 sm:text-red-900">Hello, bro!</p>setidaknya lebar

640px , maka tambahkan prefix sm: sebelum nama utility class yang kita kehendaki.

Dengan kode di atas kita akan memiliki tulisan berwarna biru di semua perangkat, dan
tulisan tersebut akan berubah menjadi berwarna merah ketika di perangkat yang memiliki
lebar setidaknya 640px .
Kamu juga dapat menspesifikasikan utility class untuk beberapa perangkat sekaligus.

<p class="text-blue-900 sm:text-red-900 md:text-green-900 lg:text-

yellow-900 xl:text-black">
Hello, bro!
</p>

Bagaimana bila hanya untuk mobile?

Seperti yang dijelaskan sebelumnya, bila kamu tidak menspesifikasikan breakpoint pada
utility clas yang kamu gunakan, maka utility class tersebut berlaku untuk semua
perangkat — termasuk perangkat mobile yang memiliki lebar kurang dari 640px .

Misal kamu memiliki sebuah teks yang ingin diberi warna text-black hanya pada ukuran
perangkat mobile dengan lebar kurang dari 640px .

<p class="text-black">Ini tulisan warna hitam</p>

Teks tersebut akan berwarna hitam ketika di perangkat dengan ukuran kurang dari 640px
atau perangkat mobile .

Namun, masalahnya, teks tersebut juga akan berwarna hitam ketika dibuka di perangkat
bukan mobile atau ukuran perangkat dengan lebar sama dengan atau lebih dari 640px .
Maka dari itu kamu perlu mengatur ulang warna tersebut pada perangkat dengan ukuran
lebih dari atau sama dengan 640px .

Misal, teks tersebut akan berwarna merah text-red-500 pada perangkat yang bukan
mobile . Maka kamu harus membuatnya seperti ini:

<p class="text-black sm:text-red-500">Ini tulisan warna hitam</p>

Nah, dengan seperti ini ketika teks tersebut dibuka pada ukuran perangkat yang memiliki
lebar sama dengan atau lebih dari 640px akan berubah warnanya menjadi merah ( text-
red-500 ).

Hal ini bukan hanya berlaku pada warna, melainkan, berlaku untuk semua utility-classes
yang mendukung fitur responsif di Tailwind.

Pseudo-Class Variants
Di dalam CSS, pseudo-classes memungkinkan kamu untuk memberi style terhadap elemen
dalam suatu state spesial, seperti: hover, focus, first-child, dan masih banyak lagi.

Untuk menuliskannya mudah saja di CSS:

.element:hover {}

.element:focus {}

// more

Kamu hanya perlu menggunakan : dan dibarengi dengan nama psuedo-class tersebut.

Sayangnya, kamu tidak dapat menggunakan pseudo-classes pada inline style CSS.
Seperti ini misalnya:

<p style=":hover{ color: red; }">Hello, world</p>

Kode di atas tidak valid dan memang tidak tersedia di CSS. Sehingga kamu hanya dapat
menggunakan pseudo-class di dalam kode CSS block . Inilah salah satu alasan yang
menjadikan inline style di CSS sangat dihindari dalam beberapa kasus yang umum.

Pseudo-class di Tailwind
Saya memiliki kabar baik untuk kamu, di Tailwind kamu dapat menggunakan psuedo-class
hanya dengan menulis nama class saja di attribute class pada elemen HTML kamu.

Ya, Tailwind seklias mirip dengan inline style , namun Tailwind memiliki beberapa
keunggulan yang salah satunya memungkinkan kamu untuk menulis pseudo-classes tanpa
harus menulis rule -nya di kode CSS.

Walaupun hanya beberapa pseudo-classes yang tersedia di Tailwind, tapi, saya rasa cukup
untuk beberapa kasus umum, seperti: hover , focus , first-child , odd, even dan
lain sebagainya.

Berikut daftar pseudo-classes yang didukung oleh Tailwind:

Hover
Focus
Active
Disabled
Visited
First-child
Last-child
Odd-child
Even-child
Group-hover
Grup-focus
Focus-within

Mungkin kamu menyadari beberapa nama pseudo-class di Tailwind tidak ada di dalam CSS
murni, tapi, hal itu tidak menjadi masalah, karena memang pseudo-class ini berusaha agar
kita dapat mereduksi penggunaan custom class.

Menggunakan Pseudo-class Tailwind

Cara menggunakannya sederhana saja, kamu hanya perlu memberikan prefix sebelum
nama utility class yang kamu inginkan. Misal, kamu ingin warna teks elemen berwarna
merah dengan text-red-500 dan
kamu ingin mengubahnya menjadi biru dengan text-blue-500 maka kamu hanya
perlu menambahkan hover: di awal nama utility class tersebut.

<p class="text-red-500 hover:text-blue-500">Text</p> Dengan

seperti ini, kamu tidak perlu repot-repot nulis CSS, kan?

Begitu juga bila kamu ingin menuliskannya untuk perangkat yang lebih spesifik, misal hanya
untuk ukuran perangkat md , maka kamu perlu menuliskannya seperti ini:

<p class="text-red-500 md:hover:text-blue-500">Text</p>

Untuk pseudo-class variant lainnya sama saja, hanya perlu kamu ganti hover dengan
nama variant yang lain.

Perlu diingat, tidak semua utility class memiliki pseudo-class variant , utility class seperti
z-index tidak memiliki variant seperti hover , focus atau lainnya, utility class tersebut
hanya memiliki variant responsive .

Untuk penjelasan masing-masing variant akan dijelaskan di bawah ini. Variants

Seperti yang saya jelaskan di atas, Tailwind memiliki beberapa pseudo class variant
yang didukung:

Hover
Focus
Active
Disabled
Visited
First-child
Last-child
Odd-child
Even-child
Group-hover
Grup-focus
Focus-within

Kita akan membahasnya satu per satu.

Hover
Kamu dapat menggunakan pseudo-class hover hanya dengan menambahkan prefix
hover: sebelum nama utility class.

<a class="bg-transparent hover:bg-blue-500 hover:text white py-2

px-4 border border-gray-500 rounded"> Hover me
</a>

Hasilnya akan seperti ini:

 Sebelah kiri

dalam keadaan normal; sebelah kanan dalam keadaan hover

Elemen tombol di atas akan memiliki latar belakang biru ( text-blue 500 ) ketika di-
hover , karena di elemen tersebut terdapat utility class hover:bg-blue-500 . Utility
class tersebut akan memberikan efek ketika suatu elemen dalam keadaan hover .

Focus
Tambahkan prefix focus: untuk menambahkan utility class hanya pada saat focus .

<input class="px-6 py-4 border-b-2 border-gray-400

focus:border-blue-500" placeholder="Focus Bro">

Hasilnya akan seperti ini:

Sebelah kiri

dalam keadaan normal; sebelah kanan dalam keadaan focus

Active
Tambahkan prefix active: untuk menambahkan utility class hanya pada saat active .
Perlu diingat, active secara bawaan belum bisa digunakan, kamu harus mengaktifkannya
dahulu di berkas konfigurasi.

// tailwind.config.js
module.exports = {
// ...
variants: {
backgroundColor: ['responsive', 'hover', 'focus', 'active'],
},
}

Variant active hanya akan aktif pada utility class backgroundColor saja. Untuk utility
class lain kamu dapat mengaktifkannya satu per satu.

Berikut ini contohnya:

 <a class="bg-blue-500 text-white active:bg-blue-700 py-2 px-4
rounded">
Click me
</a>

Hasilnya akan seperti ini:

Sebelah kiri

dalam keadaan normal; sebelah kanan dalam keadaan active

Disabled
Tambahkan prefix disabled: untuk menambahkan utility class hanya pada saat
disabled. Perlu diingat, disabled secara bawaan belum bisa digunakan, kamu harus
mengaktifkannya dahulu di berkas konfigurasi.

// tailwind.config.js
module.exports = {
// ...
variants: {
opacity: ['responsive', 'hover', 'focus', 'disabled'], },
}

Variant disabled hanya akan aktif pada utility class opacity saja. Untuk utility class lain
kamu dapat mengaktifkannya satu per satu.

Berikut ini contohnya:

<button disabled class="bg-blue-500 disabled:bg-blue-300 active:bg-
blue-700 text-white py-2 px-4 rounded"> Click me
</button>

Dan berikut ini hasilnya:

Sebelah kiri

dalam keadaan normal; sebelah kanan keadaan disabled

Perlu diingat juga, variant ini hanya terdapat pada versi 1.1.0+ .

Visited
Tambahkan prefix visited: untuk menambahkan utility class hanya pada saat visited.
Perlu diingat, visited secara bawaan belum bisa digunakan, kamu harus mengaktifkannya
dahulu di berkas konfigurasi.
// tailwind.config.js
module.exports = {
// ...
variants: {
textColor: ['responsive', 'hover', 'focus',
'visited'],
},
}

Variant visited hanya akan aktif pada utility class textColor saja. Untuk utility class lain
kamu dapat mengaktifkannya satu per satu.

Berikut ini contohnya:

<a href="http://blabla.com" class="text-blue-500 font

semibold">Belum Dikunjungi</a>
<a href="https://tailwind.run/fbSbfs" class="text-blue-500
visited:text-purple-500 font-semibold">Sudah
Dikunjungi</a>

Berikut ini hasilnya:

Sebelah kiri

sebelum dikunjungi; sebelah kanan sudah dikunjungi (visited)

Perlu diingat juga, variant ini hanya terdapat pada versi 1.1.0+ . First-child

Tambahkan prefix first: untuk menambahkan utility class hanya pada saat elemen
tersebut adalah anak pertama dari parent -nya. Ini biasanya sangat dibutuhkan ketika
membuat loop item.

Berikut ini contohnya:

<div class="text-left w-64 border rounded bg-white"> <div

class="px-4 py-2 border-t first:border-t 0">Satu</div>
<div class="px-4 py-2 border-t">Dua</div>
<div class="px-4 py-2 border-t">Tiga</div>
 </div>

Berikut ini hasilnya:

Contoh item

dengan border-t

Setiap elemen item (Satu, Dua, dan Tiga) akan memiliki border-t , namun, pada item anak
pertama border-t tersebut tidak akan memberi efek, karena sudah ditimpa oleh
first:border-t-0 yang maksudnya border-top: 0; pada item anak pertama.

Variant ini hanya tersedia pada versi 1.1.0+ dan kamu harus mengaktifkannya dulu
untuk setiap utility class .
module.exports = {
// ...
variants: {
borderWidth: ['responsive', 'first', 'hover', 'focus'],
},
}

Last-child
Tambahkan prefix last: untuk menambahkan utility class hanya pada saat elemen
tersebut adalah anak terakhir dari parent- nya. Ini biasanya sangat dibutuhkan ketika
membuat loop item.

Berikut ini contohnya:

<div class="text-left w-64 border rounded bg-white"> <div

class="px-4 py-2 border-b">Satu</div>
<div class="px-4 py-2 border-b">Dua</div>
<div class="px-4 py-2 border-b first:border-b 0">Tiga</div>
</div>

Berikut ini hasilnya:

 Contoh item dengan border-b

Mirip seperti first: . Setiap elemen item akan memiliki border-b , namun, pada item anak
terakhir border-b tersebut tidak akan memberi efek, karena sudah ditimpa oleh
last:border-b-0 yang maksudnya border-bottom: 0; pada item anak terakhir.

Variant ini hanya tersedia pada versi 1.1.0+ dan kamu harus mengaktifkannya dulu
untuk setiap utility class .

// tailwind.config.js
module.exports = {
// ...
variants: {
borderWidth: ['responsive', 'last', 'hover', 'focus'], },
}

Odd-child
Tambahkan prefix odd: untuk menambahkan utility class hanya pada saat elemen
tersebut adalah anak ganjil dari parent- nya. Ini biasanya sangat dibutuhkan ketika
membuat loop item.

Berikut ini contohnya:

<div class="text-left w-64 border rounded bg-white"> <div

class="px-4 py-2 odd:bg-gray-200">Satu</div> <div class="px-4 py-2
odd:bg-gray-200">Dua</div> <div class="px-4 py-2 odd:bg-gray-
200">Tiga</div> </div>

Berikut ini hasilnya:

Contoh

dengan background-color
Seperti yang kamu lihat, bg-gray-200 hanya akan memberi efek pada item yang ganjil
saja, seperti 1 dan 3.

Variant ini hanya tersedia pada versi 1.1.0+ dan kamu harus mengaktifkannya dulu
untuk setiap utility class .

// tailwind.config.js
module.exports = {
// ...
variants: {
backgroundColor: ['responsive', 'odd', 'hover', 'focus'],
},
}

Even-child
Tambahkan prefix even: untuk menambahkan utility class hanya pada saat elemen
tersebut adalah anak genap dari parent- nya. Ini biasanya sangat dibutuhkan ketika
membuat loop item.

Berikut ini contohnya:

Pengantar
Sebagai front-end developer , pada dasarnya kita hanya perlu menguasai 3 bahasa, yaitu
HTML, CSS dan JavaScript. Jika kita sudah menguasai ketiga bahasa tersebut, kita sudah
dapat membuat sebuah website yang cantik dan attractive . Namun, kita seringkali
dibantu dengan alat-alat yang akan memudahkan dan mempercepat pekerjaan kita.
Framework dan library termasuk ke dalam alat-alat yang sering kita gunakan, entah itu
untuk CSS atau JavaScript.

Pada bagian JavaScript kita seringkali menemukan website yang dibangun dengan
jQuery, React, Vue, atau Angular. Pada bagian CSS kita seringkali menemukan website
yang dibangun dengan Bulma, Bootstrap, Spectre, Foundation, Materialize atau yang
lainnya. Pada dasarnya semua library dan framework memiliki kegunaan yang sama, yaitu
untuk memudahkan kita dalam merancang sebuah website .

Bootstrap misalnya, kita dapat membuat sebuah desain website dengan cepat
menggunakan Bootstrap, karena Bootstrap memiliki pra-desain komponen-komponen
yang dapat kita gunakan, sehingga kita tidak perlu lagi membuatnya dari awal.

Begitu juga dengan Bulma dan framework CSS semacamnya, memiliki pra-desain yang
cantik sehingga kita hanya perlu menyusun blok-blok komponen tadi hingga membentuk
sebuah website yang sesuai dengan keinginan kita — initnya, kita tidak perlu membuat
desain website dari awal dengan framework CSS tersebut. Framework-framework tadi
termasuk ke dalam jenis framework UI kit, karena mereka memiliki pra
desain komponen.
Framework UI kit memiliki beberapa masalah, seperti masalah dalam hal skalabilitas,
kustomisasi dan juga desain yang tidak unik. Bagaimana tidak, website yang dibangun
dengan framework UI kit akan memiiki desain yang cenderung sama dengan website lain
yang menggunakan framework yang sama. Hal ini terjadi karena framework UI kit
memiliki pra-desain yang siapun dapat menggunakannya.

Selain itu masalah skalabilitas, framework UI kit terdiri dari banyak pra desain dan dari
masing-masing pra-desain tersebut memiliki nama class . Ketika kita ingin membuat pra-
desain baru seringkali bingung memberikan nama class -nya atau kita juga perlu
membuat rule CSS baru yang seringkali membuat banyak duplikasi kode.

Dari masalah tersebut, hadirlah framework dengan jenis utility classes atau nama
metodologinya Atomic. Framework jenis ini tidak memiliki pra-desain komponen, tidak
seperti framework UI kit. Framework jenis ini hanya berisi sekumpulan class utilitas atau
class-class kecil yang merepresentasikan CSS declaration yang bila dikombinasikan akan
menghasilkan sebuah visual . Jadi, dengan framework jenis ini kita perlu kreatif dalam
mengkombinasikan utility class sehingga menamilkan sebuah elemen untuk desain
website yang kitainginkan.

Juga, dengan utility-first framework kita perlu membangun semua bagian-bagian atau
komponen-komponen website dari awal, kita membangunnya sendiri. Dengan seperti ini
desain website yang kita buat akan unik dan kemungkinan desainnya sama dengan orang
lain tidak tinggi. Tidak seperti framework UI kit, kita hanya perlu menggunakan nama-
nama class untuk setiap komponen dan kita hanya perlu menyusunnya saja. Sehingga
kemungkinan desain yang kita buat sama dengan orang lain sangat tinggi.
Utility-first framework juga memecahkan masalah skalabilitas. Karena semua
komponennya dibuat dari awal dan dibuat dari sekumpulan utility classes , maka tidak
akan ada masalah skalabilitas, tidak akan ada masalah duplikasi kode.

Terdapat banyak utility-first framework di luar sana, seperti Tachyons, Turret, Beard atau
yang lebih baru dan modern , Tailwind. Tailwind merupakan sebuah utility-first framework
yang dibuat oleh Adam Wathan dan dirilis pertama kali pada akhir tahun 2017.
Framework ini sangat digemari oleh banyak developer , dari front-end hingga back
end . Framework ini mudah digunakan sehingga sangat digemari oleh back-end developer
yang tidak begitu pandai dalam CSS. Tailwind juga biasa digunakan bersamaan dengan
Laravel atau framework JavaScript, seperti React dan Vue. Bila kamu memiliki phobia
terhadap CSS, maka Tailwind bisa menjadi obatnya.

Tailwind sangat memungkinkan kamu untuk membangun sebuah desain website yang
unik dan tanpa kamu perlu menulis kode CSS sedikitpun. Mungkin kamu akan berpikir
bahwa kamu akan membutuhkan waktu yang lebih lama ketika membangun sebuah
website dengan utility-first framework ketimbang dengan framework UI kit. Ya, benar.
Karena kamu harus memikirkan desain dan mengimplementasikan desain tersebut dari
awal sendiri. Namun, kamu perlu ingat manfaat-manfaat yang diberikan oleh utility-first
framework , sehingga kamu dapat mempertimbangkannya.

Dalam buku ini, kita akan mempelajari framework Tailwind CSS. Mulai dari konsep,
workflow , hingga membuat sebuah website responsive dengan Tailwind CSS. Buku ini
 tidak untuk semua orang, setidaknya kamu memahami cara mengoperasikan komputer,
memahami HTML, memahami CSS, atau bisa dibilang kamu sudah pernah membangun
website sebelumnya dan ingin mempelajari hal baru untuk meningkatkan skill .

CSS Fundamental
CSS ( Cascading Style Sheets ) merupakan sebuah bahasa untuk memberikan style pada
dokumen yang ditulis dengan bahasa markup , seperti HTML. CSS juga yang memberi
instruksi kepada browser , bagaimana HTML ditampilkan.

Sederhananya, CSS memungkinkan kamu untuk mengatur jenis huruf, ukuran huruf,
warna latar belakang, dan mengatur gaya elemen-elemen lainnya yang terdapat pada
dokumen web.

Misal, kamu memiliki kode HTML seperti berikut,

<p>Hai, nama saya Muhamad Nauval Azhar</p>

Kode di atas untuk membuat sebuah paragraph di HTML. Tentu, seharusnya kamu
menulisnya secara utuh, mulai dari doctype hingga
</html> .

CSS dapat mengendalikan style pada paragraph tersebut, contoh pertama ini kita akan
mengubah warna teks tersebut menjadi merah. Maka kodenya seperti berikut,

p {
color: red;
}

Kode di atas merupakan sebuah style rule pada CSS untuk mengatur
warna teks pada elemen HTML yang menggunakan tag dokumen web <p>
tersebut. pada

Perlu diingat, kode CSS di atas tidak akan mengubah 1 paragraf saja, melainkan
mengubah seluruh warna teks menjadi merah pada tag .
<p>
Apa hanya warna teks saja?

CSS tidak hanya mengatur warna teks saja, banyak yang dapat kamu lakukan dengan CSS.
Kamu dapat mengubah jenis huruf, warna latar belakang, mengatur latar belakang gambar,
membuat sistem grid, membuat menu, dan hal lainnya yang relevan dengan interface web
kamu.

Kita tidak akan membahas dasar CSS secara lengkap di sini

Kita tidak akan membahas lagi dasar-dasar CSS secara lengkap. Karena, saya asumsikan
kamu sudah memahami konsep dan terminologi yang ada di CSS, seperti selector, CSS rule,
CSS declaration, property, value, vendor prefixes, dan hal lainnya. Tapi, sebagai pembuka
 dan untuk pengingat, saya hanya akan membahas sekilas saja konsep dasar dari CSS yang
barusan disebutkan. Bisa saja kamu membaca post ini hingga selesai meskipun kamu tidak
begitu paham mengenai CSS, tapi, risikonya seringkali menghasilkan pertanyaan-pertanyaan
konyol yang mengundang orang untuk mem- bully kamu dalam diskusi publik. Tentu, kamu
nggak mau, kan?

Menulis CSS

Menulis kode CSS dan menyisipkannya ke dalam HTML terdapat beberapa cara. Pada
dasarnya ada 3 cara yang akan sebutkan, diantaranya: internal style , external style dan
inline style.

1. Internal Style
Menyisipkan kode CSS dengan cara ini yaitu menggunakan tag
<style>berikut, yang ada pada HTML. Misal kita memiliki struktur HTML
seperti
<!DOCTYPE html>
<html>
<head>
<title>Belajar CSS</title>
</head>

<body>
<p>Ini tulisan</p>
</body>
</html>

Kemudian kita ingin memberikan style atau menyisipkan kode CSS ke dalam HTML
tersebut, maka tuliskan CSS rule yang hendak kita gunakan di antara tag dan sisipkan
sebelumpenutup tag .
<style> </head>

<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
p {
color: red;
}
</style>
</head>
<body>
<p>Ini tulisan</p>
</body>
 </html>

2. External Style
Berbeda dengan cara sebelumnya, kita akan menuliskan semua CSS rule pada file yang
berbeda dengan file HTML. Buat sebuah file baru dengan ekstensi .css , di sini saya
berikan contoh dengan nama
style.css p { dan isi file tersebut seperti berikut,

color: red;
}

Untuk menyisipkan file tersebut ke dalam HTML maka gunakan tag seperti berikut,

<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet"href="style.css">
</head>
<body>
<p>Ini tulisan</p>
</body>
</html>

Attribute bertujuan untuk mengidentifikasi file CSS yang kita

href
gunakan pada HTML tersebut. Sedangkan attribute bertujuan
rel
untuk menspesifikasi relationship (hubungan) antara kedua file, dalam konteks ini
adalah HTML dan CSS, karena CSS merupakan stylesheet maka attribute diberi nilai
stylesheet.
rel

3. Inline Style
Ada kemiripan antara cara ini dengan internal style, karena keduanya tidak menuliskan
CSS rule pada file lain. Cara ini sangat sederhana, karena kamu tidak perlu menuliskan
selector pada kode CSS. Kamu akan langsung menuliskan CSS declaration, karena cara ini
akan menyisipkan kode CSS langsung pada tag yang dikehendaki. Sebagai contoh,

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<p style="color: red;">Ini tulisan saya yang sedang belajar
CSS</p>
 </body>
</html>

Cara ini sekilas begitu sederhana dan mudah untuk diterapkan, tapi, silahkan luangkan
waktu untuk membayangkan bila kamu memiliki 1000 tag dan diharuskan memiliki style
yang sama. Tentu, kamu hanya
<p>
perlu menyalinnya saja, bukan? Tapi, ketika kamu perlu mengubah nilai dari property
yang ada pada CSS declaration, bagaimana? Lalu, bila CSS declarartion tadi terdapat lebih
dari 10 property, bagaimana? Tentu, akan merepotkan kamu.

Selain ketiga cara tersebut, kamu dapat menyisipkan style CSS pada HTML dengan
JavaScript. JavaScript memiliki DOM ( Document Object Model ), sederhananya, DOM
memandang HTML sebagai object dan memungkinkan kamu untuk memanipulasi style,
content, attribute dan lainnya melalui API yang disediakan oleh JavaScript.
Ketiga cara di atas juga bisa kamu terapkan sesuai kondisi. Hal yang perlu diingat adalah
menulis CSS rule yang reusable atau yang dapat digunakan kembali dan maintainable
atau yang dapat dipelihara, walaupun ada beberapa aspek lain yang perlu kamu terapkan
juga ketika menulis kode CSS, tapi, setidaknya dengan dua hal tadi saja kamu sudah
dapat menulis kode CSS yang human-readable .

CSS itu sederhana

CSS merupakan bahasa yang sederhana, memiliki sintaks atau gaya penulisan yang
sederhana dan mudah dipahami. Seperti yang sudah kamu lakukan sebelumnya, untuk
mengubah warna teks, hanya membutuhkan 3 baris kode saja, bukan?

Mari kita bedah dasar dari sintak CSS ini. CSS itu sederhana,

selector {
// CSS Declaration
}

Jangan terlebih dahulu panik karena mendengar istilah yang belum pernah kamu dengar,
terkadang istilah yang kedengerannya keren, padahal bisa jadi merupakan sesuatu yang
sederhana untuk dipahami.

Mari kita bedah kode CSS di atas, saya akan bagi menjadi beberapa poin agar lebih
mudahdipahami,

1. CSSRule
Kode di atas merupakan sebuah CSS rule. Blok kode yang akan memberikan efek pada satu
atau beberapa elemen pada HTML. Efek yang akan diberikan setiap CSS rule itu berbeda-
beda, bergantung pada CSS declaration . CSS declarartion ditulis di antara tanda buka dan
 tutup
kurawal, seperti ini: .
{ CSS _declarartion }_

2. CSSSelector
Seperti yang disebutkan sebelumnya, CSS rule dapat memberikan efek pada satu atau
beberapa elemen, hal itu bergantung pada selector . Sederhananya, selector merupakan
sebuah cara pada CSS yang memungkinkan kita dapat memilih elemen yang akan kita
berikan style. Pada sebuah dokumen web, sudah tentu terdapat lebih dari satu tag HTML
saja, maka dari itu, dengan selector kita dapat memilih satu atau beberapa elemen HTML
sekaligus untuk diberikan style yang sama.

Selector dapat berupa nama tag HTML, nama class, ID, attribute tag, pseudo-
selector, dan lain sebagainya.

Selector tag : kamu hanya perlu menuliskan nama tag- nya saja, misal: , , , , dan masih
banyak .
div table video span p

Selector ID: kamu perlu menambahkan tanda tagar (#) di awal nama ID, misal: , , dan lain
sebagainya.
#header #footer #main

Selector class : kamu perlu menambahkan tanda titik di awal nama

class , misal: , , , dan lain
.name .box .menu
.widget
sebagainya.

3. CSS Declaration
Di sini merupakan titik “kenikmatan” bermain dengan CSS. Karena, di sini kamu dapat
mengatur gaya yang kamu inginkan terhadap elemen yang sudah di- select sebelumnya. CSS
declaration merupakan jalan untuk mengatur gaya pada sebuah CSS rule. CSS declaration
terdiri dari property, colon, value dan semi-colon. Kita sudah membuat satu baris
CSS declaration sebelumnya, yaitu: . Kode tersebut
color: red;
merupakan satu baris CSS declaration. Kenapa disebut CSS declarartion? Karena, pada
kode tersebut terdapat sebuah property, yaitu ” Sebuah colon, yaitu . Sebuah value, yaitu .
color
: red
Terakhir, sebuah semi-colon, yaitu ;.

Property Merupakan sebuah instruksi untuk memberikan jenis style. Property ditulis
dengan lower-case atau huruf kecil dan tanda “-“ sebagai pemisah (jika nama peroperty
terdiri dari 2 suku kata atau lebih). Setiap nama property memiliki efeknya masing-masing.
 Efek yang diberikan juga bergantung pada value yang diberikan, value yang diberikan juga
harus relevan dengan nama property. Sebagai contoh sebelumnya, kita mengubah warna
teks menggunakan property color , membuatnya menjadi warna merah, karena kita
memberikan value red pada property tersebut. Maka dari itu, value dan nama property
harus relevan.

Pemberian nilai atau value pada sebuah property, yaitu setelah tanda titik dua
atau colon . Satu baris CSS declarartion diakhiri dengan
:

tanda semi-colon atau titik koma ; . CSS declarartion pada posisi terakhir tidak wajib
ditutup dengan tanda titik koma, tapi, bila menggunakan, lebih baik.

Tentu, kita dapat menulis beberapa CSS declarartion sekaligus pada satu buah CSS rule.
Berapa banyak CSS declarartion yang kita butuhkan, bergantung pada style apa yang
hendak kita buat untuk elemen tersebut. Misal, kita ingin mengubah warna teks, latar
belakang dan jenis
huruf pada elemen dengan class: .nama { background-color: blue; }

berikut, font-family: 'arial'; nama

color: red; . Maka, kodenya seperti

Kode di atas merupakan sebuah CSS rule dan akan mengubah warna teks menjadi
merah, latar belakang menjadi warna biru dan mengubah jenis huruf menjadi .
arial

Kita sudah mempelajari mengenai CSS pada bagian ini. Pada bagian berikutnya kita akan
membahas TailwindCSS dan saya asumsikan kamu sudah paham dasar dan terminologi
yang ada pada CSS. Bila belum paham, kamu dapat mengulang membacanya hingga
paham.

TailwindCSS
Bila framework pada umumnya yang kamu jumpai terdiri dari banyak pra desain komponen,
di TailwindCSS ini kamu tidak akan menemukan pra desain komponen seperti button, card,
alert, carousel atau yang lainnya. Karena TailwindCSS bukan merupakan sebuah UI kit,
melainkan sebuah utility-first framework untuk membangun antarmuka kustom dengan
cepat.

Sederhananya, di dalam TailwindCSS terdapat banyak class-class kecil yang

merepresentasikan CSS declaration . Sehingga, ketika kamu ingin membuat sebuah
 komponen, maka kamu perlu menggunakan beberapa class-class kecil tersebut hingga
tercipta komponen yang kamu maksud.

Misal, kamu ingin membuat sebuah komponen button. Pada Bootstrap framework atau
framework lain yang memiliki pra-desain komponen, kurang lebih kamu melakukannya
seperti ini:

<button class="btn">Button</button>

atau

<button class="button">Button</button>

Sedangkan, pada TailwindCSS kamu perlu melakukannya seperti ini:

<button class="bg-blue-500 text-white font-bold py-2 px-4 rounded">

Button
</button>

Class-class di atas mewakili property dan value (CSS declaration ) sendiri,

diantaranya:
bg-blue-500 merepresentasikan property #4299e1; font-bold merepresentasikan property
text-white merepresentasikan property font-weight: 700;
background-color: color: #fff;
py-2 maksudnya padding-y atau padding-vertical
merepresentasikan property padding- bottom: 0.5rem; padding-top: 0.5rem;
dan

px-4 maksudnya padding-x atau padding-horizontal merepresentasikan property

dan
padding-left: 1rem;
padding-right: 1rem;
rounded merepresentasikan border-radius: .25rem;

Sehingga dari semua utility class yang digunakan di atas, ketika di compute oleh browser
akan menghasilkan sebuah visual button yang kita inginkan. Browser akan membaca semua
utility class yang digunakan seperti ini:

background-color: #4299e1;
color: #fff;
font-weight: 700;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
padding-left: 1rem;
padding-right: 1rem;
border-radius: .25rem;

Kelihatannya ribet, ya ?
Tapi, dengan seperti ini, UI yang kamu buat dengan orang lain akan berbeda meski
menggunakan framework yang sama. Berbeda halnya bila menggunakan UI kit, UI yang
dibuat akan cenderung sama, karena di dalam UI kit sudah tersedia pra-desain komponen,
meski style- nya dapat di- override, tetapi hasilnya mungkin tidak berbeda jauh.
TailwindCSS tidak dapat dibandingkan dengan framework UI kit — seperti Bootstrap, Bulma
atau Spectre — karena pada dasarnya, mereka memilikikonsepyangberbeda.

Bila pada framework UI kit kamu perlu membuat beberapa custom class untuk
mengkostumisasi pra-desain komponen yang digunakan, sedangkan di TailwindCSS kamu
akan dapat mereduksi penggunaan custom class . Karena, untuk membuat komponen kamu
perlu melakukannya dari awal, dengan cara menyusun utility class.

Mirip Seperti Inline Style?

Bila kamu menyadari bahwa Tailwind ini mirip seperti menulis CSS dengan teknik " inline
style ", berarti kamu sudah cukup paham dengan konsep Tailwind.

Secara teknik memang sama seperti kita menulis inline style pada sebuah elemen. Tapi,
perlu kamu ingat bila kamu menulisnya dengan teknik inline style , maka kamu akan
menulisnya seperti ini:

<button style="background-color: #4299e1; color: #fff; font-weight:

700; padding-top: 0.5rem; padding-bottom: 0.5rem; padding-left:
1rem; padding-right: 1rem; border radius: .25rem;">
Aku Adalah Button
</button>

Sedangkan bila dengan utility class , kamu melakukannya seperti ini:

<button class="bg-blue-500 text-white font-bold py-2 px-4 rounded">

Button
</button>
Bedanya apa? Bila menggunakan inline style , kamu benar benar menulis CSS declaration
secara langsung ke elemen tersebut. Sedangkan pada Tailwind, kamu menulis class atau
meng- assign utility class ke elemen tersebut. Sudah terlihat bedanya, kan?

Dengan seperti ini, desain kamu akan lebih konsisten karena kamu menggunakan class
bukan menulis CSS declaration secara langsung, sehingga elemen lain yang
menggunakan class yang sama akan memiliki visual yang sama.

Perlu diingat, Tailwind juga mendukung responsive design dan pseudo classes. Pernah
tidak terpikir oleh kamu untuk memberikan style yang berbeda ketika elemen tersebut
dalam state tertentu, ketika di- hover misalnya. Dengan Tailwind kamu dapat
melakukan ini menggunakan
state variant:
 <span class="text-indigo-500 hover:text-black">Saya text-
indigo-500
Text</span>

Elemen di atas hanyalah sebuah teks, teks tersebut memiliki warna dalam keadaan
normal. Nah, ketika cusror
menyentuh elemen teks tersebut, maka teks tersebut warnanya berubah menjadi .
text-black

Jika dalam CSS murni, kamu menuliskannya seperti ini:

<span>Saya Text</span> hover:

<style>
span {
color: indigo;
}
span:hover {
color: black;
}
</style>

Jadi, di Tailwind kamu hanya perlu menambahkan prefix

sebelum utility class yang kamu gunakan. Selain warna teks, kamu juga dapat
menggunakan yang lain, misal: , hover:bg-indigo-500
hover:opacity-50 dan yang lainnya.

Selain lain: hover pseudo-classes yang

, kamu juga dapat menggunakan

focus:{utility-class} active:
{utility-class} disabled:{utility-
class} visited:{utility-class}
active:{utility-class} first:
{utility-class} last:{utility-
class} odd:{utility-class}
even:{utility-class}
group-hover:{utility-class} group-
focus:{utility-class} focus-within:
{utility-class}
Seperti yang disebutkan sebelumnya, Tailwind juga sudah memiliki fitur responsive
design .

Mirip seperti state variant , cara menggunakan responsive design di Tailwind juga
menggunakan prefix . Namun, nama prefix -nya yang berbeda. Sebelum membahas ini, saya
asumsikan kamu paham bagaimana responsive design pada CSS bekerja ( media queries ).
 Tailwind memiliki 4 breakpoints :

sm: min-width: 640px

md: min-width: 768px
lg: min-width: 1024px
xl: min-width: 1280px

Misal, kamu ingin membuat elemen teks berwarna untuk

text-black
semua device , namun pada device dengan lebar >= 1024 akan berubah
warna teks tersebut menjadi menuliskannya seperti ini: text-blue-500
. Maka kamu

<span class="text-black lg:text-blue-500">Saya teks</span> Ya, menulis

responsive design di Tailwind formatnya seperti ini:

{breakpoint}:{utility-class} . sm:opacity-50 Contoh: , md:bg-blue-500

dan lain sebagainya.

Kamu dapat mempelajari tentang responsive design lebih lengkap pada Tailwind di
bagian responsive design .

TailwindCSS bukan satu-satunya utility first

framework
TailwindCSS dirilis pertama kali pada tahun 2017, tepatnya tanggal 2 November. Oleh
Adam Wathan. Sebelum itu, ada beberapa framework yang memiliki konsep yang
serupa seperti TailwindCSS, diantaranya:

Shed.CSS ( https://tedconf.github.io/shed-css )
Tachyons ( http://tachyons.io )
Beard ( http://buildwithbeard.com )
Turret ( https://turretcss.com )

dan masih banyak lagi

Framework-framework di atas lahir kurang-lebih 6–7 tahun kebelakang. Jadi, sebelum

adanya TailwindCSS, konsep utility-first framework sudah pernah diterapkan. Dalam kata
lain, TailwindCSS bukan satu-satunya utility-first framework.

Selain framework di atas, Bootstrap juga memiliki utility classes yang baru saja
ditambahkan pada versi 4. Sebelumnya juga sudah ditambahkan, tapi, saat versi 3 diberi
nama helper classes.
Meski belum lama, TailwindCSS begitu menarik perhatian, karena kurang dari 2 tahun
sudah mendapat 10,000+ star di GitHub.

Meski begitu, kita tidak dapat menyimpulkan bahwa TailwindCSS lebih bagus dari utility-
first framework yang lain, karena untuk menyimpulkan itu, kita perlu menguji beberapa
framework serupa yang lainnya. Belum tentu juga satu framework cocok untuk segala
kasus.

Jadi, bila kamu mencari framework yang terdiri dari sekumpulan pra desain komponen,
mungkin, TailwindCSS tidak cocok untuk kamu. Tapi, bila kamu ingin membangun
antarmuka yang memiliki identitas dan unik, mungkin TailwindCSS cocok untuk kamu.

Kamu tidak akan mengendarai mobil sport untuk off-roading

Konfigurasi

Tailwind CSS pada dasarnya tidak memerlukan berkas konfigurasi, karena framework ini
sudah memiliki konfigurasi bawaan. Artinya, kamu tidak perlu melakukan konfigurasi
apapun untuk memulai menggunakan framework ini. Tapi, terdapat beberapa kasus yang
mengharuskan kamu untuk melakukan kustomisasi, seperti ingin merubah kode warna
biru pada bawaan Tailwind, jenis huruf bawaan, atau style yang lain.

Untuk melakukan kustomisasi tersebut, kamu tidak perlu menulis kode CSS apapun,
kamu hanya perlu membuat sebuah berkas konfigurasi bernama . Berkas tersebut harus
berada di root
tailwind.config.js
folder proyek kamu. Juga, berkas tersebut tidak perlu kamu buat manual. Karena,
Tailwind CLI dapat menggenerasi berkas konfigurasi tersebut secaraotomatis.

npx tailwindcss init

Perintah di atas untuk menggenerasi berkas konfigurasi Tailwind, tentu kamu harus
berada di dalam root folder proyek kamu. Juga, berkas konfigurasi yang
berhasildigenerasi oleh perintah di atas akan berisi seperti ini:

// tailwind.config.js
module.exports = {
theme: {},
variants: {},
plugins: [],
}
Untuk saat ini, kamu tidak perlu panik karena tidak tahu bagaimana menulis konfigurasi di
Tailwind CSS. Karena, kita akan membahas konfigurasi lebih lengkap di bagian yang lain.
Pada bagian ini, saya hanya memberikan sedikit pratinjau bahwa Tailwind merupakan
sebuah framework yang highly customizable .

Betapa Besarnya TailwindCSS

Tailwind memiliki ukuran berkas yang lumayan besar dibanding framework populer yang
lain.

File Size

Comparation

Hal yang wajar mengingat Tailwind terdiri dari sekumpulan utility classes. Tentu solusi yang
memungkinkan adalah dengan menghapus utility class yang tidak kita gunakan. Tapi,
bagaimana caranya? Untuk mengatasi masalah ini, kamu dapat menggunakan PurgeCSS (
https://ww w.purgecss.com ). Ia merupakan sebuah tool yang akan membantu kamu
dalam menghapus CSS yang tidak terpakai. Keren, kan ?
Dengan seperti itu, ukuran file CSS kamu bisa saja hanya berukuran 13kb. Seperti yang
dilakukan Firefox Send ( https://send.firefox.com ), mereka menggunakan TailwindCSS dan
file CSS mereka hanya berukuran 13.1kb saja (setelah di- minify ) dan berukuran 4.7kb
(setelah di- gzip ).

Preflight

HTML memiliki default style pada setiap elemennya. Misal div , elemen ini memiliki CSS
declarartion bawaan, yaitu display: block; .

Inspect

Element

Untuk daftar lengkap elemen mana saja yang memiliki default style, kamu dapat
melihatnya di sini .

Setiap browser memiliki default style -nya masing-masing, diantaranya:

Internet Explorer ( http://web.archive.org/web/20170122223926/htt

p://www.iecss.com/ )
Firefox ( https://dxr.mozilla.org/mozilla-central/source/layout/style/ res/html.css )
 Opera ( http://web.archive.org/web/20161031005401/http://www.ie css.com/opera-
10.51.css )
Chrome/Webkit ( http://trac.webkit.org/browser/trunk/Source/Web
Core/css/html.css )
Di luar default CSS tersebut yang terbaru atau bukan, tapi esensinya adalah bahwa setiap
browser memiliki default style untuk setiap tag di HTML.

Tentu dapat dibayangkan, ketika kamu membangun sebuah website dan mengaksesnya
di browser yang berbeda, maka beberapa elemen yang telah kamu berikan style
sebelumnya ternyata memiliki tampilan yang sedikit berbeda karena “tercampur” dengan
default style browser tersebut. Maka tampilan website kamu akan menjadi inkonsisten
— meski tidak banyak.

Untuk mengatasi masalah seperti ini, framework atau library CSS pada umumnya memiliki
base style, yang tujuannya untuk meng- override default style pada setiap browser.
Dengan seperti itu, elemen pada HTML akan memiliki default style yang sama pada setiap
browser .

Tailwind memiliki base style -nya sendiri, bernama “preflight” atau yang sebelumnya
bernama “base”. Tailwind menggunakan library pihak ketiga untuk melakukan ini, yaitu
menggunakan Normalize.css ( https://github.c om/necolas/normalize.css/ ). Kamu dapat
melihat elemen mana saja yang diberikan default style oleh Tailwind di sini (
https://github.com/tai lwindcss/tailwindcss/blob/next/src/plugins/css/preflight.css ).

Warna Pada Tailwind

Tailwind menyediakan banyak sekali palet warna. Bahkan setiap warna dapat diatur tingkat
transparansinya. Setiap warna memiliki 9 tataran transparansi.

Misal biru:

Tailwind

Color Palette

Dengan seperti ini, kamu tidak ada keterbatasan dalam menggunakan warna. Sehingga,
kamu akan lebih bebas lagi dalam membuat komponen.

Beberapa utility classes yang terkait dengan warna:

bg-red-200
 text-green-900
border-teal-500
divide-blue-100
placeholder-indigo-400

Angka di belakang, seperti 200, 900, 500, 100 atau berapapun adalah tingkatan warna pada
Tailwind, semakin tinggi angkanya, semakin gelap warna tersebut. Kamu dapat memberikan
tingkatan warna dari 100-900.

Utility Classes

Tailwind membagi utility class -nya menjadi 15 kategori. Dari 15 kategori tersebut terdapat
beberapa utility class di bawahnya, dan saya tidak akan membahas semua utility class di
bawahnya, hanya akan membahas beberapa utility class yang dirasa perlu dijelaskan.
Karena
utility class lainnnya memiliki fungsi yang sama seperti CSS pada umumya.

15 kategori tersebut diantaranya:

1. Layout
2. Flexbox
3. Grid
4. Spacing
5. Sizing
6. Typography
7. Background
8. Border
9. Table
10. Effect
11. Transition
12. Transform
13. Interactivity
14. SVG
15. Accessibility

Seperti yang disebutkan di awal, semua utility class pada Tailwind tersebut
merepresentasikan CSS declaration- nya masing-masing. Jadi, Tailwind ini sebenernya
framework yang sederhana, kamu hanya perlu mendalami CSS dan kamu akan dapat
menggunakan Tailwind dengan sangat lancar.

Selesai
Selamat kamu baru saja belajar konsep dari TailwindCSS!
Mempelajari sesuatu yang baru terkadang seolah-olah menakutkan karena kita terlalu
mendengarkan asumsi orang lain terhadap sesuatu yang baru tadi. Untuk mengatasi hal
seperti tadi, kita hanya perlu mencobanya sendiri, dengan seperti itu kita akan memiliki
penilaian sendiri terharap sesuatu yang baru tersebut.

Menyiapkan Environment
Setelah berkenalan dengan Tailwind, saatnya belajar lebih dalam dengan Tailwind. Untuk
memulai eksplorasi, tentu, kita memerlukan alat-alat pendukung. Beberapa alat-alat ini
wajib di- install pada komputer kamu, dan beberapa yang lainnya tidak wajib.

Teks Editor

Saya asumsikan pembaca buku ini adalah seseorang yang pernah ngoding sebelumnya.
Jadi, sudah pasti paham soal teks editor dan sudah pasti terdapat teks editor di dalam
komputernya, terlepas dari nama teks editor yang digunakan. Kamu bisa saja
menggunakan teks editor A, dan temannu menggunakan teks editor B. Karena, memilih
teks editor merupakan hal yang subyektif. Dan, hal semacam ini adalah hal yang lumrah
— tidak perlu diperdebatkan.

Saya sendiri menggunakan teks editor Sublime Text versi 3. Bukan karena saya tidak
suka VS Code, melainkan karena Sublime Text memiliki performa lebih cepat ketimbang
teks editor yang berjalan di atas browser . Tapi, bila saya boleh menyarankan, kamu
dapat menggunakan VS Code. Karena kamu dapat meng- install sebuah extension yang
akan memudahkan kamu menggunakan Tailwind.

Extension/Package
Bila kamu menggunakan VS Code, maka istilah yang digunakan extension ; bila kamu
menggunakan Sublime Text, maka istilah yang digunakan adalah package . Keduanya
memiliki fungsi utama yang sama, yaitu untuk memperluas fungsi dari teks editor tersebut.

Kabar baik untuk kamu yang menggunakan kedua teks editor ini, karena terdapat extension
dan package yang dapat kamu install untuk mempermudah kamu dalam menggunakan
Tailwind. Extension atau package ini tidak wajib kamu install , namun, sangat
direkomendasikan.

VS Code
 IntelliSense

Intellisense merupakan sebuah extension VS Code yang akan mempermudah kamu dalam
menggunakan Tailwind. Fitur-fitur yang dimiliki extension ini:

Autocomplete . Dapat memberi saran nama class yang terdapat di Tailwind

Linting . Memberi tahu bila ada error atau potensi bug pada CSS dan HTML kamu
Hover Previews . Melihat kode CSS rule pada utility class Tailwind saat di- hover
Syntax Highlighting . Memberikan definisi syntax sehingga fitur Tailwind disorot
dengan benar

Kamu dapat meng- install -nya di VS Code kamu secara gratis melalui tautan ini:
https://tailwindcss.com/docs/intellisense .

Sublime Text

Tailwind CSS

Autocomplete
Tailwind CSS Autocomplete merupakan sebuah package Sublime Text yang akan
memudahkan kamu menggunakan Tailwind. Package ini lebih sederhana ketimbang
Intellisense. Package ini hanya menyediakan autocomplete nama-nama class yang
terdapat di Tailwind saja.
Kamu dapat meng- install -nya di Sublime Text melalui tautan berikut: htt
ps://github.com/danklammer/tailwind-sublime-autocomplete.

NodeJS

Node JS merupakan sebuah JavaScript runtime environment. Node JS memungkinkan

kamu menjalankan kode JavaScript di luar browser , lebih tepatnya di CLI. Ketika kamu
meng- install Node JS, di dalamnya sudah terdapat NPM. NPM sendiri merupakan Node
Package Manager yang di dengannya kamu dapat mengelola package Node, seperti
install , uninstall dan lain sebagainya. Node JS wajib kamu install , karena kita akan meng-
install Tailwind melalui NPM.

Kamu dapat meng- install Node di dalam komputer kamu melalui tautan berikut:
https://nodejs.org/en .

Browser

Saya sangat yakin kamu sudah tahu fungsi browser dan sudah pasti terdapat setidaknya
1 browser ter- install di dalam komputer kamu. Tapi, tidak sembarang browser dapat
kamu gunakan untuk melakukan web development . Kamu dapat memilih setidaknya satu
dari beberapa major browser berikut:

Chrome
Edge
Firefox
Internet Explorer
Opera
Safari

Atau bila saya boleh menyarankan, kamu dapat menggunakan antara Chrome atau
Firefox. Keduanya memiliki DevTools yang keren dan tentunya akan membantu kamu
untuk debugging HTML, CSS dan JavaScript.

Terminal/CMD

Bila kamu menggunakan Linux atau macOS di dalamnya sudah terdapat Terminal yang
dapat kamu gunakan untuk menjalankan perintah perintah, seperti node , mkdir , ls
dan lain sebagainya. Sebagai alternatif, bila kamu pengguna Windows kamu dapat
menggunakan CMD sebagaipenggantiTerminal.

Instalasi TailwindCSS Dengan CDN

Sebelum kita mulai menggunakan atau mulai bereksplorasi dengan suatu framework , hal
yang pertama yang perlu kita lakukan adalah meng install framework tersebut terlebih
dahulu.

Tailwind merupakan salah satu framework CSS, dan bila berbicara tentang framework CSS,
umumnya cara install mereka pasti mirip-mirip bahkan cenderung sama: bisa menggunakan
CDN atau package manager.

Kali ini kita akan mencoba meng- install Tailwind dengan beberapa cara, sesuai yang ada
pada dokumentasinya.

Implementasi

Kita akan mulai dengan sesuatu yang mudah terlebih dahulu. Bila menggunakan CDN, kamu
hanya perlu mengimpornya saja dan yes , Tailwind sudah berhasil di- install.

Tapi, perlu diingat dengan cara ini, beberapa hal di dalam Tailwind tidak dapat kamu
gunakan:

Kamu tidak dapat mengkustomisasi default theme Tailwind Kamu tidak dapat
menggunakan directive apapun, seperti: @apply , @variants, atau yang lainnya
Kamu tidak dapat mengaktifkan suatu fitur, seperti grup-hover misalnya
Kamu tidak dapat meng- install plugin pihak ketiga
Cara ini cocok untuk kamu yang hanya ingin eksplorasi atau hanya sekedar
menggunakan Tailwind untuk testing-testing saja.

1. Buat sebuah folder proyek baru atau gunakan proyek yang sudah ada

2. Impor Tailwind CSSdengan cara seperti ini:

Contohnya seperti ini:

<!DOCTYPE html>
<html>
<head>
<title>Tailwind Project</title>

<!-- TailwindCSS -->

<link
href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min .css"
rel="stylesheet">
</head>
<body>
<p class="text-4xl font-bold">Tailwind Project</p> </body>
</html>
Ketika kamu jalankan kode tersebut di browser , maka akan menampilkan hasil berikut ini:

Tailwind CDN

Ya, sudah berhasil. Kamu sudah dapat menggunakan utility classes yang terdapat pada
Tailwind.

Perlu diingat, ukuran Tailwind pada CDN sudah pasti lebih besar dan kamu tidak dapat
melakukan controlling file size pada Tailwind yang kamu gunakan melalui CDN tadi.

Instalasi TailwindCSS Dengan NPM&Yarn

Pada dasarnya, NPM dan Yarn sama-sama package manager di Node. Hanya saja terdapat
perbedaan yang signifikan, Yarn mengklaim lebih aman dan juga memiliki progress bar yang
lebih cantik ketimbang NPM. Terlepas dari hal tadi, kita akan mencoba meng- install
Tailwind dengan kedua package manager tersebut.

Instalasi Yarn Dengan NPM

Sebelumnya, Yarn perlu di- install melalui NPM, jadi, kamu perlu install Yarn terlebih
dahulu bila ingin menggunakan Yarn.

npm install yarn -g

Pastikan Yarn sudah ter- install ke dalam Node secara global, periksa dengan perintah
berikut:

yarn -v

Kira-kira seperti ini:

 Yarn

Memulai

Mari memulai meng-install Tailwind menggunakan kedua package manager tersebut.

Membuat Folder
Pertama, buat sebuah folder kosong yang akan kita gunakan sebagai folder proyek
kita kedepannya.

mkdir tw-tuts

Di sini saya menggunakan nama folder tw-tuts dan menggunakan perintah mkdir
untuk membuat folder tersebut.

Masuk ke dalam folder tersebut dengan menggunakan perintah cd {nama_folder} :

 cd tw-tuts

Sekarang saya sudah berada di dalam folder tw-tuts .

Init Proyek NPM/Yarn

Hal yang perlu kita lakukan berikutnya adalah kita harus meng- init folder tersebut dengan
NPM atau Yarn.

npm init -y

yarn init -y

Bila kamu hendak menggunakan NPM, kamu dapat menggunakan perintah npm init -y ;
bila kamu ingin menggunakan Yarn, kamu dapat menggunakan perintah yarn init -y –
pilih salah satu. Pada kesempatan ini saya akan menggunakan Yarn, ketimbang NPM.

Bila berhasil maka seperti ini:

yarn init -y

Penjelasan perintah di atas:

yarn adalah perintah yang kita gunakan untuk menjalankan package manager Yarn
init adalah bagian perintah dari Yarn untuk meng- init folder dan juga membuat
 berkas package.json di dalamnya
-y adalah flag atau opsi agar kita tidak perlu menjawab pertanyaan yang diajukan
CLI Yarn, sehingga semua isi dari package.json adalah default value dari Yarn

Ketika sudah berhasil, maka Yarn atau NPM akan men- generate sebuah berkas dengan
nama package.json yang di mana berkas tersebut akan mencatat semua dependencies
yang kita gunakan dan juga mencatat hal lainnya terkait proyek ini.

Install TailwindCSS
Sekarang kita dapat meng- install Tailwind ke dalam proyek tersebut dengan cara:

yarn add tailwindcss

npm install tailwindcss

Seperti sebelumnya, kamu dapat menggunakan salah satu perintah di atas untuk meng-
install Tailwind – bergantung pada package manager yang kamu gunakan sebelumnya.
Bila kamu sebelumnya menggunakan Yarn, maka harus menggunakan Yarn juga
kedepannya untuk proyek ini, begitu juga dengan NPM.

yarn add

tailwindcss
Bila berhasil, maka tailwindcss akan dicatat oleh Yarn ke dalam berkas
package.json di bagian dependencies .
 package.json

Seperti yang kamu lihat, di sini saya menggunakan tailwindcss versi 1.4.4 ,
kemungkinan versi yang kamu gunakan berbeda dengan yang saya gunakan saat ini.

Membuat Berkas tailwind.css

Setelah itu, kita peru membuat sebuah berkas CSS untuk menuliskan beberapa baris kode
Tailwind. Di sini saya menggunakan teks editor Sublime Text dan saya membuat sebuah
berkas CSS dengan nama tailwind.css .

tailwind.css

Penjelasan dari kode di atas:

@tailwind merupakan sebuah directive Tailwind untuk meng inject kode Tailwind yang
berada di dalam folder node_modules/tailwindcss ke dalam berkas CSS kita
tersebut (dalam hal ini adalah tailwind.css )
base merupakan sebuah berkas yang berisi kode CSS reset Preflight (
https://tailwindcss.com/docs/preflight ) yang dibangun di atas Normalize (
https://necolas.github.io/normalize.css)
 components merupakan sebuah berkas yang berisi komponen komponen bawaan
Tailwind, saat ini hanya ada .container saja utilities merupakan sebuah
berkas yang berisi seluruh utility classes Tailwind, seperti .mx-auto , bg-blue-500
dan yang lainnya

Menggenerasi Berkas Konfigurasi Tailwind

Berikutnya kita akan meng- generate sebuah berkas konfig Tailwind, yaitu
tailwind.config.js . Berkas ini tidak usah dibuat sendiri, karena Tailwind memiliki
perintah untuk men- generate- nya secara otomatis.

npx

tailwindcss init

Penjelasan perintah di atas:

npx merupakan package runner NodeJS, kamu dapat menjalankan sebuah

package Node tanpa harus meng- install- nya terlebih dahulu (secara eksplisit)
tailwindcss merupakan nama package yang akan di- execute oleh npx
init merupakan sebuah perintah yang terdapat di package tailwindcss untuk
men-generate berkas
tailwind.config.js

Bila berhasil maka akan terdapat sebuah berkas baru bernama tailwind.config.js di
dalam folder proyek kamu. Kira-kira isinya seperti ini:
 tailwind.confi

g.js

Memproses Kode Tailwind

Sekarang kamu sudah hampir selesai meng-install Tailwind. Tapi, tahukah kamu bahwa
kode Tailwind perlu diproses terlebih dahulu?
Ya, Tailwind memiliki sintaks sendiri yang tidak dapat dibaca oleh browser , seperti halnya
Sass. Hal yang perlu kamu lakukan adalah meng- compile atau memproses kode Tailwind
yang sudah kita tulis di berkas tailwind.css menjadi kode CSS murni yang akan
dimengerti oleh browser .

Hal ini mudah dilakukan, mengingat Tailwind memiliki Tailwind CLI untuk melakukannya.
Untuk memproses kode Tailwind kita menjadi kode CSS murni, dapat menggunakan
perintah berikut:

npx

tailwindcss build tailwind.css -o style.css

Penjelasan perintah di atas:

npx merupakan package runner NodeJS, kamu dapat menjalankan sebuah

 package Node tanpa harus meng- install- nya terlebih dahulu (secara eksplisit)
tailwindcss merupakan nama package yang akan di- execute oleh npx
build merupakan perintah yang terdapat di dalam Tailwind CLI untuk mem-
build atau memproses kode Tailwind menjadi kode CSS murni
tailwind.css merupakan sebuah argumen dari perintah build yang diisi
dengan nama berkas input atau berkas yang hendak kita proses, dalam hal ini
berkas yang hendak kita proses adalah berkas tailwind.css
-o merupakan sebuah flag yang memberi tahu Tailwind CLI bahwa kode CSS
murni hasil dari proses harus disimpan ke dalam sebuah berkas
style.css merupakan argumen dari flag -o yang akan memberitahu Tailwind
CLI bahwa kode CSS murni hasil build atau proses akan disimpan ke dalam berkas
style.css . Jangan khawatir, meskipun kita belum membuat berkas style.css
sebelumnya, Tailwind CLI akan otomatis membuatkannya untuk kita

Kamu akan melihat berkas style.css di dalam proyek kamu sekarang dan isinya
seperti ini:

style.css

Berkas tersebut dapat kamu impor ke dalam HTML dan kamu sudah dapat
menggunakannya.

Membuat Berkas index.html

Buat sebuah berkas HTML baru dengan nama index.html dan struktur seperti ini:
 Berkas

index.html

Ketika kamu jalankan berkas index.html di browser , maka akan memiliki

tampilan seperti ini:

index.html

Selamat! Kamu sudah berhasil meng- install Tailwind dengan NPM atau Yarn.

Latihan Membuat Komponen Card

Card merupakan komponen yang sering digunakan. Entah ketika kamu mendesain UI
dasbor atau UI landing page.

Persyaratan

Sebelum memulai mengikuti latihan ini, kamu harus memenuhi beberapa persyaratan,
diantaranya:

Paham dengan konsep TailwindCSS

Paham langkah-langkah memulai proyek Tailwind (Instalasi)
Karena di bagian latihan ini, saya asumsikan kamu sudah paham beberapa hal di atas.
Sehingga kita dapat fokus pada tahap-tahap latihannya saja, ketimbang mengulang
tahap-tahap yang sudah ditulis sebelumnya.

Memulai

Katakanlah kita akan membuat komponen card untuk blog post. Jadi, di dalam komponen
card tersebut terdapat beberapa elemen turunannya, seperti card image, card body, card
title dan yang lainnya.

Sebelum itu, saya akan membuat wireframe -nya terlebih dahulu menggunakan Figma.
Sehingga, kita akan memiliki bayangan komponen yang akan kita buat.

Card

Wireframe

Kira-kira seperti itu komponen card yang akan kita buat.

Struktur Markup
Pertama, kita akan menulis struktur markup -nya terlebih dahulu. Berdasarkan wireframe
di atas, maka ada beberapa elemen yang kita butuhkan, diantaranya:

div untuk membungkus keseluruhan komponen

img untuk menampilkan foto
div untuk membungkus body dari card
h4 untuk judul card
p untuk deskripsi card
buttonyang berperan sebagai call-to-action
Bila kita buat markup -nya maka akan seperti berikut ini,

<div>
 <img src="...">
<div>
<h4>...</h4>
<p>...</p>
<div>
<button>...</button>
</div>
</div>
</div>

Mencari Foto
Sebelum memberikan utility class, mari kita cari foto untuk diterapkan pada elemen img di
atas. Kamu dapat mencari foto gratis di Unsplash, Pexels, Pixabay dan masih banyak lagi.

Berikut ini foto yang akan saya gunakan,

Foto oleh

David Clode di Unsplash:

https://unsplash.com/photos/CIMk0FSOrAE

Implementasi Tailwind
Sekarang saatnya memberikan utility class ke dalam markup yang telah kita buat
sebelumnya.

Kita akan menerapkan foto yang kita punya ke dalam tag img , selain itu kita akan
berikan warna latar belakang putih dan akan memberikan shadow . Jadi, utility class yang
kita butuhkan adalah bg-white , shadow-lg dan w-64 untuk mengatur lebar dari
komponen card.

Struktur HTML-nya seperti berikut,

<div class="bg-white shadow-lg w-64">
<img src="https://images.unsplash.com/photo
1504575958497-ccdd586c2997?ixlib=rb
1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=754 &q=80"
alt="koala">
</div>
Utility class yang kita gunakan adalah sebagai berikut:

bg-white untuk memberikan latar belakang warna putih dan merepresentasikan

CSS declaration background-color: #fff; shadow-lg untuk memberikan efek
bayangan pada elemen dan merepresentasikan CSS declaration box-shadow: 0
10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -2px rgba(0,0,0,.05);

Sejauh ini kita memiliki tampilan seperti berikut,

Card Image

Kita juga akan menambahkan utility class ke elemen yang akan dijadikan sebagai card-
body.

Struktur HTML-nya seperti berikut ini,

<div class="p-6">
<h4 class="font-bold">Halo, nama saya Koala!</h4> <p class="text-sm
mt-2">Saya seekor yang hidup di dalam rumah dan saya bekerja sebagai
programmer.</p>
</div>

pada struktur HTML di atas, kita menemukan beberapa utility class yang baru kita
gunakan, diantaranya:

p-6 yang berarti padding dengan ukuran 6 dan merepresentasikan CSS declaration
padding: 1.5rem;
font-bold yang berarti font-weight dengan nilai bold dan merepresentasikan CSS
declaration font-weight: 700; text-sm yang berarti text ukuran small (kecil) dan
merepresentasikan CSS declaration font-size: .875rem; mt-2 yang berarti
margin-top dengan jarak 4 dan merepresentasikan CSS declaration margin-top:
0.5rem;

Sejauh ini kita sudah memiliki tampilan seperti berikut ini,

 Card Image &

Card Body

Berikutnya, kita perlu menambahkan tombol call-to-action ke dalam card di bawah

paragraf.

Kita dapat menyalin kode HTML yang telah kita buat sebelumnya pada saat mencoba
membuat komponen button.

Struktur HTML-nya seperti berikut,

<div class="text-right mt-4">

<button class="bg-blue-600 text-sm text-white py-1 px-3 rounded">
Read More
</button>
</div>
Bila kamu saat ini menguasai Bootstrap 4, kamu mungkin akan sedikit familiar dengan
beberapa utility class yang pernah kita gunakan sebelumnya, seperti text-right , mt-* ,
p-* , rounded dan yang lainnya. Utility class tersebut memiliki kegunaan yang sama
dengan utility class pada Bootstrap 4.

Sampai sini, kita sudah memiliki satu buah komponen card.

 Card

Component

Sekarang kita akan menyalin 1 kode blok komponen tersebut agar menjadi 3 buah
komponen card. Lalu kita akan membungkus ketiga komponen card tersebut dengan div
dan div tersebut akan diberikan utility class flex . Dengan seperti itu, komponen card di
dalam div tadi akan menjadi grid.

Card

Components

Selamat! Kamu sudah berhasil membuat sebuah komponen card dengan Tailwind.

Responsive Design
Ketika berbicara soal responsive web design , kita tidak bisa lepas dengan istilah
breakpoints – karena kuncinya adalah breakpoints . Bila kamu masih belum paham soal
breakpoint itu apa, saya akan beri sedikit penjelasannya.

Breakpoints

Katakanlah kamu sedanga membuat sebuah desain website, desain tersebut terlihat
bagus ketika di desktop , dan menjadi masalah ketika dibuka dengan ukuran perangkat
yang lebih kecil, seperti smartphone atau tablet .
Tentu saja kamu akan berusaha memperbaiki desain antarmuka website yang kamu buat
untuk setiap perangkat yang berbeda. Banyak sekali jenis perangkat di dunia ini dan sudah
pasti perangkat tersebut memiliki lebar yang berbeda-beda, ini akan menyulitkan kamu.

Ketika mengalami hal seperti itu, kamu hanya perlu mencari ukuran perangkat yang
umum digunakan, seperti halnya Bootstrap, framework populer ini hanya menyediakan
4 ukuran perangkat.

Bootstrap

Breakpoints

Ukuran perangkat tersebut diantaranya:

Small devices: landscape smartphones

Medium devices: tablets
Large devices: desktops
Extra large devices: large desktops

Dengan mengetahui ukuran perangkat tersebut kamu akan menjadi mudah untuk membuat
desain antarmuka website responsif; kamu hanya perlu membuat desain antarmuka website
menjadi bagus hanya untuk 4- 5 ukuran perangkat.

Nah, ukuran-ukuran perangkat tadi yang dinamakan dengan breakpoint. Pada setiap
breakpoint , desain antarmuka website akan berubah – menyesuaikan dengan ukuran
perangkatnya.

Istilah breakpoints tidak mengikat pada framework , jadi, tanpa framework pun kamu
tetap menggunakan istilah breakpoints .

Tailwind

Tailwind menyediakan fitur responsive design . Kamu dapat mengatur utility class untuk di
setiap breakpoint. Setidaknya Tailwind menyediakan 4 breakpoint, yaitu sm , md , lg
dan xl .

sm berlaku untuk perangkat yang minimal memiliki lebar 640px md berlaku

untuk perangkat yang minimal memiliki lebar 768px lg berlaku untuk
perangkat yang minimal memiliki lebar 1024px xl berlaku untuk perangkat
yang minimal memiliki lebar 1280px
Untuk menggunakannya bersamaan dengan utility class, maka kita perlu
menambahkannya sebelum utility class , format-nya seperti ini: sm: {utility-class}
, md:{utility-class} , lg:{utility-class} , xl:{utility-class}.

Utility class yang kita gunakan tadi berlaku disemua breakpoint atau dalam kata lain
berlaku di semua perangkat — termasuk perangkat mobile.

Semua breakpoints di atas merupakan default dari Tailwind, kamu dapat menambah atau
menghapus breakpoint yang ada. Juga, breakpoints tersebut akan ditransformasi menjadi
kode CSS media query.

Tailwind

Breakpoints

Sedangkan, bila kita ingin mengatur utility class hanya berlaku di beberapa ukuran
perangkat saja, maka kita perlu menspesifikasikan ukuran perangkat yang kita jadikan
target. Katakanlah kita ingin membuat warna teks berwarna biru di semua perangkat kecuali
pada perangkat tablet.

<p class="text-blue-900">Hello,bro!</p>

Kode di atas akan membuat tulisan tersebut berwarna biru, sedangkan bila kita ingin
merubah tulisan tersebut ketika diperangkat yang memiliki

<p class="text-blue-900 sm:text-red-900">Hello, bro!</p>setidaknya lebar

640px , maka tambahkan prefix sm: sebelum nama utility class yang kita kehendaki.

Dengan kode di atas kita akan memiliki tulisan berwarna biru di semua perangkat, dan
tulisan tersebut akan berubah menjadi berwarna merah ketika di perangkat yang memiliki
lebar setidaknya 640px .
Kamu juga dapat menspesifikasikan utility class untuk beberapa perangkat sekaligus.

<p class="text-blue-900 sm:text-red-900 md:text-green-900 lg:text-

yellow-900 xl:text-black">
Hello, bro!
</p>

Bagaimana bila hanya untuk mobile?

Seperti yang dijelaskan sebelumnya, bila kamu tidak menspesifikasikan breakpoint pada
utility clas yang kamu gunakan, maka utility class tersebut berlaku untuk semua
perangkat — termasuk perangkat mobile yang memiliki lebar kurang dari 640px .

Misal kamu memiliki sebuah teks yang ingin diberi warna text-black hanya pada ukuran
perangkat mobile dengan lebar kurang dari 640px .

<p class="text-black">Ini tulisan warna hitam</p>

Teks tersebut akan berwarna hitam ketika di perangkat dengan ukuran kurang dari 640px
atau perangkat mobile .

Namun, masalahnya, teks tersebut juga akan berwarna hitam ketika dibuka di perangkat
bukan mobile atau ukuran perangkat dengan lebar sama dengan atau lebih dari 640px .
Maka dari itu kamu perlu mengatur ulang warna tersebut pada perangkat dengan ukuran
lebih dari atau sama dengan 640px .

Misal, teks tersebut akan berwarna merah text-red-500 pada perangkat yang bukan
mobile . Maka kamu harus membuatnya seperti ini:

<p class="text-black sm:text-red-500">Ini tulisan warna hitam</p>

Nah, dengan seperti ini ketika teks tersebut dibuka pada ukuran perangkat yang memiliki
lebar sama dengan atau lebih dari 640px akan berubah warnanya menjadi merah ( text-
red-500 ).

Hal ini bukan hanya berlaku pada warna, melainkan, berlaku untuk semua utility-classes
yang mendukung fitur responsif di Tailwind.

Pseudo-Class Variants
Di dalam CSS, pseudo-classes memungkinkan kamu untuk memberi style terhadap elemen
dalam suatu state spesial, seperti: hover, focus, first-child, dan masih banyak lagi.

Untuk menuliskannya mudah saja di CSS:

.element:hover {}

.element:focus {}

// more

Kamu hanya perlu menggunakan : dan dibarengi dengan nama psuedo-class tersebut.

Sayangnya, kamu tidak dapat menggunakan pseudo-classes pada inline style CSS.
Seperti ini misalnya:

<p style=":hover{ color: red; }">Hello, world</p>

Kode di atas tidak valid dan memang tidak tersedia di CSS. Sehingga kamu hanya dapat
menggunakan pseudo-class di dalam kode CSS block . Inilah salah satu alasan yang
menjadikan inline style di CSS sangat dihindari dalam beberapa kasus yang umum.

Pseudo-class di Tailwind
Saya memiliki kabar baik untuk kamu, di Tailwind kamu dapat menggunakan psuedo-class
hanya dengan menulis nama class saja di attribute class pada elemen HTML kamu.

Ya, Tailwind seklias mirip dengan inline style , namun Tailwind memiliki beberapa
keunggulan yang salah satunya memungkinkan kamu untuk menulis pseudo-classes tanpa
harus menulis rule -nya di kode CSS.

Walaupun hanya beberapa pseudo-classes yang tersedia di Tailwind, tapi, saya rasa cukup
untuk beberapa kasus umum, seperti: hover , focus , first-child , odd, even dan
lain sebagainya.

Berikut daftar pseudo-classes yang didukung oleh Tailwind:

Hover
Focus
Active
Disabled
Visited
First-child
Last-child
Odd-child
Even-child
Group-hover
Grup-focus
Focus-within

Mungkin kamu menyadari beberapa nama pseudo-class di Tailwind tidak ada di dalam CSS
murni, tapi, hal itu tidak menjadi masalah, karena memang pseudo-class ini berusaha agar
kita dapat mereduksi penggunaan custom class.

Menggunakan Pseudo-class Tailwind

Cara menggunakannya sederhana saja, kamu hanya perlu memberikan prefix sebelum
nama utility class yang kamu inginkan. Misal, kamu ingin warna teks elemen berwarna
merah dengan text-red-500 dan
kamu ingin mengubahnya menjadi biru dengan text-blue-500 maka kamu hanya
perlu menambahkan hover: di awal nama utility class tersebut.

<p class="text-red-500 hover:text-blue-500">Text</p> Dengan

seperti ini, kamu tidak perlu repot-repot nulis CSS, kan?

Begitu juga bila kamu ingin menuliskannya untuk perangkat yang lebih spesifik, misal hanya
untuk ukuran perangkat md , maka kamu perlu menuliskannya seperti ini:

<p class="text-red-500 md:hover:text-blue-500">Text</p>

Untuk pseudo-class variant lainnya sama saja, hanya perlu kamu ganti hover dengan
nama variant yang lain.

Perlu diingat, tidak semua utility class memiliki pseudo-class variant , utility class seperti
z-index tidak memiliki variant seperti hover , focus atau lainnya, utility class tersebut
hanya memiliki variant responsive .

Untuk penjelasan masing-masing variant akan dijelaskan di bawah ini. Variants

Seperti yang saya jelaskan di atas, Tailwind memiliki beberapa pseudo class variant
yang didukung:

Hover
Focus
Active
Disabled
Visited
First-child
Last-child
Odd-child
Even-child
Group-hover
Grup-focus
Focus-within

Kita akan membahasnya satu per satu.

Hover
Kamu dapat menggunakan pseudo-class hover hanya dengan menambahkan prefix
hover: sebelum nama utility class.

<a class="bg-transparent hover:bg-blue-500 hover:text white py-2

px-4 border border-gray-500 rounded"> Hover me
</a>

Hasilnya akan seperti ini:

 Sebelah kiri

dalam keadaan normal; sebelah kanan dalam keadaan hover

Elemen tombol di atas akan memiliki latar belakang biru ( text-blue 500 ) ketika di-
hover , karena di elemen tersebut terdapat utility class hover:bg-blue-500 . Utility
class tersebut akan memberikan efek ketika suatu elemen dalam keadaan hover .

Focus
Tambahkan prefix focus: untuk menambahkan utility class hanya pada saat focus .

<input class="px-6 py-4 border-b-2 border-gray-400

focus:border-blue-500" placeholder="Focus Bro">

Hasilnya akan seperti ini:

Sebelah kiri

dalam keadaan normal; sebelah kanan dalam keadaan focus

Active
Tambahkan prefix active: untuk menambahkan utility class hanya pada saat active .
Perlu diingat, active secara bawaan belum bisa digunakan, kamu harus mengaktifkannya
dahulu di berkas konfigurasi.

// tailwind.config.js
module.exports = {
// ...
variants: {
backgroundColor: ['responsive', 'hover', 'focus', 'active'],
},
}

Variant active hanya akan aktif pada utility class backgroundColor saja. Untuk utility
class lain kamu dapat mengaktifkannya satu per satu.

Berikut ini contohnya:

 <a class="bg-blue-500 text-white active:bg-blue-700 py-2 px-4
rounded">
Click me
</a>

Hasilnya akan seperti ini:

Sebelah kiri

dalam keadaan normal; sebelah kanan dalam keadaan active

Disabled
Tambahkan prefix disabled: untuk menambahkan utility class hanya pada saat
disabled. Perlu diingat, disabled secara bawaan belum bisa digunakan, kamu harus
mengaktifkannya dahulu di berkas konfigurasi.

// tailwind.config.js
module.exports = {
// ...
variants: {
opacity: ['responsive', 'hover', 'focus', 'disabled'], },
}

Variant disabled hanya akan aktif pada utility class opacity saja. Untuk utility class lain
kamu dapat mengaktifkannya satu per satu.

Berikut ini contohnya:

<button disabled class="bg-blue-500 disabled:bg-blue-300 active:bg-
blue-700 text-white py-2 px-4 rounded"> Click me
</button>

Dan berikut ini hasilnya:

Sebelah kiri

dalam keadaan normal; sebelah kanan keadaan disabled

Perlu diingat juga, variant ini hanya terdapat pada versi 1.1.0+ .

Visited
Tambahkan prefix visited: untuk menambahkan utility class hanya pada saat visited.
Perlu diingat, visited secara bawaan belum bisa digunakan, kamu harus mengaktifkannya
dahulu di berkas konfigurasi.
// tailwind.config.js
module.exports = {
// ...
variants: {
textColor: ['responsive', 'hover', 'focus',
'visited'],
},
}

Variant visited hanya akan aktif pada utility class textColor saja. Untuk utility class lain
kamu dapat mengaktifkannya satu per satu.

Berikut ini contohnya:

<a href="http://blabla.com" class="text-blue-500 font

semibold">Belum Dikunjungi</a>
<a href="https://tailwind.run/fbSbfs" class="text-blue-500
visited:text-purple-500 font-semibold">Sudah
Dikunjungi</a>

Berikut ini hasilnya:

Sebelah kiri

sebelum dikunjungi; sebelah kanan sudah dikunjungi (visited)

Perlu diingat juga, variant ini hanya terdapat pada versi 1.1.0+ . First-child

Tambahkan prefix first: untuk menambahkan utility class hanya pada saat elemen
tersebut adalah anak pertama dari parent -nya. Ini biasanya sangat dibutuhkan ketika
membuat loop item.

Berikut ini contohnya:

<div class="text-left w-64 border rounded bg-white"> <div

class="px-4 py-2 border-t first:border-t 0">Satu</div>
<div class="px-4 py-2 border-t">Dua</div>
<div class="px-4 py-2 border-t">Tiga</div>
 </div>

Berikut ini hasilnya:

Contoh item

dengan border-t

Setiap elemen item (Satu, Dua, dan Tiga) akan memiliki border-t , namun, pada item anak
pertama border-t tersebut tidak akan memberi efek, karena sudah ditimpa oleh
first:border-t-0 yang maksudnya border-top: 0; pada item anak pertama.

Variant ini hanya tersedia pada versi 1.1.0+ dan kamu harus mengaktifkannya dulu
untuk setiap utility class .
module.exports = {
// ...
variants: {
borderWidth: ['responsive', 'first', 'hover', 'focus'],
},
}

Last-child
Tambahkan prefix last: untuk menambahkan utility class hanya pada saat elemen
tersebut adalah anak terakhir dari parent- nya. Ini biasanya sangat dibutuhkan ketika
membuat loop item.

Berikut ini contohnya:

<div class="text-left w-64 border rounded bg-white"> <div

class="px-4 py-2 border-b">Satu</div>
<div class="px-4 py-2 border-b">Dua</div>
<div class="px-4 py-2 border-b first:border-b 0">Tiga</div>
</div>

Berikut ini hasilnya:

 Contoh item dengan border-b

Mirip seperti first: . Setiap elemen item akan memiliki border-b , namun, pada item anak
terakhir border-b tersebut tidak akan memberi efek, karena sudah ditimpa oleh
last:border-b-0 yang maksudnya border-bottom: 0; pada item anak terakhir.

Variant ini hanya tersedia pada versi 1.1.0+ dan kamu harus mengaktifkannya dulu
untuk setiap utility class .

// tailwind.config.js
module.exports = {
// ...
variants: {
borderWidth: ['responsive', 'last', 'hover', 'focus'], },
}

Odd-child
Tambahkan prefix odd: untuk menambahkan utility class hanya pada saat elemen
tersebut adalah anak ganjil dari parent- nya. Ini biasanya sangat dibutuhkan ketika
membuat loop item.

Berikut ini contohnya:

<div class="text-left w-64 border rounded bg-white"> <div

class="px-4 py-2 odd:bg-gray-200">Satu</div> <div class="px-4 py-2
odd:bg-gray-200">Dua</div> <div class="px-4 py-2 odd:bg-gray-
200">Tiga</div> </div>

Berikut ini hasilnya:

Contoh

dengan background-color
Seperti yang kamu lihat, bg-gray-200 hanya akan memberi efek pada item yang ganjil
saja, seperti 1 dan 3.

Variant ini hanya tersedia pada versi 1.1.0+ dan kamu harus mengaktifkannya dulu
untuk setiap utility class .

// tailwind.config.js
module.exports = {
// ...
variants: {
backgroundColor: ['responsive', 'odd', 'hover', 'focus'],
},
}

Even-child
Tambahkan prefix even: untuk menambahkan utility class hanya pada saat elemen
tersebut adalah anak genap dari parent- nya. Ini biasanya sangat dibutuhkan ketika
membuat loop item.

Berikut ini contohnya: