Tailwind CSS adalah library CSS yang berguna untuk membangun desain website modern dan responsif dengan menyediakan banyak class CSS prebuild. Tailwind CSS mengedepankan pendekatan utility-first dimana berbagai utilitas seperti pewarnaan, posisi, ukuran dapat diterapkan pada berbagai komponen. Meskipun membutuhkan penyesuaian, Tailwind CSS sangat fleksibel dan dapat dikustomisasi.

1. Arya Wicaksana (Frontend Developer)
aryawicaksana@vcgamers.com
Introduction to
Tailwind CSS

2. • Tailwind CSS adalah library CSS framework yang sangat
berguna untuk membangun desain website modern dan
responsif.
• Tailwind CSS mempermudah proses pembuatan desain
dengan memberikan banyak class CSS prebuild yang
dapat digunakan secara mudah.
Berkenalan dengan Tailwind CSS ?

3. Keunggulan
Tailwind
• Utility First
• Wide range of color class
• Highly Customizable
• Remove bloated CSS classes

4. Kalau Bootstrap CSS dalam bundle-nya memberikan pre-
styled components, seperti Card, Alert, Modal, dan
sebagainya, nah, Tailwind CSS ini mengedepankan utilitas
atau daya guna.
Daya guna inilah yang bisa diterapkan di berbagai hal (dalam
konteks CSS framework). Seperti :
• Pewarnaan html element (coloring)
• Posisi dan tampilan (position and display)
• Penetapan ukuran (sizing)
• dan lain-lain..
Utility First

5. Coloring HTML elements

6. Position and Display

7. Sizing

8. Ini merupakan salah satu keunggulan dari Tailwind yang sering
saya gunakan secara pribadi, dan saya menyukainya.
Color class atau warna berbasis class element yang
disediakan oleh Tailwind cukup bervariasi, sehingga, apabila
UI/UX designer sepakat untu menggunakan warna yang ada di
Tailwind, hal ini akan mengurangi banyak koordinasi dalam
proses development kedepannya, terutama dalam hal in-
konsistensi warna pada user interface.
Wide range of color class

10. dan masih banyak lagi...
https://tailwindcss.com/docs/customizing-
colors

11. Dengan kekuatan utility-first, maka, Frontend Developer sangat
dimudahkan dalam pembuatan komponen. Semua styling ada
dalam inline html element yang ada di komponen.
Semua konfigurasi tailwind ada di file tailwind.config.js , jadi
developer bisa menentukan kustomisasi spesifik, misalnya
membuat breakpoint class untuk screen-size tablet.
Selain itu, jika kesulitan dalam mendapatkan ide, tailwind
showcase yang dibuat dengan murni tailwind css yang ada di
internet, bisa langsung diterapkan di element atau komponen
yang sedang dibangun oleh Developer.
Highly Customizable

12. tailwind.config.js

13. tailwind showcase in https://tailwindcomponents.com/

14. Utility-first pada inline class element membuat Developer tidak
perlu membuat class CSS yang baru serta mengingatnya pada
setiap halaman atau komponen yang ia buat. Hal ini mereduksi
"zombie" css style, dan akan menghasilkan css yang optimal pada
saat build app.
Unbloated CSS class

15. Kekurangan
Tailwind
• Slow Start
• Long Inline Classes
• Need new adaptation

16. Utility-first yang ada di tailwind membutuhkan pengetahuan
dalam hal penguasaan konsep-konsep dasar dari CSS itu sendiri,
seperti position, display, grid, flexbox, dan lain-lain. Sangat tidak
disarankan untuk memulai developement menggunakan tailwind
apabila belum mengetahui konsep-konsep CSS yang ada.
Oleh karena itu, Developer perlu waktu tambahan sebelum
menggunakan tailwind.
Slow Start

17. Utility-first yang ada di tailwind bisa sangat membantu
developer untuk membuat sebuah halaman atau komponen
pada aplikasi.
Namun, seiring perkembangan aplikasi, tentu sangat
memungkinkan untuk adanya peningkatan dari segi tampilan,
semakin kompleks suatu tampilan, maka class yang ada di inline
element-nya pun akan semakin panjang.
Long Inline Classes

18. Segala teknologi baru tentu butuh penyesuaian saat mulai
digunakan. Tailwind pun juga begitu, developer yang biasanya
nyaman menggunakan custom class bawaan javascript
framework tentu akan perlu banyak adaptasi saat menggunakan
tailwind yang kekuatan utamanya ada di inline styling.
Selain itu, tailwind juga "seolah-olah" memaksa developer untuk
menciptakan apapun dari nol. Tidak seperti Bootstrap CSS yang
memiliki pre-build css komponen, atau Material UI(React) atau
Vuetify(Vue) yang sudah berbentuk komponen siap pakai.
Need new adaptation

19. Sample Implementation

20. Sample Implementation

21. "Jika alat itu cocok untuk proses
development, maka gunakanlah. Jika tidak,
maka jangan gunakan dan oprek sendiri
kalau ada waktu."