~//tutorials/react/react-styling/edit

~ Contribute

Suggest a correction or improvement. The author reviews it before it goes live.

Comment0 / 300

en/tutorials/react/16react-styling

# Styling in React

React supports multiple styling approaches — CSS modules, inline styles, and utility frameworks.

## CSS Modules

Import scoped class names:

```css
/* Button.module.css */
.primary {
  background: blue;
  color: white;
}
```

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

function Button() {
  return <button className={styles.primary}>Click</button>;
}
```

Class names are scoped to avoid collisions.

## Inline Styles

Use a style object for dynamic values:

```jsx
function Box({ color }) {
  return (
    <div style={{ background: color, padding: "1rem" }}>
      Dynamic style
    </div>
  );
}
```

Inline styles don't support pseudo-classes or media queries.

## Tailwind CSS

Use utility classes directly in JSX:

```jsx
function Card() {
  return (
    <div className="rounded-lg shadow-md p-4 bg-white">
      <h2 className="text-xl font-bold">Title</h2>
      <p className="text-gray-600">Content</p>
    </div>
  );
}
```

Fast to build, no custom CSS files needed.

## Conditional Classes

```jsx
<button className={isActive ? "btn active" : "btn"}>
  Toggle
</button>
```

Or with `classnames` library:

```jsx
import cx from "classnames";

<button className={cx("btn", { active: isActive, large: size === "lg" })}>
  Click
</button>
```

## Best Practices

1. Use CSS modules for scoped component styles
2. Use Tailwind for rapid prototyping
3. Keep inline styles for truly dynamic values only
4. Extract repeated patterns into reusable classes

## Common Mistakes

1. Mixing inline styles with CSS specificity causes conflicts
2. Using string concatenation for class names instead of `cx`
3. Not purging unused CSS leads to large bundles

No changes yet

cancel