1) dans input css, tu peux créer ta propre classe et outre passer le framework :
.flexMid{
display: flex;
justify-content: center;
align-items: center;
}
ou on ajoute à base ou components ou utilities toujours dans input.css pour créer ou écraser (toujours dans le fichier input.css).
changement font family par défaut :
@layer base {
html{
font-family: Montserrat, sans-serif;
}
ajout de nouvelles classes :
@layer components {
.btn{
@apply px-4 py-2 font-bold text-white bg-blue-500 rounded;
}
ou avec du css classic
.btn2{
padding: 4 0;
font-weight: bold;
color: white;
background-color: #3396f1;
}
}
Bien à utiliser pour les btn, input, form...
2) dans tailwind.config.js
extend permet de mettre en plus ! sans écraser l'existant !
extend:{
colors: {
orange: "#ffa500",
"bleu-nuit": {
900: "#03045e",
800: "#023e8a",
700: "#0077b6",
},
},
fontSize:{
'clamp-sm' : 'clamp(12px, calc( 8px + 1vw), 22px) ', appel avec text-clamp-sm
'clamp-md' : 'clamp(16px, calc( 12px + 1.25vw), 30px) ',
'clamp-lg' : 'clamp(22px, calc( 18px + 1.5vw), 48px) ',
},
fontFamily:{
"open-sans" : 'open sans',
}
}