Background Colors & Gradients In Tailwind | Tailwind CSS Tutorial | Tailwind Tutorial

what's up developers it's dory here and i hope that you're having a great day because in this video we're going to talk about quite some stuff that's related to backgrounds and tailwind before we continue on i want to quickly let you know that you can support the channel through patreon where you can get access to my private discord group where everyone is helping each other out with their coding issues so if you are interested to join the link will be in the description down below first off i want to start off at a basic level so we're going to talk about background colors first after that we're going to cover heights and widths i wasn't sure if i should have added it in this video but i think that it will suit pretty well when creating a background then we're going to add a new background color but this time it will be a little bit different since we're going to add a gradient color so before i waste any more time with you let's get right into the content if we navigate back to the browser and search for background color you can see a new item right here that we can click on so let's click on it and let me actually zoom in right here you can see all the classes and the associated properties for background colors and as you can see there is a pretty clear pattern right here or similarity to the text color when working with text you define the keyword text first followed by the color and then the level of your color with the background it is exactly the same but instead of writing down the entire word background you can write down a shortcut called bg which stands for the background and that's actually with everything in tailwind everything that's related to text starts with text and everything that's related to the background starts with bg and that was pretty easy wasn't it so let's apply it into our index.html file if we navigate back to visual studio code you can see that we got an h1 h2 and a paragraph inside our parent element but what i would like to do right now is to remove it since it's not related to this video so let me remove everything all right then inside our parent element so the first if we're going to add a class of bg dash gray dash 500. if we save it and go back to brave open our local host and refresh it you can see that nothing has been added which is pretty weird so let's see what's going on right there we inspect our page right now open the element that we need so let me zoom in right here because it's pretty small all right inside body we have a div class called bg dash grade 500 which is alright if we scroll down you can indeed see that in the styling our background color should have been applied but if we click on our bg dash gray you can see that it has a width of 862 pixels by zero and height in the top left corner so what we need to do right now is to set the height and width to our element if you're familiar with css you know that it can be difficult at times to play around with your height and width with tailwind it's a lot easier since it obviously provides utilities for it so inside the browser let's open background dash color for tailwind and inside the search bar that search for width right here you can see a bunch of class names with properties assigned to it the classes always start with a w which obviously stands for width then there is a dash followed with a fixed size based on the sizing w scale zero stands for zero width w dash p x stands for one pixel and let's skip zero point five for one second and let's focus on width dash one this line right here as you can see width dash 1 is equal to 0.25 ram and as you can see with dash 2 is equal to 0.5 ram width dash 3 has a ram of 0.75 and so on this goes up until you reach width-96 whenever you want to define the width based on rem you can go up to a maximum of 96 which will be equal to a ram of 24. besides the pixels that you can define or the ram that you can define there's also a width dash auto right here which stands for auto sizing besides the fixed options that i just showed you you can also add relative width options and this will be a percentage so basically in pixels with one forward slash two you're saying that the width should be fifty percent one four slash three you're saying that it should be thirty three percent is one third of one hundred and i hope that you're getting the points since there's a lot of options you could add before we test it out on visual studio code there are four more classes that i would like to show you if we scroll down to the bottom of the list right here you can see that we have a width full with that screen a width minimum and a width maximum with the width dash full we're setting the width equal to 100 percent of the parent container we are with that screen which is a width of 100 vw which stands for viewport and this is something that we'll talk about later on while making a responsive design with css allows you to do is to specify the minimum and maximum width of an element it is very limited in tailwind but it is good enough to make sure that your design will look good i don't want to go over the height since it's exactly the same but the w is replaced with an h which represents height if we navigate back to visual studio code we can basically say that our parent container so with the bg dash grade is now let me actually zoom in all right has a width dash full so the width is the entire page and let's also set the height equal to full so we're adding a 100 width and height to our parent element if we save it navigate back to the browser and refresh our localhost mine is on autosave you can see that our background color has been changed to gray with a level of 500 and in my honest opinion it's a bit dark which makes me sad so let's go back to visual studio code and let's change gray to blue save it go to brave and as you can see the background color has been changed to blue now there might be a case where you want to add opacity to your background so let's say that we got a background image behind our blue background and you only want to see a thin blue layer on top of your image what we could do for that is to go back inside our visual studio class i just add my classes that are related to each other next to each other so what we could do right here is to basically say that our bg so our background dash opacity has a level of let's say 90. save it let's go back to brave refresh it and as you can see our background has been changed a little bit now the default opacity is set to 1 so that will be equal to an opacity of 100. save it and the color is back to what it was so with an opacity of 95 means what we just added is that our opacity will be 0.95 if we change it to 90 save it refresh the browser it has been changed a little bit but let's change it drastically let's change it back to 50. so a 0.5 opacity and as you can see it has been changed to light blue and if we set it to 10 it's even worse i hope that you're getting the point it will be useless for me to show you all the values because it will take a while something that i personally like and you're probably seeing in the thumbnail of this video as a gradient background color so let's go back to tailwind's website now let's go back to the top and let's search for gradient now the option that we need is the background image linear gradients so let's open it and before we talk about the class names let's start with the properties this time whenever you want to add a gradient background in css you need to set the background dash image equal to the linear gradient function as you can see right here then inside the function you need to specify the directions that you would like to have do you want your gradient to go to the top then your class name is bg gradient dash t which stands for to the top you have all these classes right here with different directions you can go to the top to the top right to the right to the bottom right to the bottom to the bottom left to the left and to the top left these are so called corner directions which will indicate where your color gradient will fade to so let's navigate back to visual studio code since we're going to change up our background a little bit if we remove the background color that we added and the opacity and replace it with bg dash gradient dash to the bottom so dash 2 dash b save it go back to our local host refresh it and as you can see nothing has been added since we obviously need to define the color as well right now it has no clue what type of color has been defined to do that we can use the same colors that we've seen with the background color and text color but it needs to be added in a different prefix so what we need to do is to add a space say that we want to go from dash blue dash 300 two dash blue dash 700 so our starting point is 300 and we want to increase the level of our blue to 700 in a gradient fashion save it go back to brave and as you can see it has a pretty smooth overlay keep in mind that adding the 2 is optional what will happen if we remove it let's test it out save it go back as you can see right now the gradient will shade now what will happen is that the background color will shade towards a transparent background in our case it will be white since the root of our project has a white background the last color prefix that we could add is the vaio method which will add a color in between the from and the two if we go back to visual studio code and ctrl z to add our 2 2-700 color go right after it and let's say that we want to add a color via dash black this will add a black color in between the gradient overlay save it let's navigate back to brave and as you can see we got a gradient with three colors right now which is something i do not recommend you to do but it is useful to know this was it for this video in the next video we're going to focus on adding background images until went if you do like my content and you want to see more leave this video a thumbs up and if you're new to this channel please hit the subscribe button you

Channel: Code With Dary

Views: 22,448

Keywords: tailwind css, tailwind css tutorial, how to use tailwind, tailwind ui, css tutorial, tailwind crash course, tailwinds css, tailwindcss tutorial, tailwind tutorial, tailwind tutorial 2021, tailwind tutorial css, tailwind tutorial youtube, how to use tailwind css, how to use tailwind css in html, tailwind 2, tailwind ui tutorial, tailwind 2.0, tailwind css 2.0 tutorial, background colors in tailwind, background in tailwind, gradient in tailwind, gradient bg color tailwind

Id: mvGE7goLc5g

Length: 11min 31sec (691 seconds)

Published: Mon Jun 07 2021