• Source: Tailwind CSS

Tailwind CSS adalah kerangka kerja (framework) CSS yang di dalamnya terdapat sekumpulan utility classes untuk membangun antarmuka kustom dengan cepat. Tailwind CSS berbeda dengan kerangka kerja CSS seperti Bootstrap, Bulma, atau Foundation, karena Tailwind CSS bukan sebuah UI Framework. Tailwind CSS tidak memiliki tema default maupun komponen UI bawaan. Tailwind CSS dirancang agar dapat digunakan oleh pengguna sesuai dengan desain kustom yang mereka inginkan.




Sejarah


Tailwind CSS dibuat oleh Adam Wathan—sekarang menjabat sebagai CEO Tailwind Labs—dan rekannya yang bernama Steve Schoger.
Versi alpha Tailwind CSS resmi dirilis pada tanggal 1 November 2017 dan hingga saat ini Tailwind CSS sudah mencapai versi 3.1.8.




Perbedaan dengan kerangka kerja lain


Situs web resmi Tailwind CSS menyatakan bahwa dengan menggunakan Tailwind CSS pengguna dapat mengembangkan sebuah web modern tanpa meninggalkan file HTML ketika proses pengembangan. " Rapidly build modern websites without ever leaving your HTML "Selain itu, perbedaan lain Tailwind CSS dengan kerangka kerja (framework) lain seperti Bootstrap yaitu Tailwind CSS merupakan Utility-First Framework, sedangkan Bootstrap adalah UI Framework.




Utilities Tailwind CSS


Utility adalah kelas HTML sederhana yang biasanya berada dalam satu scope properti CSS, seperti border-style atau background-color. Berikut adalah contoh utility classes yang ada di Tailwind CSS:




= Jenis-jenis

=
Ada banyak jenis utility class di Tailwind CSS yang memungkinkan pengguna untuk mengontrol dan melakukan kustom properti CSS sesuai dengan keinginannya, seperti warna font, ukuran font, jenis font, padding, margin, display, dan lain sebagainya.
Berikut adalah beberapa daftar utilities yang terdapat pada Tailwind CSS:

Preflight
Layout
Tables
Typography
Effect & filters
Flexbox & grid
Spacing & sizing
Background & border
Transition, transformation & animation
dan lain sebagainya




Fitur-fitur


Adapun beberapa fitur-fitur unggulan yang terdapat pada Tailwind CSS adalah sebagai berikut :

Utility-first concept
Interactivity
Responsive design
Dark mode
Reusability
Custom styles
Functions & directives




Penggunaan Tailwind CSS


Ada beberapa cara penggunaan (instalasi) Tailwind CSS berdasarkan situs web resmi Tailwind CSS. Di antaranya yaitu:

Tailwind CLI
PostCSS
Play CDN




Contoh kode


Berikut adalah salah satu contoh penulisan kode Tailwind CSS apabila dibandingkan dengan Bootstrap dan vanilla CSS (CSS polos) :

Tailwind CSSBootstrap 5Vanilla CSS




Versi


Berikut adalah beberapa versi Tailwind CSS hingga saat ini:

Versi v0.7.4
Versi v1.9.6
Versi v2.219
Versi v3.1.8 (versi saat ini)




Lihat pula


Bootstrap CSS
HTML
CSS
JavaScript
Situs Web
Desain web responsif
NPM




Referensi






Pranala luar


Repository github Tailwind CSS

Kata Kunci Pencarian:

• Tailwind CSS
• Cascading Style Sheets
• Tailwind CSS
• Tailwind (disambiguation)
• CSS grid layout
• CSS-in-JS
• Laravel
• Bootstrap (front-end framework)
• CSS framework
• Deno (software)
• List of airline codes