Styling in React

1. Regular CSS (External Stylesheets)

• Create a .css file and write your styles there.

• Import the CSS file into your component.

• Styles are global, so class name clashes can happen.

📁 App.css

.title {
  color: blue;
  font-size: 24px;
}

📄 App.js

import './App.css';

function App() {
  return <h1 className="title">Hello, React!</h1>;
}

2. Inline CSS (JS Style Objects)

• Define styles as JavaScript objects.

• Use the style={{ ... }} attribute.

• Properties use camelCase (e.g., backgroundColor).

📄 App.js

function App() {
  const headingStyle = {
    color: 'green',
    fontSize: '30px'
  };

  return <h1 style={headingStyle}>Welcome to React</h1>;
}

3. CSS Modules (Scoped CSS)

• Prevents class name clashes by scoping styles to the component.

• Use .module.css files.

📁 App.module.css

.header {
  color: purple;
  font-weight: bold;
}

📄 App.js

import styles from './App.module.css';

function App() {
  return <h1 className={styles.header}>React with CSS Modules</h1>;
}

4. Tailwind CSS (Utility-First Framework)

• Uses predefined utility classes like text-center, bg-blue-500, p-4, etc.

• Super fast and clean for building responsive UIs.

📄 App.js

function App() {
  return (
    <h1 className="text-3xl font-bold text-blue-600">
      Hello from Tailwind CSS!
    </h1>
  );
}

Tailwind gives you design freedom without writing CSS manually.