Working 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
Bedankt voor je feedback!
Vraag AI
Vraag AI
Vraag wat u wilt of probeer een van de voorgestelde vragen om onze chat te starten.
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
Working with CSS Modules
Veeg om het menu te tonen
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
Bedankt voor je feedback!