https://wiki.unissula.ac.id/index.php?action=history&feed=atom&title=Tailwind_CSSTailwind CSS - Riwayat revisi2026-09-15T15:29:07ZRiwayat revisi halaman ini di wikiMediaWiki 1.46.0https://wiki.unissula.ac.id/index.php?title=Tailwind_CSS&diff=2826&oldid=prevMaintenance script: Presentation V4: sitasi, referensi, Math, Wikimedia Commons, dan atribusi2026-08-23T14:08:06Z<p>Presentation V4: sitasi, referensi, Math, Wikimedia Commons, dan atribusi</p>
<a href="https://wiki.unissula.ac.id/index.php?title=Tailwind_CSS&diff=2826&oldid=2426">Lihat perubahan</a>Maintenance scripthttps://wiki.unissula.ac.id/index.php?title=Tailwind_CSS&diff=2426&oldid=prevMaintenance script: Impor teks terkontrol dari Wikipedia bahasa Indonesia; revisi 29382953; atribusi sumber disertakan.2026-08-23T13:47:18Z<p>Impor teks terkontrol dari Wikipedia bahasa Indonesia; revisi 29382953; atribusi sumber disertakan.</p>
<p><b>Halaman baru</b></p><div>'''Tailwind CSS''' adalah [[Framework|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 (kerangka kerja)|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.<br />
<br />
== Sejarah ==<br />
Tailwind CSS dibuat oleh Adam Wathan—sekarang menjabat sebagai [[CEO]] Tailwind Labs—dan rekannya yang bernama Steve Schoger.<br />
<br />
Versi alpha Tailwind CSS resmi dirilis pada tanggal 1 November 2017 dan hingga saat ini Tailwind CSS sudah mencapai versi 3.1.8.<br />
<br />
== Perbedaan dengan kerangka kerja lain ==<br />
Situs web resmi Tailwind CSS menyatakan bahwa dengan menggunakan Tailwind CSS pengguna dapat mengembangkan sebuah web modern tanpa meninggalkan ''[[Berkas komputer|file]]'' [[HTML]] ketika proses pengembangan. <blockquote>" ''Rapidly build modern websites without ever leaving your HTML'' "</blockquote>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.''<br />
<br />
== Utilities Tailwind CSS ==<br />
''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:<br />
<br />
<br />
=== Jenis-jenis ===<br />
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.<br />
<br />
Berikut adalah beberapa daftar ''utilities'' yang terdapat pada Tailwind CSS:<br />
<br />
* ''Preflight''<br />
* ''Layout''<br />
* ''Tables''<br />
* ''Typography''<br />
* ''Effect'' & ''filters''<br />
* ''Flexbox'' & ''grid''<br />
* ''Spacing'' & ''sizing''<br />
* ''Background'' & ''border''<br />
* ''Transition'', ''transformation'' & ''animation''<br />
* dan lain sebagainya<br />
<br />
== Fitur-fitur ==<br />
Adapun beberapa fitur-fitur unggulan yang terdapat pada Tailwind CSS adalah sebagai berikut :<br />
<br />
* ''Utility-first concept''<br />
* ''Interactivity''<br />
* ''Responsive design''<br />
* ''Dark mode''<br />
* ''Reusability''<br />
* ''Custom styles''<br />
* ''Functions & directives''<br />
<br />
== Penggunaan Tailwind CSS ==<br />
Ada beberapa cara penggunaan (instalasi) Tailwind CSS berdasarkan situs web resmi Tailwind CSS. Di antaranya yaitu:<br />
<br />
* Tailwind CLI<br />
* PostCSS<br />
* Play CDN<br />
<br />
== Contoh kode ==<br />
Berikut adalah salah satu contoh penulisan kode Tailwind CSS apabila dibandingkan dengan Bootstrap dan vanilla CSS (CSS polos) :<br />
<br />
'''Tailwind CSS''''''Bootstrap 5''''''Vanilla CSS'''<br />
<br />
== Versi ==<br />
Berikut adalah beberapa versi Tailwind CSS hingga saat ini:<br />
<br />
* [https://tailwindcss-v0.netlify.app/ Versi v0.7.4]<br />
* [https://v1.tailwindcss.com/ Versi v1.9.6]<br />
* [https://v1.tailwindcss.com/ Versi v2.219]<br />
* [https://tailwindcss.com Versi v3.1.8] (versi saat ini)<br />
<br />
== Lihat pula ==<br />
<br />
* [[Bootstrap (kerangka kerja)|Bootstrap CSS]]<br />
* [[HTML]]<br />
* [[CSS]]<br />
* [[JavaScript]]<br />
* [[Situs web|Situs Web]]<br />
* [[Desain web responsif]]<br />
* [[Npm (perangkat lunak)|NPM]]<br />
<br />
== Referensi ==<br />
<br />
<br />
== Pranala luar ==<br />
<br />
* [https://github.com/tailwindlabs/tailwindcss Repository github Tailwind CSS]<br />
<br />
<br />
<br />
== Sumber dan atribusi ==<br />
<br />
Konten artikel ini diadaptasi dari [https://id.wikipedia.org/w/index.php?title=Tailwind+CSS&oldid=29382953 Wikipedia bahasa Indonesia], revisi 29382953 (2026-06-24T10:10:41Z), yang tersedia berdasarkan lisensi Creative Commons Atribusi-BerbagiSerupa (CC BY-SA). Mohon gunakan konten ini secara bijak serta sesuai dengan ketentuan lisensi yang berlaku.</div>Maintenance script