Membuat Web dengan React JS dan Tailwind CSS untuk pertama kali

Tailwind CSS adalah utility-first CSS framework dimana sangat mudah dipake dan sangat efisien digunakan untuk aplikasi web dengan ReactJS. ini membuat Tailwind sangat populer karna kecepatan development & styling proses yang signifikan. jika baru mendengar Tailwind CSS bisa pembaca lihat pada halaman webnya di https://tailwindcss.com.

Membuat project react menggunakan Tailwind CSS itu sangat mudah hanya beberapa step saja yang perlu dilewati. Ditutorial ini pembaca akan mengetahui step-by-step cara menggunakan Tailwind CSS pada project React dan Tailwind CSS tinggal dipake untuk membuat tampilan web menjadi indah.

Step 1: Membuat Project ReactJS

$ npx create-react-app react-app-with-tailwind
$ cd react-app-with-tailwind

Step 2: Install Tailwind CSS

$ npm install -D tailwindcss postcss autoprefixer 

Step 3: Generate file konfigurasi

$ npx tailwindcss init -p

Step 4: Konfigurasi Path ke file template

module.exports = {
  content: [
     "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
     extend: {},
  },
  plugins: [],
}

Step 5: Tambahkan Tailwind langsung pada file .css

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

Step 6: Menggunakan Tailwind CSS pada aplikasi ReactJS

function App() {
  return (
    <div className="container mx-auto bg-gray-200 rounded-xl shadow border p-8 m-10">
      <p className="text-3xl text-gray-700 font-bold mb-5">
 Welcome!
      </p>
      <p className="text-gray-500 text-lg">
        React and Tailwind CSS in action
      </p>
    </div>
  );
}
export default App;

kemudian untuk memastikan semua dengan baik pakai command ini:

$ npm run start