CSS Styling

Let’s now talk about CSS styling.

As you can see, our index page (http://localhost:3000) already has some styles. If you look at your file structure, you'll see a folder called styles with two CSS files: a global stylesheet (global.css), and a CSS module (Home.module.css).

If your project doesn't have those files, you can download the starter code here:

npx create-next-app nextjs-blog --use-npm --example "https://github.com/vercel/next-learn/tree/main/basics/assets-metadata-css-starter"

CSS Modules

CSS modules allow you to locally scope CSS at the component-level by automatically creating unique class names. This allows you to use the same CSS class name in different files without worrying about class name collisions.

In addition to CSS modules, you can style your Next.js application in a variety of ways, including:

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

In this lesson, we’ll talk about how to use CSS Modules and Sass in Next.js. Let’s dive in!