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 *[[Berkas komputer|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 CSS**
```html
<!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>
  
  <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**
```html
<!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>
  
  <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**
```html
<!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>
  
  <style>
    .button {
      padding: 6px 12px;
      border-radius: 4px;
      background-color: #0D6eFD;
      color: white;
      border: 0;
      transition: 0.2s;
    }
  </style>
  
</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


## Pranala luar

* Repository github Tailwind CSS