Integrasi Tailwind CSS dengan React JS dan Vitejs

Di bagian ini kita akan belajar cara meintegrasikan Reactjs dengan
Tailwindcss

Tailwind CSS adalah sebuah framework utility-first untuk styling css yang memungkinkan membangun antarmuka pengguna (UI) secara cepat dan efisien dengan menggunakan kelas-kelas kecil yang bisa langsung digunakan dalam markup HTML

Untuk proses installasi anda bisa melihat artikel sebelumnya
Instalasi React & Vite

Instalasi Tailwind css

• jalankan perintah berikut untuk menginstall keperluan

### yarn
yarn add -D tailwindcss postcss autoprefixer
### npm
npm install -D tailwindcss postcss autoprefixer

• Buat file tailwind.config.js dan postcss.config.js deangan menjalankan perintah berikut

### yarn
yarn tailwindcss init -p

### npx
npx tailwindcss init -p

• Buka file tailwind.config.js yang sudah di buat, dan rubah scriptnya menjadi seperti berikut, untuk mekonfigurasi file mana saya yang bisa menggunakan tailwindcss

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

• Tambahkan tailwind css kedalam index.css, sebelumnya hapus semua css yang default yang ada di index.css dan app.css

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

Testing Aplikasi

• jalankan aplikasi dengan perintah

### Yarn
yarn dev

### NPM 
npm run dev

• update file app.tsx menjadi seperti berikut

function App() {

  return (
      <div className="max-w-sm rounded overflow-hidden shadow-lg bg-white">
        <img
          className="w-full h-48 object-cover"
          src="https://via.placeholder.com/400x200"
          alt="Card Image"
        />
        <div className="p-6">
          <h2 className="text-2xl font-bold text-gray-800 mb-2">
            Card Title
          </h2>
          <p className="text-gray-600 mb-4">
            This is a description of the card. It gives a brief overview of the content or purpose of the card.
          </p>
          <button className="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">
            Learn More
          </button>
        </div>
      </div>
  )
}

export default App

• preview applikasi sesudah menggunakan tailwindcss

Kesimpulan:
Dengan langkah-langkah di atas, kamu dapat mengintegrasikan Tailwind CSS ke dalam aplikasi React yang dibuat menggunakan Vite, dan mulai membangun antarmuka pengguna yang modern dan responsif dengan cepat.

Terimakasih

Artikel ini adalah bagian dari seri Belajar React: