DEV Community

Cover image for Cara Install Tailwind CSS pada React project
Muhammad Mahib Arib
Muhammad Mahib Arib

Posted on

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


Enter fullscreen mode Exit fullscreen mode

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



npm -v


Enter fullscreen mode Exit fullscreen mode

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


Enter fullscreen mode Exit fullscreen mode

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


Enter fullscreen mode Exit fullscreen mode

Untuk menjalankan project React, ketikkan perintah berikut.



npm start


Enter fullscreen mode Exit fullscreen mode

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

Image description

Selanjutnya install Tailwind CSS dengan mengetikkan perintah berikut pada terminal.



npm install -D tailwindcss postcss autoprefixer


Enter fullscreen mode Exit fullscreen mode

Tunggu hingga selesai, kemudian ketik kembali perintah berikut.



npx tailwindcss init -p


Enter fullscreen mode Exit fullscreen mode

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: [],
}


Enter fullscreen mode Exit fullscreen mode

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



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


Enter fullscreen mode Exit fullscreen mode

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>


Enter fullscreen mode Exit fullscreen mode

Simpan dan jalankan project, maka Anda akan melihat perbedaannya.

Image description

Top comments (0)