Styling in Next.js

Different ways to style your Next.js applications

🎨 What is Styling in Next.js?

Next.js supports multiple styling methods including CSS Modules, global CSS, Tailwind CSS, and CSS-in-JS. Choose the approach that best fits your project needs and preferences. 


// Simple inline styling example
<div style={{ color: 'blue', padding: '20px' }}>
  Styled content
</div>

Styling Methods

📦

CSS Modules

Scoped CSS for components

Component-scoped No conflicts
🌍

Global CSS

Site-wide styles

globals.css App-wide
💨

Tailwind CSS

Utility-first framework

Fast styling Responsive
💅

CSS-in-JS

Styled components

Dynamic styles Props-based

🔹 CSS Modules

CSS Modules automatically scope CSS to components, preventing style conflicts. Create a file with .module.css extension and import it into your component.

🔸 Create CSS Module 

/* styles/Button.module.css */
.button {
  background-color: blue;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.button:hover {
  background-color: darkblue;
}

🔸 Use in Component 

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

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

Output:

🔹 Global CSS

Global styles apply to your entire application. Import global CSS files only in your root layout to ensure styles are available everywhere.

🔸 Create Global Styles 

/* app/globals.css */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: Arial, sans-serif;
  line-height: 1.6;
  color: #333;
}

h1 {
  color: #2c3e50;
  margin-bottom: 1rem;
}

🔸 Import in Layout 

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

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}

🔹 Tailwind CSS

Tailwind CSS is a utility-first framework that lets you style elements using predefined classes. It's fast, responsive, and highly customizable for modern web development.

🔸 Installation 

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

🔸 Configure Tailwind 

// tailwind.config.js
module.exports = {
  content: [
    './app/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

🔸 Use Tailwind Classes 

export default function Card() {
  return (
    <div className="bg-white rounded-lg shadow-md p-6">
      <h2 className="text-2xl font-bold text-gray-800 mb-4">
        Card Title
      </h2>
      <p className="text-gray-600">
        This is a card styled with Tailwind CSS.
      </p>
      <button className="mt-4 bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded">
        Learn More
      </button>
    </div>
  )
}

Output:

Card Title

This is a card styled with Tailwind CSS.

🔹 Inline Styles

Inline styles use JavaScript objects to apply CSS directly to elements. Useful for dynamic styling based on props or state. 

export default function Alert({ type }) {
  const styles = {
    padding: '15px',
    borderRadius: '5px',
    marginBottom: '10px',
    backgroundColor: type === 'error' ? '#fee' : '#efe',
    color: type === 'error' ? '#c00' : '#060',
    border: `1px solid ${type === 'error' ? '#fcc' : '#cfc'}`
  }

  return (
    <div style={styles}>
      {type === 'error' ? 'Error!' : 'Success!'}
    </div>
  )
}

🔹 Sass/SCSS Support

Next.js has built-in support for Sass. Install the sass package and use .scss or .sass files just like regular CSS.

🔸 Installation 

npm install sass

🔸 Create SCSS File 

/* styles/Card.module.scss */
$primary-color: #3b82f6;
$border-radius: 8px;

.card {
  background: white;
  border-radius: $border-radius;
  padding: 20px;
  
  .title {
    color: $primary-color;
    font-size: 24px;
    margin-bottom: 10px;
  }
  
  &:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  }
}

🔸 Use in Component 

import styles from './Card.module.scss'

export default function Card() {
  return (
    <div className={styles.card}>
      <h2 className={styles.title}>SCSS Card</h2>
      <p>Styled with Sass</p>
    </div>
  )
}

🔹 Best Practices

Follow these styling guidelines for maintainable Next.js applications:

  • CSS Modules: Best for component-specific styles
  • Global CSS: Use for resets, fonts, and base styles
  • Tailwind: Great for rapid development and consistency
  • Avoid inline styles: Unless styles are truly dynamic
  • Organize files: Keep styles close to components
  • Use variables: For colors, spacing, and breakpoints

🧠 Test Your Knowledge

What file extension is used for CSS Modules?