Styling Approaches

CSS Modules, Tailwind CSS, styled-components, and design tokens.

Overview

Next.js supports multiple styling solutions with optimal performance.

Key Concepts

• CSS Modules — Scoped CSS with .module.css files
• Tailwind CSS — Utility-first CSS framework
• Global CSS — Import in layout.js or app/globals.css
• CSS-in-JS — styled-components, emotion
• Design Tokens — Theme variables for consistency

Code Examples

// CSS Modules
// components/Button.module.css
.button {
  background: #0070f3;
  color: white;
  padding: 8px 16px;
  border-radius: 4px;
}

.button:hover {
  background: #0051a8;
}

// components/Button.jsx
import styles from './Button.module.css';

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

// Tailwind CSS
export default function Card({ title, description }) {
  return (
    <div className="bg-white rounded-lg shadow-md p-6">
      <h2 className="text-xl font-bold mb-2">{title}</h2>
      <p className="text-gray-600">{description}</p>
    </div>
  );
}

// Global CSS in app/globals.css
@tailwind base;
@tailwind components;
@tailwind utilities;

body {
  margin: 0;
  font-family: system-ui, sans-serif;
}

Practice

Create a component library using CSS Modules and integrate Tailwind for utility styling.