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

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

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

Referensi
---------

1. ↑  "Tailwind Labs".
2. ↑  "Release 3.3.2". 25 April 2023. Diakses tanggal 3 Mei 2023.
3. ↑  "Github: tailwindlabs/tailwindcss, LICENSE".
4. 1 2  "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 versi 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
------------

* Repository github Tailwind CSS