Hello, People With The Spirit Of Learning!
Salah satu jenis framework pada CSS (Cascading Style Sheet), yaitu Tailwind CSS. Kamu akan mengetahui Tools yang terdapat pada Tailwind CSS. Framework CSS ini dapat mempermudah pekerjaan kamu sebagai Developer. Yuk, Simak!
Perkenalan Tailwind CSS
Tailwind CSS merupakan framework yang bersifat utility first untuk membangun UI yang kompleks dan memiliki ciri khas tersendiri.
Framework yang dirilis oleh Adam Wathan pada tahun 2019, dan pada tahun 2020 Tailwind CSS merilis v2 atau versi kedua yang dibuat oleh Steve Schoger dengan design visual komponennya.
Components Tailwind CSS
Lima Tools Tailwind CSS, yaitu:
- Tailwind Toolbox
- Tailwind Components
- Tailwind Templates
- Tailblocks
- Meraki UI
1) Tailwind Toolbox
Tailwind Toolbox dibuat oleh Amrit Nagi berisi lebih dari 45 landing page templates dan 16 components. Tailwind Toolbox bersifat open source, beberapa template dan component berasal dari kontribusi suatu komunitas. Pada component ini terdapat plugins, tools, kits, dan generatos yang dapat membantu kamu menggunakan Tailwind CSS dengan lebih baik. Selain itu, Tailwind Toolbox juga menyediakan template scripts untuk JS, seperti penutup dan pembuka. Kamu bisa menggunakan components dengan klik template atau component yang ingin digunakan, lalu mengunduh template CSS atau menyalin kode, dan pindahkan ke projek yang sedang kamu buat.
2) Tailwind Components
Tailwind Components bersifat open source, memiliki beberapa pilihan template yang bisa kamu gunakan secara gratis, kamu bisa gunakan untuk Bootstrap sebuah aplikasi baru.
Components ini terdiri dari dropdown, login, modals, tab, input, dan ready made options yang dibuat oleh Tailwind CSS. kamu juga bisa membuat component kamu sendiri yang dimana component tersebut bisa digunakan oleh orang lain. Untuk menggunakan components, kamu bisa memilih component terlebih dahulu, lalu kamu klik unduh atau langsung menyalin kode dari component tersebut.
3) Tailwind Templates
Tools ini dibuat oleh J-hiz, terdiri dari 30 design components, seperti buttons, cards, forms, search inputs, dan modals.
Untuk menggunakan templates apapun yang terdapat pada Tailwind Templates, kamu hanya perlu klik templates yang kamu suka, lalu salin kode tersebut ke projek kamu.
4) Tailblocks
Tailblocks dibuat oleh Mert Curuken, tools ini terdiri dari 60 layout blocks, seperti layout testimonials, teams, steps, stats, prices, heroes, headers, galleries, footers, features dan ecommerce. Kamu dapat menggunakan component ini dengan mode gelap atau dark mode, kamu juga dapat mengubah warna yang kamu inginkan dari UI yang ada di component Tailblocks.
Untuk menggunakan layout blocks apapun, kamu bisa langsung klik “The View Code”, lalu copy atau salin kode, dan pindahkan kode tersebut ke projek yang sedang kamu buat.
5) Meraki UI
Meraki UI dibuat oleh Khatab Wedaa dan Mosab Ibrahim. Tools ini terdiri dari 50 componen Tailwind CSS, dan tools ini mendukung RTL layout. Meraki UI bersifat sederhana, dan ringan. Mulai dari button, team sections, dan cards, kamu dapat menggunakan element yang tersedia untuk membuat prototype.
Component yang terdapat pada Meraki UI, yaitu alerts, login forms, buttons, cards, dropdowns, navbars, pagination, dan footers. Untuk menggunakan component tersebut, kamu hanya perlu menyalin dan memindahkan ke projek yang sedang kamu buat.
By using this utility first framework, you don't have to write custom CSS to style your application. You can use Tailwind CSS to control the padding, margin, color, font, shadow, and more of your application.
Setelah kamu sudah mengetahui component pada Tailwind CSS, kamu bisa langsung belajar dan praktik menggunakan Tailwind CSS. Semoga artikel ini bermanfaat, selamat belajar.
BuildWith Angga.
