Styling Next.js Application: Step by step guide

Styling Next.js Application can be an exciting journey, offering a range of methods to achieve beautiful and responsive designs. This comprehensive guide will walk you through the essential techniques, from adding global styles to leveraging powerful libraries like Tailwind and clsx. Whether you’re a seasoned developer or just starting with Next.js, this guide will help you master the art of styling your application.

Table of content

Global Styles
Styling Next.js Application using Tailwind
CSS Modules
Using the clsx Library to Toggle Class Names
Other Styling Solutions
Conclusion
FAQs

Global Styles

When building a Next.js application, it’s crucial to have a consistent look and feel across all pages. This is where global styles come in handy. Global CSS allows you to define styles that apply to your entire application, ensuring uniformity and ease of maintenance.

To add global styles, navigate to your /app/layout.tsx file and import the global.css file. This file typically contains CSS reset rules and site-wide styles for HTML elements like links and headers.

// /app/layout.tsx

import '@/app/ui/global.css';

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}

By importing global.css at the top level, you ensure that these styles are applied across all routes in your application. This setup promotes a consistent design language and reduces the risk of style conflicts.

Inside global.css, you might notice some @tailwind directives:

// /app/ui/global.css

@tailwind base;
@tailwind components;
@tailwind utilities;

These directives allow you to use Tailwind’s utility-first classes in your global styles, further simplifying the process of styling your application.

Styling Next.js Application using Tailwind

Tailwind CSS is a popular utility-first CSS framework that streamlines the process of styling your application. It enables you to apply styles directly in your JSX markup using predefined classes, making it easy to create responsive and visually appealing designs.

When you create a new Next.js project with create-next-app, you have the option to include Tailwind CSS. If you choose this option, the necessary packages and configurations are automatically set up for you.

For instance, consider the following example where Tailwind classes are used to style elements in a component:

// /app/page.tsx

import AcmeLogo from '@/app/ui/acme-logo';
import { ArrowRightIcon } from '@heroicons/react/24/outline';
import Link from 'next/link';

export default function Page() {
  return (
    <main className="flex min-h-screen flex-col p-6">
      <div className="flex h-20 shrink-0 items-end rounded-lg bg-blue-500 p-4 md:h-52">
      // ...
      </div>
    </main>
  );
}

Here, Tailwind classes like flex, min-h-screen, and bg-blue-500 are used to style the main container and its child elements. This approach reduces the need for custom CSS and speeds up the development process.

To experiment with Tailwind, you can add a new element to your /app/page.tsx file and apply some utility classes:

// /app/page.tsx

<div
  className="relative w-0 h-0 border-l-[15px] border-r-[15px] border-b-[26px] border-l-transparent border-r-transparent border-b-black"
/>

This code creates a black triangle using Tailwind’s border utilities. Such utility classes enable you to achieve complex designs with minimal custom CSS.

CSS Modules

CSS Modules offer another way to style your Next.js applic ation. Unlike global CSS, CSS Modules scope styles to a specific component, preventing style conflicts and making it easier to manage your styles.

To use CSS Modules, create a new CSS file with the .module.css extension and define your styles:

// /app/ui/home.module.css

.shape {
  height: 0;
  width: 0;
  border-bottom: 30px solid black;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
}

Then, import the module in your component and apply the styles:

// /app/page.tsx

import AcmeLogo from '@/app/ui/acme-logo';
import { ArrowRightIcon } from '@heroicons/react/24/outline';
import Link from 'next/link';
import styles from '@/app/ui/home.module.css';

export default function Page() {
  return (
    <main className="flex min-h-screen flex-col p-6">
      <div className={styles.shape} />
    // ...
    </main>
  );
}

Using CSS Modules, you can achieve the same results as with Tailwind while keeping your styles organized and scoped to individual components.

Using the clsx Library to Toggle Class Names

There are times when you need to conditionally apply class names based on the state or some other condition. The clsx library simplifies this process by allowing you to toggle class names dynamically.

For example, let’s create an InvoiceStatus component that changes its appearance based on the invoice status:

// /app/ui/invoices/status.tsx

import clsx from 'clsx';

export default function InvoiceStatus({ status }: { status: string }) {
  return (
    <span
      className={clsx(
        'inline-flex items-center rounded-full px-2 py-1 text-sm',
        {
          'bg-gray-100 text-gray-500': status === 'pending',
          'bg-green-500 text-white': status === 'paid',
        },
      )}
    >
    // ...
    </span>
  );
}

In this example, the clsx library is used to conditionally apply different classes based on the status prop. This approach is particularly useful for handling dynamic styles in a clean and maintainable way.

Conclusion

Styling your Next.js application is an integral part of creating a polished and professional web experience. Whether you prefer the utility-first approach of Tailwind, the scoped styles of CSS Modules, or the dynamic class handling of clsx, Next.js offers a variety of tools to help you achieve your styling goals. By understanding and leveraging these methods, you can create visually stunning and maintainable applications with ease.

FAQs

What is the best way to add global styles in a Next.js application?

Import your global CSS file into the top-level component (e.g., /app/layout.tsx) to ensure consistent styles across all routes.

How can I use Tailwind CSS in my Next.js project?

When creating a new Next.js project with create-next-app, select the option to include Tailwind CSS. This will automatically set up the necessary packages and configurations.

What are the benefits of using CSS Modules?

CSS Modules scope styles to a specific component, reducing the risk of style conflicts and making it easier to manage your styles.

How does the clsx library help with conditional styling?

The clsx library allows you to toggle class names dynamically based on conditions, making it easier to handle dynamic styles in a maintainable way.

Can I use multiple styling methods in a single Next.js application?

Yes, you can combine different styling methods like Tailwind, CSS Modules, and CSS-in-JS libraries within the same application based on your needs.

What other styling solutions are available for Next.js applications?

n addition to Tailwind, CSS Modules, and clsx, you can use Sass, styled-jsx, styled-components, and emotion for advanced and flexible styling options.

Next topic

Read next blog to optimize fonts and images next.js app Optimizing Fonts and Images in Next.js 14 AppRouter

References

A BIT ABOUT ME

I’m Atanu Das, a software developer in Kolkata, India. My expertise spans across the realms of creativity and development. With a background in development, I am consistently exploring the point where education meets instruction, as well as the juncture of technology and artistry. Feel free to connect with me on LinkedIn using the handle @atanu-das-app-developer, and you can also take a glimpse of my creations on Instagram by following @atanu.das.app.developer