React CSS Styling – Choose Your Weapon

Imagine you're building a React component. Looks great. But now…

"How do I add styles?"
"Where do I write the CSS?"
"Do I use classes? Inline? Tailwind? CSS-in-JS??"
"Why so many options?!"

Welcome to React — where you have 5 ways to style the same button, and every dev swears their way is best 😅

This article? Helps you choose your weapon, like a true frontend warrior 🗡️⚔️

🧱 1. Traditional CSS File – Old But Gold

Write CSS in a .css file and import it.

/* App.css */
.button {
  background: black;
  color: white;
  padding: 10px;
}

import "./App.css";

const App = () => {
  return <button className="button">Click Me</button>;
};

• ✅ Familiar
• ✅ Works globally
• ❌ Global scope (class name clashes)

🧩 2. CSS Modules – Scoped by Default

This fixes the global CSS mess. Each component gets its own private styles.

/* Button.module.css */
.btn {
  background: red;
  color: white;
}

import styles from "./Button.module.css";

const Button = () => {
  return <button className={styles.btn}>Click</button>;
};

• ✅ Class names are locally scoped
• ✅ No conflicts
• ✅ Easy to reason about
• ❌ Slightly more setup

🧬 3. Inline Styling – Fast, No File Needed

Define styles directly in JSX as an object.

const style = {
  backgroundColor: "blue",
  color: "white",
  padding: "10px",
};

const App = () => {
  return <button style={style}>Click Me</button>;
};

• ✅ Quick for dynamic styles
• ✅ No import needed
• ❌ No pseudo-selectors (:hover)
• ❌ Not reusable

🧠 4. Styled-Components (CSS-in-JS) – Logic + Style Together

Write CSS inside JS, with power of JavaScript variables, props, and themes.

npm install styled-components

import styled from "styled-components";

const Button = styled.button`
  background: green;
  color: white;
  padding: 10px;
`;

const App = () => {
  return <Button>Click Me</Button>;
};

• ✅ Fully componentized styles
• ✅ Dynamic styling via props
• ✅ No className issues
• ❌ Slight runtime cost

🌪️ 5. Tailwind CSS – Utility-First Power

No writing CSS files. Just use utility classes right inside your JSX.

npm install -D tailwindcss
npx tailwindcss init

const App = () => {
  return (
    <button className="bg-purple-600 text-white px-4 py-2 rounded hover:bg-purple-700">
      Click Me
    </button>
  );
};

• ✅ Super fast styling
• ✅ No naming needed
• ✅ Built-in responsive & hover
• ❌ Not readable for everyone at first
• ✅ BUT… Devs who try it, love it.

🛠️ Choosing Your Styling Strategy

⚡ Bonus: Dynamic Styling

const App = () => {
  const [active, setActive] = useState(false);

  return (
    <button
      onClick={() => setActive(!active)}
      className={`px-4 py-2 ${active ? "bg-green-500" : "bg-gray-500"}`}
    >
      {active ? "Active" : "Inactive"}
    </button>
  );
};

• ✅ Clean.
• ✅ Dynamic.
• ✅ Reusable UI.

✅ Summary – Styling in React

🧠 FAQs – Styling in React

1. What is the best way to style in React?
Depends. For fast dev: Tailwind. For scoped components: CSS Modules. For logic + style together: styled-components.

2. Can I mix multiple styling methods?
Yes! Many projects use global CSS + Tailwind or Tailwind + CSS Modules.

3. Does Tailwind slow down performance?
No. It purges unused styles in production builds — super optimized.

4. Are CSS modules better than styled-components?
If you want performance and scoped styles → CSS Modules. If you want dynamic logic in styles → styled-components.

5. Should I avoid inline styles?
They're fine for quick stuff or dynamic styles, but not great for complex layouts or reusability.