You are viewing a free preview of this lesson.
Subscribe to unlock all 10 lessons in this course and every other course on LearningBro.
Next.js supports multiple styling approaches out of the box. This lesson covers CSS Modules, Tailwind CSS, shadcn/ui, responsive design, dark mode, CSS variables, and choosing a component library.
CSS Modules scope styles to a single component, preventing naming conflicts:
/* Button.module.css */
.button {
padding: 0.5rem 1rem;
border-radius: 0.375rem;
font-weight: 600;
cursor: pointer;
}
.primary {
background-color: #3b82f6;
color: white;
}
.secondary {
background-color: #6b7280;
color: white;
}
import styles from "./Button.module.css";
interface ButtonProps {
variant?: "primary" | "secondary";
children: React.ReactNode;
}
function Button({ variant = "primary", children }: ButtonProps) {
return (
<button className={`${styles.button} ${styles[variant]}`}>
{children}
</button>
);
}
| Advantage | Consideration |
|---|---|
| No class name collisions | One more file per component |
| Explicit dependencies | No dynamic class generation |
| Works with any CSS preprocessor | Slightly more verbose |
Tailwind is a utility-first CSS framework that ships with Next.js as a first-class option:
Subscribe to continue reading
Get full access to this lesson and all 10 lessons in this course.