11 Notificaciones (Clases Anidadas y Variables)

Definir clases para reutilizarlas en tailwindcss

Curso Tailwind CSS desde CERO! (CodingTube)
Utilizando uno de los retos de FreeCodeCamp
Proyecto 1 - Panel de Notificaciones

*{ marging: 0;  
padding: 0;  
border-sizing: border-box  
}  

Creamos un css/styles.css
Para crear variables en CSS

:root {
--Blue: hsl(219,85%,26%);
}

Hacer referrencias a las fuentes: Normalmente lo tenemos en assets/fonts

Pero para utilizarlo de forma local y no a traves de CDN...

@font-face{
font-family: 'Plus Jakarta Sans';
src: url(./assets/fonts/PlusjajartaSans-VariableFont_wght.ttf)
}

Si queremos utilizar la fuente en le documento ejemplo:

body{
font-family: 'Plus jakarta Sans';

}

.notifications{
display: flex // Provoca que se alineen uno detras de otro
justify-content: space-between; // Espacion entre elementos

//Ahora existe anidamientos de clases:
& .title { //Importante el & para el anidamiento
color: var(--Blue) // Para utilizar la variable
} 
& .number{
background-color: var(--Blue);
color: var(--White)
display: inline-block; // Porque es un elemento de linea y lo queremos como elemento de bloque (Y sasi poder crearle un alto y un ancho)
width: 32px;
height: 25px;
text-align: center;
border-radius: 6px
}
&.mark {
color: var: (--Darkgrayish-blue)}
}
.name