Tailwind CSS Setup करना

<div className="utility-one utility-two utility-three">
  Content
</div>

// tailwind.config.js
module.exports = {
  content: ["./src/**/*.{js,jsx}"],
};

// Run in your local React project (npm install required)
function Card() {
  return (
    <div className="p-4 bg-white rounded shadow">
      <h2 className="text-lg font-bold">Card Title</h2>
      <p className="text-gray-600">Card content here.</p>
    </div>
  );
}

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

// Run in your local React project (npm install required)
function Button({ children }) {
  return (
    <button className="px-4 py-2 bg-blue-500 hover:bg-blue-600 text-white rounded font-semibold">
      {children}
    </button>
  );
}

React Testing Library Setup करना · React Router Setup करना · CSS-in-JS के तरीके · CSS Modules का उपयोग

1. tailwind.config.js में content paths configure करना भूल जाना, इसलिए Tailwind आपकी component files scan नहीं करता और जिन classes का आप actually उपयोग कर रहे हैं उन्हें strip कर देता है।
2. Tailwind की existing utility classes compose करने के बजाय habit से custom CSS लिखना।
3. Build step न run करना, इसलिए raw Tailwind directives (@tailwind base;) कभी real CSS में compile नहीं होते।

• Tailwind CSS एक utility-first CSS framework है: आप छोटे, single-purpose classes सीधे अपने JSX में compose करते हैं।
• इसे production use के लिए एक build-step setup चाहिए (PostCSS, या Vite का built-in Tailwind plugin), सिर्फ एक CDN link नहीं।
• Config file का content array Tailwind को बताता है कौन सी files scan करनी हैं उन class names के लिए जिन्हें उसे रखना चाहिए।
• Common utilities में spacing (p-4), color (bg-blue-500), और layout (flex, grid) classes शामिल हैं।

npm install tailwindcss (या Vite plugin) चाहिए — इस sandbox में CDN build tooling के ज़रिए available नहीं।