‫One of the big advantages of Tailwind
‫is its extreme flexibility
‫which allows us to configure
‫basically everything about it.
‫Now, while we are not gonna go deep
‫into configuration in this crash course,
‫let's at least try to explore it a little bit
‫by changing the default font family
‫and by doing some other changes.
‫Now, you can read all
‫about changing the configuration right here
‫as always in the Tailwind docks.
‫So basically, what we will need now is this
‫Tailwind dot config file where we can really
‫change everything about Tailwind.
‫Now, let's try to get rid
‫of this ugly ES lint warning
‫by using the comment
‫E.S. lint disable.
‫So that didn't work.
‫Or maybe it's E.S. lint disable next line.
‫Now, there we go.
‫So this looks a lot better.
‫But anyway, here we can see
‫that we can really change
‫everything that we want here.
‫And the easiest way I found to see what exactly
‫we can change is to open up this link here,
‫which takes us to the default configuration.
‫And so then here, we can see all the things that
‫Tailwind basically sets by default.
‫So it's all these different values here.
‫And so this is all the stuff
‫that we can override.
‫And so what we will override now
‫is the default font family.
‫And let's get that font from Google Fonts.
‫So Google Fonts.
‫And let's immediately search the one
‫that we want, which is Roboto Mono-spaced.
‫So let's open it up right here
‫and let's select a couple of styles.
‫So let's say 300...
‫Let's remove that here.
‫So...
‫400,
‫500,
‫and 600,
‫maybe even 700.
‫And then we can grab this link from here.
‫So just copy this and then place it right
‫into the HTML file.
‫And if for some reason you were not able
‫to get this link just feel free to copy this
‫from the final files of this section.
‫All right.
‫But anyway, now here inside the theme
‫we can create the font family field.
‫So font family
‫And then here we can define any name that we want.
‫So for example, let's say we wanted
‫to call this one pizza and here
‫the fonts stack would be
‫Roboto Mono
‫that we just included and
‫I should write it correctly at least.
‫And then as a fallback,
‫let's just use a mono-space
‫like this.
‫Okay.
‫And if we come back here
‫then let's search for the same thing here.
‫So...
‫This is in an alphabetical way
‫and indeed here we have that font family field.
‫And so here we are now basically
‫overriding that font family.
‫So now we will end up with a new font
‫which is gonna be called pizza.
‫So let's say we wanted to use this in the header.
‫So let's open that
‫and so, in order to select a font,
‫we just write font.
‫And then we see that we get this font called pizza.
‫So if we hover over this,
‫we get exactly what we specified earlier.
‫And so if we give this a safe, then there it is.
‫Great. This is however not that helpful
‫at least not if we want to use this everywhere.
‫And so instead, what we can do is
‫to override the sense font that
‫Tailwind automatically injects into our HTML.
‫So therefore, if we change this here then
‫this will automatically update for the entire page.
‫So if I save this now, then we immediately notice that
‫the entire page gets this new Roboto Mono font.
‫Beautiful.
‫So this looks a lot nicer than before
‫and indeed you see here that
‫the first font is this sans.
‫And so now we did override this.
‫Now we still have the serif,
‫so we could also use that one.
‫So here, the font pizza no longer exists
‫but we can use serif if we want it,
‫or at least I thought so.
‫So maybe by doing this right here,
‫we overrode everything.
‫So I'm actually just trying things out here
‫as we go and making things up.
‫So I never actually tried to use
‫this fonts serif anywhere.
‫So let's just ignore this
‫because this was just an experiment anyway,
‫but here are some more things
‫that we could try if we wanted.
‫So for example, we could also create
‫some other color here.
‫So let's say colors and then let's again call it pizza.
‫And then let's make it some weird color like this.
‫Here we get an error and then we have
‫another error because now all of these
‫color classes that we used earlier
‫do actually no longer exist because
‫now the only colors that we have
‫are these ones over here.
‫So if we wanted to keep the colors
‫that we already have, but add this one
‫then we would have to place this into the extent.
‫So basically keeping everything
‫from Tailwind but simply extending it.
‫And so, now we should get
‫this other color here as well.
‫So maybe let's, instead of this yellow
‫let's use our pizza color.
‫And so indeed it becomes blue.
‫So that's, our 1, 2, 3, 4, 5, 6
‫which somehow has been converted here
‫but still it is exactly that blue color
‫that we saw earlier.
‫So by doing this,
‫we extended Tailwind's color palette
‫which is new color here.
‫However, this is not really what we're interested in
‫but we are interested in something else.
‫So let's again come back here
‫so that I can show you.
‫So again, here, we could now basically extend all
‫of this that we wanted.
‫So we could do, for example, font sizes
‫and then create
‫like something called huge.
‫And then here we could give it,
‫for example, copy this
‫and make it 80-rem.
‫And then in the header we could again use that
‫so text and then huge,
‫and then we would have
‫our 80 rem or whatever we chose there text, right?
‫So really the possibilities are absolutely endless
‫as you can see.
‫So I keep doing some things here,
‫but what I actually wanted to change
‫is now this height.
‫So right here, remember how in the layout
‫we used the height of screen,
‫which corresponds to 100 viewport height units.
‫However, this creates problems on mobile browsers.
‫And so instead of using this unit,
‫we should use an even more modern unit,
‫which is called D.V.H.
‫So let's do that.
‫And I will just for the sake of fun,
‫keep this one here.
‫But now let's update the height.
‫And so in the height,
‫what we want to change is screen.
‫So screen should now no longer be 100 V.H.,
‫but 100 D.V.H
‫which stands for dynamic viewport height units.
‫And so with this, we no longer have the problem
‫that on mobile browsers sometimes the viewport type
‫is not really 100%.
‫All right.
‫And so if we come here now and hover over this,
‫you see that now we have our 100 D.V.H,
‫so exactly what we just specified there earlier.
‫So this all looks pretty magical
‫and it is indeed really amazing.
‫So all the things that we can change here
‫really opens up a lot of possibilities.
‫But this was actually all that
‫I wanted to show you here in this lecture.
‫So configuring some stuff here
‫where what we do here so...
‫just in the theme object
‫basically overrides everything in that category.
‫While here, if we just extend
‫then we keep the original things of Tailwind
‫but add our own ones.
‫So for example, if we placed this one out here
‫then all the font sizes that we were using no longer exist.
‫So for example, here, text small
‫then no longer exists 'cause we just overrode it.
‫Okay?
‫And now we learned most of the stuff
‫that we actually wanted to learn in this section.
‫And so now over the next few lectures
‫all we have to do is to basically style
‫the remaining part of the application.
‫So for example, this card or this menu here.
‫So let's actually start with this menu
‫in the next lecture.