Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Aprende 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

¿Todo estuvo claro?

¿Cómo podemos mejorarlo?

¡Gracias por tus comentarios!

Sección 2. Capítulo 6

Pregunte a AI

expand

Pregunte a AI

ChatGPT

Pregunte lo que quiera o pruebe una de las preguntas sugeridas para comenzar nuestra charla

Suggested prompts:

Can you explain how CSS Modules prevent style collisions?

What does the `styles.circle` class do in the UI?

Can you show me how to structure the `home.module.css` file?

Awesome!

Completion rate improved to 2.08

bookWorking with CSS Modules

Desliza para mostrar el menú

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

¿Todo estuvo claro?

¿Cómo podemos mejorarlo?

¡Gracias por tus comentarios!

Sección 2. Capítulo 6
some-alt