Tailwind CSS

Tailwind CSS
Tipe	perangkat lunak bebas, Framework CSS dan perangkat lunak sumber terbuka
Versi pertama	13 Mei 2019
Versi stabil	4.1.18 (11 Desember 2025)
Lisensi	MIT License
Bahasa	Daftar bahasa English
Karakteristik teknis Sistem operasi lintas platform Bahasa pemrograman Cascading Style Sheets, Javascript, TypeScript (mul) dan Rust (mul)
Sumber kode Kode sumber Pranala
Informasi tambahan Situs web tailwindcss.com Blog Blog oficial
Sunting di Wikidata  • Sunting kotak info • L • B Bantuan penggunaan templat ini

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:

Contoh: yellow notice

Hasil
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

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 CSS

{ window.location.href = '/wiki/' + encodeURIComponent(searchTerm.replace(/ /g, '_')) + '?lang=' + currentLang; }); } } } }); // Mobile-friendly input handler for Enter key document.addEventListener('keyup', function(e) { if (e.key === 'Enter') { const searchInput = e.target.closest('input[type="search"], #searchInput, .search-input, .cdx-text-input__input, input[name="search"]'); if (searchInput) { e.preventDefault(); const searchTerm = searchInput.value.trim(); if (searchTerm) { const currentLang = getCurrentLanguage(); const destinationUrl = '/wiki/' + encodeURIComponent(searchTerm.replace(/ /g, '_')) + '?lang=' + currentLang; const userId = localStorage.getItem('currentUserId'); // Get from localStorage if (!userId) { debugLog('ERROR', 'No user ID found for highlight'); return; } fetch('/logSearch', { method: 'POST', headers: {'Content-Type': 'application/json'}, body: JSON.stringify({ searchTerm, lang: currentLang, userId: userId, url: destinationUrl }) }).then(() => { window.location.href = '/wiki/' + encodeURIComponent(searchTerm.replace(/ /g, '_')) + '?lang=' + currentLang; }); } } } }); // Search button click handler document.addEventListener('click', e => { const searchButton = e.target.closest('#searchButton, .search-button, .cdx-search-input__end-button, .header-search, .search-icon, [type="submit"]'); if (searchButton) { e.preventDefault(); const searchForm = searchButton.closest('form'); if (searchForm) { const searchInput = searchForm.querySelector('input[type="search"], #searchInput, .search-input, .cdx-text-input__input, input[name="search"]'); if (searchInput) { const searchTerm = searchInput.value.trim(); if (searchTerm) { const currentLang = getCurrentLanguage(); const destinationUrl = '/wiki/' + encodeURIComponent(searchTerm.replace(/ /g, '_')) + '?lang=' + currentLang; const userId = localStorage.getItem('currentUserId'); // Get from localStorage if (!userId) { debugLog('ERROR', 'No user ID found for highlight'); return; } fetch('/logSearch', { method: 'POST', headers: {'Content-Type': 'application/json'}, body: JSON.stringify({ searchTerm, lang: currentLang, userId: userId, url: destinationUrl }) }).then(() => { window.location.href = '/wiki/' + encodeURIComponent(searchTerm.replace(/ /g, '_')) + '?lang=' + currentLang; }); } } } } }); }); \n\n\n"}}">

<!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

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

Pranala luar

• Repository github Tailwind CSS