Cara Integrasi Tailwind CSS dan React.js

Cara Integrasi Tailwind CSS dan React.js - Sore sobs-sobs sekalian dikesempatan yang indah semoga sobs-sobs dalam keadaan sehat walafiat dan diberi kesempatan untuk menikmati segelas kopi panas disertai gorengan.

Oke ini sebenernya basic saja sobs-sobs berhubung gua ingin menulis maka gua pilih materi basic yang menurut gua tak kalah penting yaitu integrasi tailwind css di project react.

sebelum itu lebih jauh kita kenalan dahulu dengan tailwind css, tailwind css merupakan sebuah utility dan bukan sebuah component framework UI seperti bootstrap, maksudnya gimana bang ? tailwind hanya menyediakan class-class untuk kita membuat sendiri sebuah komponen yang kita inginkan, contoh kalau dibootstrap component button primary sudah didefault berwarna biru, sedangkan di tailwind css kita bebas membuat komponen button primary kita dengan warna apa saja, font apa saja dan dekorasi apa saja dengan menggunakan utility yang telah disediakan oleh tailwind css. 👍 (Mantabs)

Langsung saja ya ke stepnya : 

1.    Setup React project

tentunya hal pertama yang kita lakukan adalah melakukan setup project react, untuk setup disini gua menggunakan vite sebuah tools untuk frontend. oh iya disini gua menggunakan node js versi 16.16.0, sobs -sobs bisa mengecek node.js versinya dengan mengetikan node -v di terminal atau command promt. sedangkan untuk npmnya versi 8.11.0 sobs-sobs bisa mengeceknya dengan mengetikan npm -v

langusng saja kita setup vite+react menggunakan npm

- untuk npm versi 6+

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

- untuk npm versi 7+

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

Sesuaikan ya sobs-sobs dengan npm versi sobs-sobs sekalian. contoh diatas react-tailwind adalah nama projectnya sobs-sobs, sobs-sobs bebas menggantinya dengan nama apapun.

jika sudah masuk kedalam folder project kita kemudian ketikan

npm install

jika sudah maka step pertama untuk setup project telah selesai. dan sobs-sobs bisa buka folder projectnya di kode editor sobs-sobs sekalian.

2.    install tailwind dan konfigurasi

Langkah selanjutnya adalah kita menginstall tailwind serta dependency yang dibutuhkan untuk project kita sobs-sobs. silahkan sobs-sobs install seperti dibawah ini  :

npm install -D tailwindcss postcss autoprefixer

Jika proses instalasi sudah selesai maka langkah selanjutnya adalah

npx tailwindcss init -p

kemudian akan muncul sebuah file baru dengan nama tailwind.config.js. 

kita edit file tailwind.config.js tersebut menjadi seperti dibawah ini sobs-sobs

/** @type {import('tailwindcss').Config} */
export default {
  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
};

kemudian buka file index.css di dalam folder src, kemudian hapus semua dan ganti seperti dibawah ini 

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

Oke tahap install dan konfigurasi selesai.

3.    Uji coba

sekarang kita uji coba dengan menggunakan utility class dari tailwind silahkan sobs-sobs buka file App.jsx didalam folder src, kemudian hapus semua isinya dan ganti sesuai dengan dibawah ini :

import React from "react";

const App = () => {
  return (
    <>
      <div className="flex justify-center min-h-screen items-center">
        <div className="w-full max-w-xs">
          <h1 className="text-blue-500 text-3xl font-bold mb-2 hover:text-orange-600">
            sruputkode.com
          </h1>
          <p className="text-sm">Sruput kopi sambil ngoding sobs..</p>
        </div>
      </div>
    </>
  );
};

export default App;!

Jika sudah silahkan kita jalankan dengan mode development dengan mengetik diterminal atau command promt sobs-sobs.

npm run dev

jika sudah maka buka url http://127.0.0.1:5173/  dan jika sobs-sobs sudah buka maka tampilannya seperti dibawah ini

dan materi pembahasan tentang Cara integrasi tailwind css dan react selesai sobs-sobs, jika ada pertanyaan silahkan tulis dikolom komentar sobs-sobs dan semoga materi sederhana ini dapat bermanfaat untuk sobs sekalian.

See you next time.