Tailwind CSS, dan Bagaimana Menggunakannya dengan create-react-app

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/).

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.

Sebagai pendukung buat Tailwind CSS, sekitar enam bulan yang lalu tim tailwind merilis Tailwind UI 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 atau 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 untuk patching langsung konfigurasi webpack pada react-scripts.

Pertama siapkan aplikasi react

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

Berikutnya install tailwind dan patch-package

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:

// ...
{
  // ...
  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:

"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

npx patch-package react-scripts

Outputnya lebih kurang seperti berikut

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

@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:

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

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

Kode lengkap dari contoh ini bisa anda temukan di

Semoga berguna!!!