Styling in Next.js (CSS Modules, Tailwind & Styled Components)

Q: What are CSS Modules, and how do you use them in a Next.js project?

CSS Modules let you write regular CSS in a file named with a .module.css extension, and Next.js automatically scopes those class names so they only apply to the component that imports them, preventing styles from accidentally leaking into or being overridden by other components on the page.

Q: How do you set up and use Tailwind CSS in a Next.js project?

You can choose to include Tailwind CSS when creating your project with create-next-app, or install and configure it manually afterward, and once set up, you apply pre-built utility classes directly in your JSX to style elements without writing separate CSS files at all.

Q: How do styled components or other CSS in JS libraries work in the Next.js App Router, given the presence of server components?

Many CSS in JS libraries require a use client directive since they rely on runtime JavaScript to inject styles, and some libraries provide specific integration instructions for the App Router to ensure their generated styles are correctly included in the server rendered HTML rather than causing a flash of unstyled content.

Q: How would you organize global styles versus component specific styles in a large Next.js application?

You typically place truly global styles, like base typography and CSS variable definitions, in a single global stylesheet imported once in your root layout, while keeping component specific styling scoped locally using CSS Modules or Tailwind utility classes directly on each individual component.

Q: What factors should guide the choice between CSS Modules, Tailwind CSS, and a CSS in JS library for a new large scale Next.js project?

Consider your team's familiarity with each approach, whether you prefer writing traditional CSS or utility classes, how much you value zero runtime overhead which favors CSS Modules and Tailwind over most CSS in JS solutions, and whether you need dynamic runtime styling based on props, which CSS in JS handles more naturally.

5 questions found

What are CSS Modules, and how do you use them in a Next.js project?

Beginner

CSS Modules let you write regular CSS in a file named with a .module.css extension, and Next.js automatically scopes those class names so they only apply to the component that imports them, preventing styles from accidentally leaking into or being overridden by other components on the page.

/* Button.module.css */
.button {
  background-color: blue;
  color: white;
}

// Button.js
import styles from './Button.module.css';

export default function Button() {
  return <button className={styles.button}>Click me</button>;
}

Real-world example A component library uses CSS Modules for each of its button and card components, ensuring their styles never accidentally clash with styles defined elsewhere in a larger application.

Common follow-ups: How does class name scoping actually work behind the scenes with CSS Modules?;Can you share common styles between multiple CSS Modules?

Bundle Analysis & Code Splitting;Web Vitals & Performance Monitoring

How do you set up and use Tailwind CSS in a Next.js project?

Beginner

You can choose to include Tailwind CSS when creating your project with create-next-app, or install and configure it manually afterward, and once set up, you apply pre-built utility classes directly in your JSX to style elements without writing separate CSS files at all.

// tailwind.config.js is generated automatically

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

Real-world example A team builds an entire marketing website's styling using only Tailwind's utility classes directly in their JSX, avoiding the need to maintain separate CSS files for most of their components.

Common follow-ups: What are the main advantages of utility first CSS compared to writing custom CSS?;How do you customize Tailwind's default colors and spacing scale?

Third-Party Script Optimization;Bundle Analysis & Code Splitting

How do styled components or other CSS in JS libraries work in the Next.js App Router, given the presence of server components?

Intermediate

Many CSS in JS libraries require a use client directive since they rely on runtime JavaScript to inject styles, and some libraries provide specific integration instructions for the App Router to ensure their generated styles are correctly included in the server rendered HTML rather than causing a flash of unstyled content.

'use client';
import styled from 'styled-components';

const StyledButton = styled.button`
  background-color: blue;
  color: white;
  padding: 8px 16px;
`;

export default function Button() {
  return <StyledButton>Click me</StyledButton>;
}

Real-world example A team using styled components in their App Router project follows the library's specific setup guide to avoid a brief flash of unstyled content when pages first load.

Common follow-ups: Why does using a CSS in JS library often require marking components as client components?;What performance tradeoffs come with using CSS in JS compared to CSS Modules?

Client Components & Hydration;Web Vitals & Performance Monitoring

How would you organize global styles versus component specific styles in a large Next.js application?

Intermediate

You typically place truly global styles, like base typography and CSS variable definitions, in a single global stylesheet imported once in your root layout, while keeping component specific styling scoped locally using CSS Modules or Tailwind utility classes directly on each individual component.

// app/layout.js
import './globals.css';

export default function RootLayout({ children }) {
  return <html><body>{children}</body></html>;
}

Real-world example A large e-commerce application keeps its base typography and color variables in a single global stylesheet, while every individual component, like product cards and buttons, manages its own specific styling locally.

Common follow-ups: Where is the best place to import global CSS in the App Router?;How do you prevent global styles from unintentionally affecting specific components?

Layouts & Templates;Styling in Next.js (CSS Modules Tailwind & Styled Components)

What factors should guide the choice between CSS Modules, Tailwind CSS, and a CSS in JS library for a new large scale Next.js project?

Advanced

Consider your team's familiarity with each approach, whether you prefer writing traditional CSS or utility classes, how much you value zero runtime overhead which favors CSS Modules and Tailwind over most CSS in JS solutions, and whether you need dynamic runtime styling based on props, which CSS in JS handles more naturally.

// Tailwind: fast utility based styling, no runtime cost
// CSS Modules: familiar CSS syntax, scoped automatically
// CSS in JS: powerful dynamic styling, but adds runtime overhead

Real-world example A large team building a new design system chooses Tailwind CSS for its zero runtime performance cost and consistency, after evaluating it against CSS Modules and a popular CSS in JS library.

Common follow-ups: How does each approach affect the final bundle size of an application?;Can these different styling approaches be mixed within the same project?

Bundle Analysis & Code Splitting;Web Vitals & Performance Monitoring