Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Impara Working with CSS Modules | Setting Up a Next.js Project
Next.js 14 Mastery for Building Modern Web Apps

bookWorking with CSS Modules

CSS Modules automatically create unique class names, allowing CSS scoping to a specific component and eliminating style collisions. Simple CSS rules can be written inside the CSS Modules.

Back to the Project

Let's create a CSS module called home.module.css inside of the app/ui folder and paste the following CSS rules:

.circle {
  height: 2.5rem;
  width: 2.5rem;
  background-color: rgb(255 255 255);
  border-radius: 9999px;
}

We should import the home.module.css file into the app/page.tsx file and then apply the styles.circle class to the div element we created earlier.

In Practice

Tutto è chiaro?

Come possiamo migliorarlo?

Grazie per i tuoi commenti!

Sezione 2. Capitolo 6

Chieda ad AI

expand

Chieda ad AI

ChatGPT

Chieda pure quello che desidera o provi una delle domande suggerite per iniziare la nostra conversazione

Suggested prompts:

How do I create and import a CSS module in my Next.js project?

Can you explain how to apply the imported CSS module class to a React component?

What should I do if the styles from the CSS module are not being applied?

Awesome!

Completion rate improved to 2.08

bookWorking with CSS Modules

Scorri per mostrare il menu

CSS Modules automatically create unique class names, allowing CSS scoping to a specific component and eliminating style collisions. Simple CSS rules can be written inside the CSS Modules.

Back to the Project

Let's create a CSS module called home.module.css inside of the app/ui folder and paste the following CSS rules:

.circle {
  height: 2.5rem;
  width: 2.5rem;
  background-color: rgb(255 255 255);
  border-radius: 9999px;
}

We should import the home.module.css file into the app/page.tsx file and then apply the styles.circle class to the div element we created earlier.

In Practice

Tutto è chiaro?

Come possiamo migliorarlo?

Grazie per i tuoi commenti!

Sezione 2. Capitolo 6
some-alt