CSS Variables
Your CSS File
:root {
--color-primary-50 : 248 251 255 ;
--color-primary-100 : 241 247 255 ;
--color-primary-200 : 221 234 255 ;
--color-primary-300 : 200 222 255 ;
--color-primary-400 : 158 197 255 ;
--color-primary-500 : 117 172 255 ;
--color-primary-600 : 105 155 230 ;
--color-primary-700 : 70 103 153 ;
--color-primary-800 : 53 77 115 ;
--color-primary-900 : 35 52 77 ;
}tailwind.config.js
CSS Variables
module .exports = {
theme : {
extend : {
colors : {
primary : {
50 : "rgb(var(--color-primary-50) / <alpha-value>)" ,
100 : "rgb(var(--color-primary-100) / <alpha-value>)" ,
200 : "rgb(var(--color-primary-200) / <alpha-value>)" ,
300 : "rgb(var(--color-primary-300) / <alpha-value>)" ,
400 : "rgb(var(--color-primary-400) / <alpha-value>)" ,
500 : "rgb(var(--color-primary-500) / <alpha-value>)" ,
600 : "rgb(var(--color-primary-600) / <alpha-value>)" ,
700 : "rgb(var(--color-primary-700) / <alpha-value>)" ,
800 : "rgb(var(--color-primary-800) / <alpha-value>)" ,
900 : "rgb(var(--color-primary-900) / <alpha-value>)" ,
},
}
}
}
}tailwind.config.js
HEX Colors
module .exports = {
theme : {
extend : {
colors : {
primary : {
50 : "#F8FBFF" ,
100 : "#F1F7FF" ,
200 : "#DDEAFF" ,
300 : "#C8DEFF" ,
400 : "#9EC5FF" ,
500 : "#75ACFF" ,
600 : "#699BE6" ,
700 : "#466799" ,
800 : "#354D73" ,
900 : "#23344D" ,
},
}
}
}
}