Tailwind CSS, dan Bagaimana Menggunakannya dengan create-react-app
Tags: tailwindcss, opensource, react
Published: 2020-09-11 15:53:43

---
title: Tailwind CSS, dan Bagaimana Menggunakannya dengan create-react-app
published: true
date: 2020-09-05 06:40:40 UTC
tags: tailwindcss,opensource,react
canonical_url: https://medium.com/@armedi.id/tailwind-css-dan-bagaimana-menggunakannya-dengan-create-react-app-70d312286b28
---

Ada satu artikel menarik yang dipublikasikan oleh Adam Wathan (pembuat tailwindcss) pada awal bulan agustus lalu ([https://adamwathan.me/tailwindcss-from-side-project-byproduct-to-multi-mullion-dollar-business/](https://adamwathan.me/tailwindcss-from-side-project-byproduct-to-multi-mullion-dollar-business/)).

Berawal dari ketidakpuasannya terhadap solusi-solusi yang sudah ada, dia pun membuat framework css sendiri. Awalnya hanya untuk kebutuhan sendiri, tapi kemudian mengundang ketertarikan dari beberapa orang yang ingin berkolaborasi dan menggunakannya juga. Singkat cerita, diputuskanlah project ini menjadi _open source_ dengan nama Tailwind.

![](https://cdn-images-1.medium.com/max/464/1*KPSx2tUY6Pdk9EFT7nL70Q.png)

Sebagai pendukung buat Tailwind CSS, sekitar enam bulan yang lalu tim tailwind merilis [Tailwind UI](https://tailwindui.com) sebagai project komersil. Dalam waktu 5 bulan saja, pendapatan yang diperoleh hampir mencapai 2 juta dollar (lebih kurang 30 miliar rupiah). Suatu pencapaian yang hebat untuk sesuatu yang berawal dari _side project_.

Oke, sekarang bagaimana cara pakainya pada aplikasi yang sudah di-_bootstrap_ dengan create-react-app tanpa harus _eject_?

Cara yang umum saya temukan pada berbagai tutorial adalah dengan membuat proses tambahan yang terpisah, entah itu dengan postcss-cli atau tailwind cli. Cara ini tidak efisien, karena di dalam create-react-app sudah ada postcss yang harusnya bisa diintegrasikan dengan tailwind.

Lalu ada juga cara dengan meng-_override_ konfigurasi standar create-react-app menggunakan tools seperti [react-app-rewired](https://github.com/timarney/react-app-rewired) atau [craco](https://github.com/gsoft-inc/craco). Cara ini bagus, tapi kekurangannya adalah mengharuskan developer mempelajari API-nya terlebih dahulu. Satu hal yang menurut saya tidak perlu kalau perubahan konfigurasi yang dilakukan cukup sederhana, seperti menambahkan tailwind ke dalam postcss.

Cara yang saya pakai adalah dengan menggunakan [patch-package](https://github.com/ds300/patch-package) untuk _patching_ langsung konfigurasi webpack pada react-scripts.

Pertama siapkan aplikasi react

```bash
npm init react-app cra-tailwind
cd cra-tailwind
```

Berikutnya install tailwind dan patch-package

```bash
npm install tailwindcss patch-package
```

Kemudian buka konfigurasi webpack dari react-scripts yang bisa anda temukan di node\_modules/react-scripts/config/webpack.config.js. Di dalam file ini cari fungsi getStyleLoader, di dalam fungsi ini akan ada konfigurasi postcss-loader.

Pada list plugin postcss-loader tambahkan tailwindcss seperti ini:

```javascript
// ...
{
  // ...
  loader: require.resolve('postcss-loader'),
  options: {
    // ...
    plugins: () => [
      require('tailwindcss'),
      // ...
    ],
    // ...
  },
},
// ...
```

Selanjutnya agar perubahan ini bisa direplikasi dan masuk ke _source control_ seperti git, kita akan menggunakan patch-package. Tambahkan command postinstall pada list scripts di package.json seperti berikut:

```json
"scripts": {
  "start": "react-scripts start",
  "build": "react-scripts build",
  "test": "react-scripts test",
  "eject": "react-scripts eject",
  "postinstall": "patch-package"
},
```

Lalu karena kita sebelumnya sudah melakukan patching pada react-scripts, jalankan command ini di terminal

```bash
npx patch-package react-scripts
```

Outputnya lebih kurang seperti berikut

```bash
patch-package 6.2.2
• Creating temporary folder
• Installing react-scripts@3.4.3 with npm
• Diffing your files with clean files
✔ Created file patches/react-scripts+3.4.3.patch
```

patch-package akan membuat folder patches yang di dalamnya berisikan semua _override_ yang sudah dilakukan. Pada case ini kita telah meng-_override_ react-scripts.

Langkah terakhir, update file src/index.css dengan tailwind

```css
@tailwind base;
@tailwind components;
@tailwind utilities;
```

Sekarang untuk memastikan konfigurasi kita sudah berjalan dengan benar, saya coba tambahkan class text-red-500 untuk text di App.js. Hasilnya:

![](https://cdn-images-1.medium.com/max/1024/1*ulP7AwmxuE-CgmVhXNKAOQ.png)<figcaption>teks sudah berubah menjadi warna merah</figcaption>

Anda bisa menambahkan file tailwind.config.js untuk kustomisasi lebih lanjut. Konfigurasi minimal yang saya pakai adalah

```javascript
module.exports = {
  purge: ['./src/\*\*/\*.js', './src/\*\*/\*.jsx'],
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
};
```

Kode lengkap dari contoh ini bisa anda temukan di 

{% github armedi/cra-tailwind no-readme %}

Semoga berguna!!!