Tailwind CSS Tutorial #5 - Tailwind Config

Key Takeaways

okay the gang so when tell when processes our sauce CSS file it uses a default configuration to do that under the hood now this configuration dictates the values of properties controlled by different classes that we use in our HTML for example it would say that the text - SM class would give a font size of 0.875 Rams or text Excel would be a font size of 1.25 rome's it would also say things like the color red - 500 should be a specific hex code etc so we can also create our own Tailwind config file to either extend those rules or add extra classes for colors or fonts or spacing or anything else or to change the current ones as well so let's try creating a tailwind config file to do this so then to do this I'm gonna head back over here and open up a terminal now I need to open up a new term not because this one is currently running the live server so let me click on this + icon to do that now to create a tailwind config file we need to say npx tailwind CSS in it now I'm gonna pass through an extra flag as well so double dash full and what this extra flag does is create as a config file with all of the default values that tailwind uses under the hood included in it now I'm doing that so we can see them all to begin with so let me press ENTER to do this and we'll notice now this tailwind config is final right here now when we use the tailwind config it must be named in this exact way otherwise tailwind won't use it so if we click on that we can see this giant object which is being exported and inside it it contains all of the different values for our classes so inside this theme object if we scroll down we see a colors property and you can see the different colors that we have so we have gray here and if we use a class inside our HTML which says text - gray - 300 for example then tailwind will know to apply this hex code alright so right here we're setting all of the different value for the different color strengths the same from red orange yellow green all the different colors in tailwind we also have these values for spacing so we can see too is not put five rm6 is 1.5 rim etc so when we say for example P - 2 it knows to apply a padding of not 0.5 REMS right now if we scroll down a bit more we should come to the fonts down here the font families the font size we've seen these so when we say text - SM it knows to use this font size text - Excel this font size etc so if we wanted to we could change these values right here and then if we were to use that class it would change how it looks dependent on the value that we pass through here because when we then use tailwind to process our CSS it will look for the values and match them up okay so if we wanted to we could also add new properties so say I want a mammoth font size for example I could say okay let's have mammoth equal to something like 8 REMS alright so if I save this now the first thing I need to do is reprocess our source Styles dot CSS because previously when we processed it it was doing that according to the default styles which didn't have this in now if I want to use this in my index dot HTML file I need to reprocess the Styles based on this new config now I don't need to do anything special tailwind is automatically getting a lot for this config file when it processes it now it doesn't matter that there wasn't one there before we never used to have this config file when we don't have one it just uses all of these default Styles under the hood without this file even being there but now we have one it's gonna look for it and it's going to apply all of these different values including our new one so let me now process this by saying npm run build - CSS remember that was inside our package JSON file right here so this is how tailwind runs through our CSS and processes it into the new one so let's do that and once we've done that we should be able to go to our index file and now we should be able to use that new text size so I could say for example text - mammoth now oops mammoth and it will be huge so save that and let's come over here and now we can see this huge text so that's how we extend these different values inside the config file now then you could change all of the values in here and you could add new values in here and that is going to alter how our designs look right but I wouldn't recommend changing values inside the default config setup if you do this it's hard to see what values you've actually changed and what new values you've added and therefore it's going to be tough to distinguish between the default values already there and your own so instead we should create a blank config file to extend the default rules and that way we're not altering the core values and it's easier to see which extra values we've added ourselves as well so what I'm going to do is actually rename this over here to tailwind - default you can call it what you want it doesn't matter just rename it to something else and now we lose that tailwind icon because now this is not named correctly so if we built our Styles now and process them using tailwind again then it wouldn't use this file it would use the default ones under the hood which is the same as this file but not with this in it right so now let's create a new blank config file and to do that we say npx tailwind CSS in it without the full flag and now it's going to create this blank config file forests right here so now we don't have all of those values in it so we know that now if we try to process this CSS it's gonna look for a config file does that mean that we're not going to get any of the properties at all and nothing will work because there's nothing in here well no it still looks at all of the default values under the hood even though they're not in here and it applies those but now we can extend those inside this thing or right here so we can add new ones alright so let's try doing that so say for example we wanted to add a new color to the pallet that we use so let's see how the default config uses colors well it has a colors property and inside we have different properties for example black is this and white is this so we could just add a new color by coming over here and saying colors because we copy the structure of this thing right here and then inside the name of our color well I'm going to call it primary and then whatever the value is now I'm just going to give this a value which is a hex code of FF 6-3 6-3 now this is not a hex code I've just plucked out of thin hair this is the one I'm using in this design and it's a bit like a red color but they didn't have this shade of red in the default rules over here so I've created my own color right here called primary to get that color now say I also wanted to add a secondary color but I wanted to add two different shades of the secondary color well if we take a look we can say whatever the color is called and then inside that object declare different shades so I'm going to put a comma after this primary and I'm just gonna paste this in secondary which is an object and then we have a strength of 100 and 200 and these are two different shades of the same color so this is a lighter one this is a darker one okay so what if we want to use these colors now for backgrounds or text inside our index dot HTML file well first of all we can save this then we need to rebuild the CSS so to do that we can come down here and say NPM run build CSS so every time we change the config all the Styles file we need to do this remember press ENTER to rebuild that and once we've rebuilt it we can go over here and we can use those Styles so I'm going to scroll down to where we have the two buttons for logging in and signing up and I'm gonna say I want the text to be the primary color so I can now say class is equal whoops not in capitals class is equal to text - primary so that's that red color and I'm going to do the same for the sign up so copy that and paste it right there save it and now we can see it's this kind of already pink color awesome so what if I want to use the other color for text down here let's say for example on this one now I want to use a background color of this one right here strength 100 and a text color of this one so I'm going to come to this div and I'm gonna give this a class equal to something and this is gonna say BG - secondary - 100 so this is how we apply background color we say BG then the color then the strength so it's gonna be this one or right here now for the text color I want it to be the other so text - secondary - 200 save that and if we come to the bottom we should see that down here awesome summer friends that's how we can use this config file to extend the theme that tailwind uses to add different classes with different values now there's one more thing I want to show you and that is actually a package I've got installed for tailwind it's called tailwind CSS intellisense now it's actually not installed so I'm just gonna do that right here by clicking install and then you might have to restart vs code so I'm just gonna close it and then I'm going to open it up again for this to take effect and now when we come into the place where you add different classes if we start to add a new class then we can see everything that tailwind provides us with all the different classes available to us so if I say for example text - we can see all of these different things right here so it's just a nice bit of intelligence now in order to use this we have to have our config file defined so if this wasn't here if we didn't have a config file then it wouldn't show all of these different drop-down options that's my experience with it anyway so now we know how to customize tailwind class let's dive a bit deeper by adding our own custom fonts as well