@Abbassher55
Posted
Your solution looks great but i have some suggestions according to your challenges. First: if you want to use colors in hex,hsl,rgb etc and vice versa and you dont have the given format then write it in vs code css file which have its own converter and will change it directly in ur editor for you from one format to another. Second : To use other font in tailwind u can make changes like below in tailwind.config.js file.
In tailwind.config.js
theme: {
OtherProperties....
fontFamily: {
'sans': ['ui-sans-serif', 'system-ui', ...],
'serif': ['ui-serif', 'Georgia', ...],
'mono': ['ui-monospace', 'SFMono-Regular', ...],
'display': ['Oswald', ...],
'body': ['"Open Sans"', ...],
}
Then u dont need this in ur css
.title {
font-family: 'YoungSerif';
font-weight: 400;
font-style: normal;
}
Now after this u can use font-sans, or font-mono .... classes in your project.
And also for font weight we have these tailwind classes.
font-thin => font-weight: 100;
font-extralight => font-weight: 200;
font-light => font-weight: 300;
font-normal => font-weight: 400;
font-medium => font-weight: 500;
font-semibold => font-weight: 600;
font-bold => font-weight: 700;
font-extrabold => font-weight: 800;
font-black => font-weight: 900;
Happy coding
Marked as helpful
@yogesh-stack-dev
Posted
thank you, @Abbassher55
@Abbassher55
Posted
@yogesh-stack-dev My pleasure