Tutorial React Tailwind Component: Desain UI dengan Mudah
Irhan Hisyam Dwi Nugroho
•
10 September 2025
•
225
Desain UI responsif dan menarik kini lebih mudah dengan Tailwind CSS, yang memungkinkan kamu membuat antarmuka tanpa menulis banyak CSS kustom. Tailwind memberikan kemudahan dengan kelas utilitas siap pakai.
MinDi akan membimbing kamu dalam tutorial React Tailwind component ini, mulai dari instalasi hingga pembuatan komponen praktis di React. Semua langkah dijelaskan dengan jelas agar mudah diikuti.
Yuk, simak tutorial ini dan buat aplikasi React kamu jadi lebih responsif, stylish, dan cepat dalam pengembangan!
Apa itu Tailwind CSS?
Tailwind CSS adalah framework CSS yang menggunakan pendekatan utility-first, yang berarti kamu dapat membangun desain langsung dengan menambahkan kelas-kelas utilitas ke elemen HTML atau JSX.
Alih-alih menulis CSS kustom, kamu cukup menggunakan kelas seperti bg-blue-500 atau text-center untuk memberi gaya pada elemen secara langsung.
Framework ini memungkinkan pengembang untuk membuat desain yang responsif dan konsisten dengan cepat tanpa tergantung pada komponen UI yang sudah jadi.
Dengan Tailwind, kamu bisa menyesuaikan desain dengan mudah dan tetap menjaga kode CSS yang bersih dan efisien.
Baca juga: Panduan Memilih Bootcamp Front-End Development Terbaik 2025
Menyiapkan Proyek React dengan Tailwind CSS
Sumber: Canva
Sebelum kita mulai mengembangkan komponen menggunakan Tailwind CSS, kita perlu menyiapkan proyek React terlebih dahulu.
MinDi akan bimbing kamu melalui langkah-langkah penting untuk mengintegrasikan Tailwind ke dalam proyek React kamu agar siap digunakan.
Berikut adalah beberapa langkah yang perlu kamu persiapkan:
1. Buat Proyek React Baru
Jika kamu belum memiliki proyek React, kamu bisa memulai dengan Create React App. Jalankan perintah berikut di terminal:
npx create-react-app my-tailwind-app cd my-tailwind-app |
2. Install Tailwind CSS
Setelah proyek React siap, kita perlu menginstal Tailwind CSS dan beberapa dependensi tambahan seperti PostCSS dan Autoprefixer. Jalankan perintah berikut:
npm install -D tailwindcss postcss autoprefixer |
3. Buat File Konfigurasi Tailwind
Untuk mengonfigurasi Tailwind di proyek, jalankan perintah berikut untuk menghasilkan file konfigurasi:
npx tailwindcss init |
4. Setup File CSS
Buat file src/index.css dan tambahkan direktif Tailwind untuk mengimpor base, components, dan utilities:
@tailwind base; @tailwind components; @tailwind utilities; |
5. Aktifkan Tailwind di tailwind.config.js
Pastikan untuk mengonfigurasi tailwind.config.js agar file CSS kamu diproses dengan benar:
module.exports = { content: [ "./src/**/*.{js,jsx,ts,tsx}", ], theme: { extend: {}, }, plugins: [], }; |
Baca juga: 7 Rekomendasi Bootcamp Programmer Gratis & Bersertifikat
Membuat Komponen React Menggunakan Tailwind CSS
Sumber: Canva
Setelah proyek React kamu siap dan Tailwind CSS sudah terintegrasi, kita bisa mulai membuat komponen React dengan menggunakan kelas-kelas Tailwind.
Di sini, MinDi akan menunjukkan langkah-langkah bagaimana membuat komponen React yang responsif dan mudah disesuaikan menggunakan Tailwind CSS.
Berikut adalah langkah-langkah untuk membuat komponen React menggunakan Tailwind CSS:
1. Membuat Komponen Button Sederhana
Langkah pertama adalah membuat komponen Button yang menggunakan kelas-kelas Tailwind CSS. Komponen ini akan memiliki gaya seperti warna latar belakang, padding, dan efek hover.
Langkah-langkah:
- Buat file komponen Button.js di dalam folder src/components/.
- Di dalam komponen, tambahkan kode berikut:
// src/components/Button.js import React from 'react'; const Button = ({ label }) => { return ( <button className="bg-blue-500 text-white py-2 px-4 rounded-md hover:bg-blue-700"> {label} </button> ); }; export default Button; |
Baca juga: Cara Membuat Pop Up di HTML: Panduan Mudah untuk Pemula
Penjelasan:
- bg-blue-500: Memberikan warna latar belakang biru.
- text-white: Mengatur warna teks menjadi putih.
- py-2 px-4: Menambahkan padding vertikal dan horizontal pada tombol.
- rounded-md: Menambahkan sudut membulat pada tombol.
- hover:bg-blue-700: Mengubah warna latar belakang saat tombol di-hover.
2. Membuat Komponen Card
Sekarang, kita akan membuat komponen Card yang menggunakan Tailwind untuk desain responsif dan styling dasar.
Langkah-langkah:
- Buat file komponen Card.js di folder src/components/.
- Tambahkan kode berikut:
// src/components/Card.js import React from 'react'; const Card = ({ title, content }) => { return ( <div className="bg-white shadow-lg rounded-lg p-6 max-w-sm mx-auto"> <h2 className="text-xl font-semibold text-gray-800">{title}</h2> <p className="text-gray-600 mt-2">{content}</p> </div> ); }; export default Card; |
Penjelasan:
- bg-white: Memberikan latar belakang putih pada kartu.
- shadow-lg: Menambahkan efek bayangan pada kartu untuk memberikan kesan kedalaman.
- rounded-lg: Memberikan sudut membulat besar.
- p-6: Menambahkan padding di dalam kartu.
- max-w-sm: Membatasi lebar maksimal kartu agar tidak terlalu lebar.
- mx-auto: Mengatur margin otomatis untuk memusatkan kartu di halaman.
3. Membuat Komponen Input Form
Selanjutnya, kita akan membuat komponen Input untuk formulir yang menggunakan Tailwind CSS untuk membuatnya lebih rapi dan responsif.
Langkah-langkah:
- Buat file komponen Input.js di folder src/components/.
- Tambahkan kode berikut:
// src/components/Input.js import React from 'react'; const Input = ({ placeholder, type }) => { return ( <input type={type} placeholder={placeholder} className="border border-gray-300 p-3 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" /> ); }; export default Input; |
Penjelasan:
- border border-gray-300: Menambahkan border abu-abu terang di sekitar input.
- p-3: Menambahkan padding pada input agar lebih nyaman digunakan.
- rounded-md: Memberikan sudut membulat pada input.
- focus:outline-none: Menghilangkan outline default saat input difokuskan.
- focus:ring-2 focus:ring-blue-500: Menambahkan efek border biru saat input difokuskan.
4. Menggunakan Komponen dalam Aplikasi
Setelah membuat beberapa komponen, kita dapat menggunakannya di file App.js untuk melihat hasilnya.
Langkah-langkah:
- Buka src/App.js.
- Impor komponen yang telah kita buat dan tambahkan ke dalam aplikasi.
// src/App.js import React from 'react'; import Button from './components/Button'; import Card from './components/Card'; import Input from './components/Input'; const App = () => { return ( <div className="p-6"> <Card title="Welcome to React" content="This is a card component built with Tailwind CSS!" /> <Input placeholder="Enter your name" type="text" /> <Button label="Submit" /> </div> ); }; export default App; |
Penjelasan:
- <Card />: Menampilkan komponen Card dengan judul dan konten.
- <Input />: Menampilkan input form untuk menerima data.
- <Button />: Menampilkan tombol dengan label “Submit”.
Ingin Jadi Web Developer Profesional?
Setelah mengikuti Tutorial React Tailwind Component: Desain UI dengan Mudah, kini saatnya kamu mengasah keterampilanmu lebih dalam.
Yuk, ikuti Bootcamp Web Development di dibimbing.id! dan pelajari lebih banyak tentang React, Tailwind CSS, dan berbagai teknologi web lainnya!
Di Bootcamp ini, kamu akan belajar langsung dari mentor berpengalaman dengan kurikulum praktis yang membantumu menciptakan aplikasi web profesional dan responsif.
Dengan lebih dari 840+ hiring partner dan tingkat keberhasilan alumni 96%, peluang kariermu di dunia web development semakin terbuka lebar!
Jadi, tunggu apa lagi? Hubungi kami dan daftar sekarang disini untuk memulai perjalananmu menjadi Web Developer profesional. #BimbingSampeJadi!
Referensi
- Introduction to Tailwind CSS [Buka]
Tags
Irhan Hisyam Dwi Nugroho
Irhan Hisyam Dwi Nugroho is an SEO Specialist and Content Writer with 4 years of experience in optimizing websites and writing relevant content for various brands and industries. Currently, I also work as a Content Writer at Dibimbing.id and actively share content about technology, SEO, and digital marketing through various platforms.
