Blog

Web Development

Tutorial Tailwind React JS: Setup, Styling, dan Contoh

Irhan Hisyam Dwi Nugroho

•

27 February 2025

•

606

Tutorial Tailwind React JS adalah solusi buat kamu yang mau styling cepat dan efisien tanpa ribet. Dengan pendekatan utility-first, Tailwind bikin proses styling di React JS jadi lebih simpel, tanpa perlu bikin file CSS panjang atau ngapalin class yang sulit.

Di tutorial ini, MinDi bakal ngajarin cara setup Tailwind di React JS dari nol, lengkap dengan contoh penggunaannya. Gak perlu bingung soal konfigurasi, karena kita bakal bahas langkah demi langkah biar kamu langsung bisa pakai Tailwind buat bikin UI yang kece dan responsif.

Jadi, siap buat upgrade skill frontend-mu? Yuk, langsung simak cara install, styling, dan contoh penerapan Tailwind di React JS yang bakal bikin codinganmu lebih rapi dan efisien!

Apa Itu Tailwind CSS dan Mengapa Cocok untuk React JS?

Tailwind CSS adalah framework CSS berbasis utility-first yang memungkinkan pengembang untuk membuat desain dengan cepat menggunakan class bawaan tanpa perlu menulis CSS manual.

Tidak seperti framework lain yang menyediakan komponen siap pakai, Tailwind memberi kebebasan penuh dalam styling tanpa harus menimpa aturan bawaan.

Hal ini menjadikannya sangat cocok untuk React JS, karena memungkinkan styling langsung di dalam JSX tanpa harus berpindah-pindah antara file CSS dan komponen.

Dengan pendekatan ini, pengembangan UI di React menjadi lebih efisien, lebih mudah dipelihara, dan lebih fleksibel untuk disesuaikan dengan kebutuhan proyek.

Cara Install Tailwind di React JS

Sumber: Canva

Sebelum bisa menggunakan Tailwind React JS, kita perlu menginstalnya dan melakukan beberapa konfigurasi dasar.

Prosesnya cukup sederhana, dan setelah setup selesai, kita bisa langsung menerapkan styling menggunakan class utility di dalam JSX. Berikut langkah-langkah lengkapnya:

1. Buat Proyek React JS

Jika belum memiliki proyek React, buat proyek baru menggunakan Create React App atau Vite. Berikut perintah untuk membuat proyek dengan Create React App:

npx create-react-app my-tailwind-app

cd my-tailwind-app

Atau, jika ingin menggunakan Vite yang lebih ringan dan cepat:

npm create vite@latest my-tailwind-app --template react

cd my-tailwind-app

npm install

Setelah itu, jalankan proyek dengan:

npm start # Untuk Create React App

npm run dev # Untuk Vite

Proyek React sekarang sudah siap digunakan.

2. Instal Tailwind CSS

Instal Tailwind CSS dan dependensinya dengan perintah berikut:

npm install -D tailwindcss postcss autoprefixer

Opsi -D berarti Tailwind diinstal sebagai dev dependency karena hanya dibutuhkan saat pengembangan.

3. Konfigurasi Tailwind

Setelah instalasi selesai, jalankan perintah berikut untuk membuat file konfigurasi Tailwind:

npx tailwindcss init -p

Perintah ini akan menghasilkan dua file:

tailwind.config.js → Untuk mengatur konfigurasi Tailwind.
postcss.config.js → Untuk memastikan Tailwind bekerja dengan PostCSS.

4. Tambahkan Path File di Konfigurasi Tailwind

Buka file tailwind.config.js dan ubah bagian content agar Tailwind hanya diterapkan ke file yang diperlukan:

module.exports = {

content: ["./src/**/*.{js,jsx,ts,tsx}"],

theme: {

extend: {},

plugins: [],

};

Pengaturan ini memberi tahu Tailwind agar hanya memproses file dalam folder src yang memiliki ekstensi .js, .jsx, .ts, atau .tsx.

5. Import Tailwind ke dalam Proyek

Agar Tailwind dapat digunakan, kita perlu mengimpor style-nya ke dalam file index.css atau App.css. Buka file src/index.css dan tambahkan baris berikut di awal file:

@tailwind base;

@tailwind components;

@tailwind utilities;

Ketiga direktif ini memungkinkan kita untuk menggunakan seluruh fitur Tailwind, termasuk class bawaan, komponen kustom, dan utility kelas.

6. Coba Gunakan Tailwind di JSX

Sekarang Tailwind sudah siap digunakan! Coba edit App.js atau App.jsx dan tambahkan class Tailwind dalam JSX:

export default function App() {

return (

<h1 className="text-3xl font-bold text-blue-600">Hello, Tailwind React!</h1>

</div>

);

}

Jika semua konfigurasi benar, halaman akan menampilkan teks “Hello, Tailwind React!” dengan gaya yang sudah diterapkan menggunakan Tailwind.

7. Jalankan Proyek dan Pastikan Berhasil

Terakhir, jalankan proyek React untuk melihat hasilnya di browser:

npm start # Untuk Create React App

npm run dev # Untuk Vite

Jika semua langkah sudah dilakukan dengan benar, maka Tailwind CSS seharusnya sudah berfungsi dengan baik di dalam proyek React JS.

Contoh Penggunaan Tailwind di React JS

Sumber: Canva

Setelah berhasil menginstal Tailwind CSS di React JS, sekarang kita akan melihat cara menggunakannya untuk membangun UI yang responsif dan modern.

Dengan pendekatan utility-first, Tailwind memungkinkan kita untuk menulis styling langsung di JSX tanpa harus membuat file CSS terpisah. Berikut tiga contoh penggunaannya:

1. Membuat Tombol dengan Tailwind

Dengan Tailwind, kita bisa membuat tombol dengan berbagai variasi styling langsung di JSX tanpa perlu membuat class CSS manual.

Kode:

export default function Button() {

return (

Klik Saya

</button>

);

}

Penjelasan:

px-4 py-2 → Memberikan padding horizontal (px) dan vertical (py).
bg-blue-500 → Warna latar belakang biru dengan intensitas 500.
text-white → Mengatur warna teks menjadi putih.
font-semibold → Membuat teks lebih tebal.
rounded-lg → Membuat sudut tombol membulat.
hover:bg-blue-600 → Mengubah warna saat tombol di-hover.
transition → Memberikan efek transisi yang lebih halus saat tombol di-hover.

2. Membuat Kartu (Card) Responsif

Komponen card sering digunakan untuk menampilkan informasi dengan desain yang rapi dan responsif.

Kode:

export default function Card() {

return (

<h2 className="text-xl font-bold text-gray-800">Judul Kartu</h2>

<p className="text-gray-600 mt-2">Ini adalah contoh kartu menggunakan Tailwind di React.</p>

Selengkapnya

</button>

</div>

);

}

Penjelasan:

max-w-sm → Menentukan lebar maksimum kartu agar tidak terlalu besar.
bg-white shadow-md rounded-lg overflow-hidden → Memberikan warna latar belakang putih, bayangan halus, sudut membulat, dan memastikan gambar tidak terpotong.
w-full h-48 object-cover → Menjadikan gambar full-width dengan tinggi tetap (h-48) dan memastikan gambar tidak terdistorsi (object-cover).
text-gray-800 font-bold → Mengatur warna teks menjadi abu-abu gelap dan membuatnya lebih tebal.
mt-4 px-4 py-2 bg-green-500 → Styling tombol dalam kartu dengan warna hijau.

Kuasai Tailwind React JS dan Jadi Web Developer Andal!

Setelah memahami Tailwind CSS di React JS, kini saatnya kamu meningkatkan skill pengembangan web ke level selanjutnya!

Yuk, gabung di Bootcamp Web Development di dibimbing.id, tempat terbaik untuk belajar langsung dari mentor berpengalaman dengan kurikulum aplikatif. Di sini, kamu akan mempelajari React JS, Tailwind CSS, dan teknologi web modern lainnya untuk membangun website profesional yang cepat dan responsif.

Dengan lebih dari 840+ hiring partner dan tingkat keberhasilan alumni 96%, peluangmu untuk berkarier di dunia IT semakin terbuka lebar!

Jadi, tunggu apa lagi? Daftar sekarang di sini dan mulai perjalananmu menjadi Web Developer profesional! #BimbingSampeJadi

Referensi

Install Tailwind CSS with Create React App [Buka]