CSS Styling (Next.js)

You can visit my GitHub repo to follow along with me.

git commit -m "Add global styles"

You can use /app/ui folder/global.css to add CSS rules to all the routes in your application.

You can import global.css in any component in your application, but it's usually good practice to add it to your top-level component. This is the root layout.

Add global styles to your application by importing global.css in /app/layout.tsx:

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

Tailwind CSS

Tailwind is a CSS framework that helps you to quickly write utility classes directly in your TSX markup.

Inside global.css, there are some @tailwind directives:

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

When you use create-next-app, Next.js will ask if you want to use Tailwind and automatically install the necessary packages and configure Tailwind in your application.

For traditional CSS rules or keeping your styles separate from your JSX - CSS Modules are an alternative.

Using the clsx library to toggle class names

There may be cases where you may need to conditionally style an element based on state or some other condition. clsx is a library that lets you toggle class names easily.

Other style alternatives

• Sass which allows you to import .css and .scss files.
• CSS-in-JS libraries such as styled-jsx, styled-components, and emotion

CSS documentation