Cara Install Tailwind CSS pada React project

Halo guys, pada kali ini saya akan membagikan bagaimana cara menggunakan Tailwind CSS pada project React kita. Langsung saja kita mulai.

Pastikan sudah menginstall nodejs pada komputer/laptop Anda. Karena untuk membuat project React, kita perlu menggunakan NPM yaitu dengan cara menginstall nodejs. Untuk mengecek apakah nodejs sudah terpasang ketikkan perintah berikut pada terminal Anda.

node -v

Jika muncul versi, maka nodejs sudah terpasang. Lalu untuk mengecek versi NPM ketikkan perintah berikut.

npm -v

Jika sudah muncul versi NPM, maka kita sudah bisa untuk membuat project React.

Pertama, buat project React terlebih dahulu jika kita belum memiliki project React. Jika Anda sudah memiliki project React, silahkan lewati tahap ini. Kita akan membuat project React baru menggunakan Create React App.

Buka terminal, pastikan Anda sudah berada pada direktori folder tempat dimana Anda ingin menyimpan project React. Ketikkan perintah berikut.

npx create-react-app my-project

Anda bebas memberikan nama project yang ingin diinstall, pada kali ini saya akan memberikan contoh dengan nama my-project. Tunggu proses installasi berjalan hingga selesai. Jika sudah selesai, masuk ke direktori project React yang sudah kita buat tadi. Ketikkan perintah berikut.

cd my-project

Untuk menjalankan project React, ketikkan perintah berikut.

npm start

Maka browser akan otomatis membuka halaman http://localhost:3000/ dan Anda akan melihat tampilan awal dari project React yang sudah diinstall.

Selanjutnya install Tailwind CSS dengan mengetikkan perintah berikut pada terminal.

npm install -D tailwindcss postcss autoprefixer

Tunggu hingga selesai, kemudian ketik kembali perintah berikut.

npx tailwindcss init -p

Jika semua berjalan lancar, maka Tailwind CSS sudah berhasil diinstall. Selanjutnya buka project React kita pada code editor. Kemudian buka file tailwind.config.js edit menjadi seperti ini.

/** @type {import('tailwindcss').Config} */ 
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Kemudian untuk dapat menggunakan Tailwind CSS edit file index.css yang berada pada folder src menjadi seperti ini.

@tailwind base;
@tailwind components;
@tailwind utilities;

Proses installasi selesai dan Tailwind CSS sudah dapat digunakan. Untuk mengecek apakah sudah berhasil terpasang, silahkan coba edit file App.js menjadi seperti ini.

<p className="text-3xl font-bold underline text-red-500">
  Edit <code>src/App.js</code> and save to reload.
</p>

Simpan dan jalankan project, maka Anda akan melihat perbedaannya.