📑 Table of Contents▼
Tailwind CSS
Penulis asliAdam Wathan, Steve Schoger
PengembangTailwind Labs[1]
Templat:Kotak info perangkat lunak/simple
Ditulis dalamJavaScript
PlatformWeb
Tersedia dalamEnglish
LisensiMIT License [2]
Situs webtailwindcss.com
Repositori

Tailwind CSS adalah kerangka kerja (framework) CSS yang di dalamnya terdapat sekumpulan utility classes untuk membangun antarmuka kustom dengan cepat.[4] Tailwind CSS berbeda dengan kerangka kerja CSS seperti Bootstrap, Bulma, atau Foundation, karena Tailwind CSS bukan sebuah UI Framework.[5] 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.[6]

Sejarah

sunting

Tailwind CSS dibuat oleh Adam Wathan—sekarang menjabat sebagai CEO Tailwind Labs—dan rekannya yang bernama Steve Schoger.[7]

Versi alpha Tailwind CSS resmi dirilis pada tanggal 1 November 2017 dan hingga saat ini Tailwind CSS sudah mencapai versi 3.1.8.[8]

Perbedaan dengan kerangka kerja lain

sunting

Situs web resmi Tailwind CSS menyatakan bahwa dengan menggunakan Tailwind CSS pengguna dapat mengembangkan sebuah web modern tanpa meninggalkan file HTML ketika proses pengembangan.[4]

" 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

sunting

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

Contoh: yellow notice
Hasil FExample Tailwind yellow warning.png
Kode 
<div class="m-4 p-4 bg-yellow-200 font-bold rounded-lg">
  <p>Please be careful when feeding the birds.</p>
</div>
Classes Tailwind Vanilla CSS atau CSS polos
m-4 margin: 1rem;
p-4 padding: 1rem;
bg-yellow-200 background-color: rgba(229, 231, 235, 1);
font-bold font-weight: 700;
rounded-lg border-radius: 0.5rem;

Jenis-jenis

sunting

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.[10]

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

sunting

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

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

Penggunaan Tailwind CSS

sunting

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

  • Tailwind CLI
  • PostCSS
  • Play CDN

Contoh kode

sunting

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

Tailwind CSS

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Page Title</title>
  <!-- Tailwind CSS CDN -->
  <script src="https://cdn.tailwindcss.com"></script>
</head>

<body>
  <button type="submit" class="bg-blue-600 text-white px-3 py-2 rounded hover:bg-blue-700">Submit</button>
</body>

</html>

Bootstrap 5

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Page Title</title>
  <!-- Bootstrap5 CDN links -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
</head>

<body>
  <button type="submit" class="btn btn-primary">Submit</button>
</body>

</html>

Vanilla CSS

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Page Title</title>
  <!-- di bawah adalah kode CSS -->
  <style>
    .button {
      padding: 6px 12px;
      border-radius: 4px;
      background-color: #0D6eFD;
      color: white;
      border: 0;
      transition: 0.2s;
    }
  </style>
  <!-- di atas adalah kode CSS -->
</head>

<body>
  <button type="submit" class="button">Submit</button>
</body>

</html>

Versi

sunting

Berikut adalah beberapa versi Tailwind CSS hingga saat ini:

Lihat pula

sunting

Referensi

sunting
  1. ^ "Tailwind Labs".
  2. ^ "Github: tailwindlabs/tailwindcss, LICENSE".
  3. ^ "Release 4.3.1". 12 Juni 2026. Diakses tanggal 13 Juni 2026.
  4. ^ a b "Tailwind CSS - Rapidly build modern websites without ever leaving your HTML". tailwindcss.com (dalam bahasa Inggris). Diakses tanggal 2022-10-19.
  5. ^ "Tailwind CSS - A Utility-First CSS Framework for Rapid UI Development". tailwindcss-v0.netlify.app (dalam bahasa Inggris). Diakses tanggal 2022-10-19.
  6. ^ "Tailwind CSS - A Utility-First CSS Framework for Rapidly Building Custom Designs". tailwindcss.com (dalam bahasa Inggris). Diakses tanggal 2022-10-19.
  7. ^ "The Story of Tailwind CSS feat. Adam Wathan". The OfferZen Community Blog. Diakses tanggal 2022-10-19.
  8. ^ "Release Notes - Tailwind CSS". tailwindcss.com (dalam bahasa Inggris). Diarsipkan dari asli tanggal 2020-11-06. Diakses tanggal 2022-10-19.
  9. ^ "Utilities". U.S. Web Design System (USWDS) (dalam bahasa Inggris). 2022-10-11. Diakses tanggal 2022-10-19.
  10. ^ "Utility-First Fundamentals - Tailwind CSS". tailwindcss.com (dalam bahasa Inggris). Diakses tanggal 2022-10-19.
  11. ^ "Installation: Tailwind CLI - Tailwind CSS". tailwindcss.com (dalam bahasa Inggris). Diakses tanggal 2022-10-19.
  12. ^ "Installation: Tailwind CLI - Tailwind CSS". tailwindcss.com (dalam bahasa Inggris). Diakses tanggal 2022-10-19.

Pranala luar

sunting

📚 Artikel Terkait di Wikipedia

Angin sakal dan angin buritan

Angin buritan (tailwind) adalah angin yang bertiup searah dengan arah gerak suatu benda, sedangkan angin sakal (headwind) bertiup berlawanan arah dengan

CSS

padding: 6px 12px; text-decoration: none; } Bootstrap (kerangka kerja) Tailwind CSS Bulma Slamet Riyanto, Membuat Web Portal Multi Bahasa Jomla 1.5X +

Bilangan riil negatif

assistance and considered illegal. The terms "tailwind" and "headwind" are also frequently used. A tailwind pushes the runners forward (+) while a headwind

Southwest Airlines Penerbangan 1248

awak. Konsekuensinya, pesawat harus mendarat dengan angin dari belakang (tailwind), sehingga kecepatan relatif terhadap darat meningkat. Saat mendarat, pesawat

Overtake!

sebagai supervisor, dan Kana Utatane menggubah musiknya. Lagu tema pembuka, "Tailwind", dibawakan oleh VTuber dari Nijisanji Kanae, sedangkan lagu tema penutupnya

Daftar anggota Decepticon

Futuristic stealth Jet Nightflight - F-14 Tomcat Stormcloud - Dassault Rafale Tailwind - A-10 Thunderbolt Sports Car Patrol Black Jack - Ford Mustang Detour -

Treadstone

Pengaturan kamera Kamera tunggal Rumah produksi Universal Content Productions Tailwind Productions Captivate Entertainment Imperative Entertainment Rilis asli

Byeon Seong-tae

casting lineup → main poster revealed, ‘domestic and international OTT tailwind’]. metroseoul.co.kr (dalam bahasa Korea). Byeon Seong-tae di IMDb (dalam