Cara Install dan Menggunakan Tailwind CSS pada Project React JS

cara install dan menggunakan tailwind css pada project react js

Sebelum kita memulai panduan instalasi, penting untuk memahami alasan mengapa Tailwind CSS dapat sangat berguna dalam pengembangan proyek React. Tailwind CSS merupakan suatu kerangka kerja CSS yang memungkinkan untuk merancang dan mengelola tampilan antarmuka proyek React dengan mudah. Dengan Tailwind CSS, terdapat beberapa keuntungan yang akan didapatkan:

  • Efisiensi: Tailwind CSS menyediakan sejumlah besar kelas CSS bawaan yang dapat digunakan untuk mengatur tampilan elemen-elemen. Kamu tidak perlu menulis CSS kustom dari awal, sehingga dapat mengembangkan aplikasi dengan lebih cepat.
  • Konsistensi: Tailwind CSS mempromosikan konsistensi dalam tampilan proyek karena kamu akan menggunakan kelas-kelas yang telah ditentukan. Ini membuat tampilan lebih mudah dipelihara.
  • Skalabilitas: Tailwind CSS cocok untuk proyek kecil dan besar. Kamu dapat dengan mudah menyesuaikan dan mengembangkan proyek sesuai dengan kebutuhan.
  • Kustomisasi: Meskipun menggunakan kelas-kelas bawaan, kamu tetap dapat menyesuaikan dan memperluas Tailwind CSS sesuai dengan preferensi desain yang kamu miliki.

1. Pastikan kamu sudah membuat proyek React. Jika belum, kamu dapat membuatnya dengan perintah:

npx create-react-app nama-proyek-kamu

2. Install Tailwind CSS, PostCSS, dan Autoprefixer dengan menjalankan perintah berikut di terminal:

npm install -D tailwindcss postcss autoprefixer

3. Inisialisasikan konfigurasi Tailwind CSS dengan menjalankan perintah ini:

npx tailwindcss init -p

4. Buka file tailwind.config.js dalam proyek kamu dan ubah isinya menjadi seperti berikut:

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

5. Edit file index.css yang berada dalam folder src menjadi seperti ini:

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

6. Proses instalasi telah selesai, dan kamu sekarang dapat menggunakan Tailwind CSS. Untuk memastikan bahwa Tailwind CSS telah terpasang dengan benar, kamu dapat mencoba mengedit file App.js dalam proyek kamu seperti ini:

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

Note:
Jika kamu menemui masalah di mana tampilan proyek React kamu belum berubah sesuai dengan kode Tailwind CSS yang telah ditambahkan, kamu mungkin perlu menjalankan kembali proyek dengan perintah ini untuk memperbarui tampilan.

npm start

Dengan mengikuti langkah-langkah di atas, kamu sekarang telah berhasil menginstal dan menggunakan Tailwind CSS dalam proyek React. Kamu dapat dengan mudah menggabungkan kelas-kelas Tailwind CSS untuk mengatur tampilan elemen-elemen sesuai kebutuhan proyek kamu.