---

title: "ReactJS Basics" description: "Intro to React fundamentals" date: "2025-06-10"

✨ Why React?

• No context switching: Stay in your HTML/JSX while styling.
• Responsive utilities: Easy to manage breakpoints.
• Customizable: Tailwind is highly configurable via tailwind.config.js.
• Consistent UI: Encourages design consistency across the app.

---

🛠️ Installation

You can install Tailwind CSS via PostCSS or using frameworks like Next.js, Vite, or CRA.

Here’s a basic setup using npm:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

This will generate:

• tailwind.config.js
• postcss.config.js

---

⚙️ Configuration

Update your tailwind.config.js file to set the content paths:

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

---

🎨 Using Tailwind in Your CSS

In your main CSS file (e.g., index.css or globals.css), add:

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

---