CSS Styling

CSS is an essential part of web development, and with Next.js, you have multiple ways to style your applications efficiently. Whether you prefer traditional CSS files, CSS Modules, Tailwind CSS, or styled-components, Next.js provides flexibility and performance optimizations out of the box. In this tutorial, we will explore different ways to style a Next.js application and understand the best practices for maintainable and scalable styles.

1. Global CSS in Next.js

Next.js supports global CSS styles, but they must be imported inside the _app.js or _app.tsx file. This ensures that styles are applied across the entire application.

Adding Global CSS

Create a styles/globals.css file and add your styles:

/* styles/globals.css */
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  background-color: #f5f5f5;
}

Now, import this file in _app.js:

// pages/_app.js
import '../styles/globals.css';

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

export default MyApp;

When to Use Global CSS?

• When you need consistent styling across all pages.
• When working with third-party CSS libraries.
• For base styles like typography, resets, or themes.

2. CSS Modules in Next.js

CSS Modules allow for scoped styling by automatically generating unique class names. This prevents styles from conflicting with each other.

Creating a CSS Module

Create a CSS file with a .module.css extension inside the styles folder:

/* styles/Home.module.css */
.container {
  background-color: white;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}

Using CSS Modules in a Component

// pages/index.js
import styles from '../styles/Home.module.css';

export default function Home() {
  return (
    <div className={styles.container}>
      <h1>Welcome to Next.js</h1>
    </div>
  );
}

Why Use CSS Modules?

• Avoids global namespace pollution.
• Helps in maintaining modular and reusable styles.
• Provides automatic class name scoping.

3. Styled Components in Next.js

Styled Components is a popular CSS-in-JS library that allows you to write CSS inside your JavaScript files. It supports dynamic styling and component-based design.

Installing Styled Components

Run the following command:

npm install styled-components

Using Styled Components

// components/Button.js
import styled from 'styled-components';

const Button = styled.button`
  background: #0070f3;
  border: none;
  color: white;
  padding: 10px 20px;
  font-size: 16px;
  border-radius: 5px;
  cursor: pointer;
  &:hover {
    background: #0051a8;
  }
`;

export default Button;

Now use this button in a page:

// pages/index.js
import Button from '../components/Button';

export default function Home() {
  return (
    <div>
      <h1>Welcome to Next.js</h1>
      <Button>Click Me</Button>
    </div>
  );
}

Advantages of Styled Components

• Scoped styles at the component level.
• Dynamic styling with props.
• No need for separate CSS files.

4. Tailwind CSS in Next.js

Tailwind CSS is a utility-first framework that speeds up styling by using predefined classes.

Installing Tailwind CSS

Run the following command:

npm install tailwindcss postcss autoprefixer
npx tailwindcss init -p

Configure tailwind.config.js:

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

Import Tailwind into globals.css:

/* styles/globals.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

Using Tailwind CSS in a Component

export default function Home() {
  return (
    <div className="p-5 bg-gray-100 min-h-screen flex justify-center items-center">
      <h1 className="text-3xl font-bold text-blue-600">Welcome to Next.js with Tailwind CSS</h1>
    </div>
  );
}

Why Use Tailwind CSS?

• Highly customizable.
• No need to write custom CSS.
• Optimized for performance with PurgeCSS.

5. Best Practices for Styling in Next.js

• Use Global CSS for resets and typography but avoid excessive global styles.
• Use CSS Modules when working with traditional CSS for modularity.
• Use Styled Components when working with component-based dynamic styles.
• Use Tailwind CSS for rapid development and utility-first styling.
• Minimize Unused CSS by using PurgeCSS with Tailwind or keeping CSS files lean.
• Optimize Performance by keeping styles modular and avoiding large CSS files.

Conclusion

Next.js provides multiple approaches to styling, allowing developers to choose the best method based on project requirements. Whether you prefer traditional CSS, CSS Modules, styled-components, or Tailwind CSS, each method has its own strengths and use cases. By following best practices, you can ensure your Next.js project remains maintainable, scalable, and optimized for performance.

Read other awesome articles in Medium.com or in akcoding’s posts.

OR

Join us on YouTube Channel

• YouTube

OR Scan the QR Code to Directly open the Channel 👉