Trabalhando com Módulos CSS

CSS Modules criam automaticamente nomes de classes únicos, permitindo o escopo do CSS para um componente específico e eliminando conflitos de estilos. Regras CSS simples podem ser escritas dentro dos CSS Modules.

De volta ao projeto

Criar um módulo CSS chamado home.module.css dentro da pasta app/ui e colar as seguintes regras CSS:

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

O arquivo home.module.css deve ser importado no arquivo app/page.tsx e, em seguida, a classe styles.circle deve ser aplicada ao elemento div criado anteriormente.

Na Prática