How to Style Your React Landing Page with Tailwind CSS

Key Takeaways

tailwind css is one of my favorite front-end technologies to use right now because it gives you the ability to make your apps look really good really quickly in this video i'll be showing you how to use tailwind to style a plain text react website to look like this airbnb landing page let's get started so here i have a empty react project that i created with create react app and it's in typescript and i've just cleared out all the content from the div so i have basically an empty div here as my project and deleted all the images as well and this is where we're going to be starting from so to get started i think a good way to learn is for us to have an example web page or landing page that we want to use as our objective and then we'll see if we can recreate that using tailwind i think that this is a good way to learn especially if you're just starting out and for this i've picked airbnb's landing page for airbnb host which i think is quite a simple landing page and i think it's got a couple of interesting elements so uh for our project we're just gonna see if we can create this uh view here and i'm not gonna go all the way and create all the rest of this page but just this top two sections that we see here to start this let's first just create a bunch of divs with all of these text elements and then fill them out with the content here so what i've done here is just gone ahead and created divs for each of these text elements and just copied over the text of these first two parts let's take a break and see how that actually looks in our app right now so you can see it's just plain boring text there's really nothing going on at the moment before we go on and install tailwind let's actually add some appropriate headers to this so we at least get some structure and by that i just mean changing some of these tags to match the type of the content so we'll turn some of these elements into headers and some of them into buttons or interactive elements this first element here i think it's probably a header two because this is smaller and this is probably the main header header one these can be paragraphs this is going to be a button this might be another header two and then these will each be header threes so let's go ahead and do that just by changing the tags the layout has already updated a little bit it looks better some text is bigger there's a button here i can click and uh there's a little bit more structure to it but it still looks pretty bad if we compare it to our example the content of the site however is exactly the same so we have all the text here and the button here as well the next step is to actually make this start to look good so we first have to install tailwind this is the point where we'll go to the tailwind website if you type in the quick search box or you press ctrl k then the search button will come up and there'll be a page on how you can install tailwind with uh react websites so uh this installation documentation here install tailwind css with create react app click on that and follow the instructions to set up tailwind in your project the first step is to create the app but we've already done that so we're just going to go to the next step which is install tailwind css i'm just going to copy this chunk of code over here and run that in my terminal once it's finished installing we also have to configure the template paths it says here add this line to the template file tailwind.config.js that's because the way tailwind works is that it needs to compile the css every time we make a change in the code and this config tells us where the content of our site is so that if any of these files changes then tailwind will be forced to recompile the css so let's just copy this chunk here and update our tier1config.js and i'm just going to replace this line with the content here so that it knows to update these files the next step is to add these tailwind directives to the css and that's this file over here and i'm just going to go ahead and replace all of this i don't need the existing css anymore and i'll replace it with the tailwind components so now i've copied that and the next one is to run uh start the build process so even though i've already started it i probably will just run it again just to make sure that it's installed properly and started up properly let's just rerun it right there and now my web server is up again and all my styling is gone so it's just back to basics but that's good because that means that tailwind is probably working and installed correctly and then the last step of the installation number six it says start using tailwind in your project so we can start adding these utility classes to style the content and in the example it adds this class name text 3x alphon bold underline to the header1 so let's just go ahead and copy that and add it to our header one and see if anything changes and you can see that the styling has updated just from us using these specific class names so now we know that tailwind's ready and we can actually start styling our project the way we want to just in case you're new to tailwind or styling projects in general then you might be wondering what it actually is or what it does and how it's different from regular css tailwind describes itself as a utility first css framework the short of it is that instead of styling our project by writing css we use these classes that tailwind create instead directly into our div and that will by combining them for example text size color padding margins we can style the project directly without having to leave our jsx and for what it's worth table end is also compatible with things like django vue or any basically any other front-end framework i'm just using react now because it is the most popular framework but you can use tailwind anywhere you'd normally be able to use css to style your project so now that tailwind is set up properly in our project and we know what it is let's use it to make our site look something like this so this will be at the top it will be bold ish and capitalized and then this part will be really big and then here it will just be a normal text then we'll have a button here as well and if you don't have any idea how to do that then the way i like working with tailwind is just having the documentation open here on the side tab and then pressing ctrl k to search for the things that i want to do so for example i wanted to change the font size and then a couple of things will pop up so we can click this page here and then we'll see a couple of examples so these are the classes we can use to manipulate the font size and this is the css that it will translate to uh and we said that we want to make this text bigger and maybe bolder as well so let's try that i've got this text extra large here so let's see what that looks like and then for this one we already have 3xl from our example but i think that's a bit small so let's make it even bigger make it 5xl i think we'll take the underline out because we don't need that and then this part it's quite small compared to the rest of it but it's actually it looks bigger in here than it does in my app so i'm going to change that as well and i'm going to make it just large which is algae okay so this looks pretty good now another thing to notice is that um this text seems to wrap around it's quite short like it doesn't extend all the way out to the sides of my page and there's a good reason for that is because if we're reading things on the screen we don't want to move our eyes like really far horizontally across the screen so it's actually easier to read things that are in a confined space so now we're going to have to put this inside a div and make that div have a limited size uh even though the background div is still big and stretches all the way across the screen the actual text part of it uh has to have a limited size so let's see if we can do that here so first of all i'm going to create a div to wrap these text elements i'm going to put it into there like this uh so now this is inside the div but it's kind of hard to see because uh divs are invisible so you can't see them unless you right click inspect and then look at all the things that the browser tell you but a trick i like to use is just to add a colored border around the div while i'm working on it so i can see where it is so let's see how we can do that with tailwind here's a couple examples for border classes so here we have border two border rows uh 500 so i guess this is the color so let me try this with my div i'm going to type border 2 i guess that's 2 pixels and then border red nice bright red color and there's different types of red how light or how dark they are so i'm going to pick a middle one which is red 500 by the way if you want to have this pop-up plug-in that shows you what type of tailwind classes are available then this is an extension you can install in visual studio code if you search the extension marketplace you'll find one called tailwind css intellisense so go ahead and install that and it will pop up autocomplete for you if you're working with tailwind classes it's extremely useful it saves you from having to memorize all of the class names and all of the format of these classes so once you use it for a while then this will really come in handy okay so now i've added the border to this div and remember what i wanted to do is make it shorter here so all the way up to here so how can we do that i'm thinking we can put a max size constraint on it so it can't go further than a certain size so let's see if this shows up somewhere max width here we go so if i type in max width then there's a help page here with a couple of options including small medium large let's put it at medium and see how that looks max wmd okay i think that looks a lot better maybe we can make it larger this looks a bit larger than what i have maybe even xl okay i'm pretty happy with that so i'm going to keep it at that for now and the next element is this button here this try hosting button so this is a bit more complex because now we have this element that we can click and i don't know if you can see from the uh the recording but there's a very slight gradient that moves with the mouse that's a bit complex for us so we're not going to try that but we will try to add just a static gradient there and we also have these rounded corners and this extra padding so yeah again this element is a little bit more complex let's just get started with the biggest thing first which is this red background so here we need to learn how to add background color to an element and if i just type control here do background color then there are some examples here so yeah it's just bg and then dash and then the color we want so there's a lot of different colors and we'll probably pick some kind of reddish color for that so let's go ahead and add our background color here see how that looks okay so now my button is red and it's got quite a bit of space between the text and the border so we can probably do this with padding so padding is the space between the div and the elements inside it and padding in tailwind if i type in padding here it's a very simple class it's just p and then the number the number isn't it doesn't necessarily translate to a pixel number so the way the numbers work in tailwind is that they're just ordinal so zero is smaller well zero is always zero and then you have one and then two is always bigger than one but not necessarily double the size or not necessarily two pixels uh for example if i type p two here you're gonna see that p2 is actually 8 pixels so these numbers are kind of designed by tailwind so that you can just decide on a rough number on what you want without having to know the exact pixel value and somehow it's all going to scale and fit really well so let's just try this with p2 and see how that looks okay so this is quite a bit better however with buttons like these i actually you notice that the padding on the side so on the x-axis is usually a bit more than on the vertical axis so to do that with tailwind you actually see that there's p x and p y as well uh and that gives us a little bit more control because this will do padding of two on all sides but if i want to have padding of two just for the y axis i can do p y two so now i've got that padding of two here and now i can have a bigger padding for the x axis so maybe something like p x four okay so i think this button looks a little bit better now i'll maybe increase these numbers because i do think that uh the version does look a little bit bigger than mine here okay so that that's a little bit bigger and the text is probably also a little bit bigger so that may be a text large okay how do we do the rounded corners though uh let's go ahead and search for that rounded corners so border radius and the class name is literally just rounded rounded medium large or full so we can see the examples here so i think i'm going to go with a rounded medium let's just copy that and put it in okay so i've got slightly rounded corners might be hard to tell right now but i've got slightly rounded corners on the edges there now um so i think that's probably fine for the moment so now that the headings and the text and the button in this top section are in a better shape let's focus on the layout a little bit let's get this sort of centered in the page get a dark background uh we're going to put an image there later but first let's start with the dark background so then we can make the text this white color and then let's get the spacing between each of these elements right including this big spacing here between the section and this padding here along the sides to adjust the layout of this element i'm going to create another div that i'm going to put it into [Music] and now i'm going to make this outer div have a dark background so we remember that the background was bg and then the color let's pick a dark color so bg slate looks pretty good let's pick slate 700 see what that looks like let's make these text elements white with tailwind just like regular css if we put a style inside a div then all the children of that div will inherit that style so if i just put text white even though this element itself doesn't have text directly all the children element will have white text now and now i want to have a bit of padding because you see here this is nicely padded from the top and from the sides but ours is kind of stuck to the corner so let's add a bit of padding here we'll make px maybe something like six there's a bit of space maybe maybe eight just more space and then the vertical padding looks a bit bigger so we're just gonna double that and then do py16 okay so i think that looks a little bit better and now we want gaps between each of these elements as well one thing i could do is uh i could add margins to each of these things so a margin is like padding except it works outside the element so this element here this become a host if i add a margin to this uh say i add margin bottom uh mb stands for margin bottom if i do margin bottom eight like this it will give me a bit of space between this and this one and that's what i want but i can copy that to each of them but if i have a bunch of elements in a row like this inside a div and i pretty much want the same spacing between them and i want to you know only edit that once then what i could actually do is create a grid out of this div and then just set the gap size so i don't have to keep repeating this mb 8 class and this is actually useful when you have something that you're automating for example like messages or items in a shop that you don't have you don't want to add these classes to every single one of them and you just want a predefined gap between each of them so let's look at what the grid class does in tailwind so we have grid template columns and we can create it by using grid columns one or two how many columns we want so in this case it's it's just all you know straight down so it's just going to be one column i could do it like this so grid column one and yeah let's try that copy that element there and see if we can get some kind of gap for each of our elements here so i'm going to take this margin one back out and now i'm going to create a grid uh i can actually make this border thing i have right now um the actual grid so i don't have to create a new div so do this nothing's changed apart from my button which is sort of just stretched out to fill the entire width i think that's just a html thing or a styling thing but we can fix that by just typing width and then uh just choosing a number so that the size of this button is fixed okay i think that looks fine and now that all of the stuff is in a grid we can actually use a class called gap and again there's a number system here so we can pick a gap size and this will create a gap between all our elements in the grid so let's do gap eight see that looks good okay i'm pretty happy with that and another little detail as well is that this become a host is fully upper case i can do that by just typing this in uppercase but if you just want this to be a style and you you don't know what text is going to go here then it might be better to make that as part of the class instead and tailwind actually has an uppercase class so if you just type in uppercase there's a text transform and then there's normal case uppercase lowercase capitalize we'll just take the uppercase one here then put it into this header and now our header has become an uppercase uh i think the text also looks a little bit bolder than normal so it's not this looks a bit thin so if we go to the table documentation again and look for bold then it's under this font weight class and we have font bold and a bunch of other ones as well but we'll be using font bold to change its weight so let's do that maybe i'll just go ahead and make that header one a little bit bigger let's take out that border on this thing as well and then we can start working on the bottom part okay so now the top part looks pretty good we're gonna come back to this and change a couple more things but for now let's just go to the bottom part and get that looking uh somewhat reasonable as well so the first thing you'll notice about the bottom is that there seems to be this two columns here and again we've already done this grid column system so we can try to use that again with two columns and see if we can apply that here but we also have this large chunk of a header here as well that again like this one the text is only limited to a certain size so we might have to do the same tray create a div that has a limited size and just put it here again but let's give that a go so first of all let's create a whole div to wrap up this entire bottom element because we're going to want padding between the edges of the screen let's just put all this stuff in there okay so nothing's changed that's fine and now for the class name i'm gonna create padding i'm gonna use the same padding i used up here which is px8 and py16 just to make it look a bit consistent okay so that looks pretty good and this part is quite a big header this header 2 here let's make that really big first text 4xl okay i think that looks pretty good but now we want to make it just half the size of this as well so this is going to be another div that i'm going to wrap it in i'm going to put my header 2 into that div and now let's give this one a max size okay i think it can be a little bit bigger and i think my text can also be a little bit bigger okay that looks fine for me and now i'll probably want a gap between this and the next bit as well so i'm just gonna go ahead and put a margin there so now the next step is i want to make two columns uh have these become headers and then have this slightly it looks like slightly lighter gray than black so it'll be a dark grayish color with these text and they'll just be two little sub elements let's go ahead and make a grid uh to hold this stuff and for this one i'm actually going to bring back the border so we can see it more clearly border and then it's going to be a border red 500 so i've got my element there it's just an empty div right now and i'll put this two elements into there see how we go okay so now they're in here so these are right now sort of flattened out in the same element let's wrap this one and this one each into their own elements so i'm gonna make a div for each of them and put them in okay and now i'm gonna create a grid column for these two actually before i do that i'm gonna make these sub elements have borders as well so we can actually see what's happening to them okay so we can see the two borders between these now now let's turn this top one into a grid and if you remember how we did that before or just looking at tailwind uh type in control and then grid grid columns we want two columns this time so grid columns two we also need the grid class to tell tailwind that it is a grid so we want grid with grid columns two okay now there are ones on the left and one's on the right let's put a little bit of a gap between them so maybe a gap of just four units four tailwind units whatever that is and now we can style these elements uh i might just style one of them and then copy the style over to the other so first of all we want this header to be a little bit bigger let's make it text to excel it looks a little bit bolder as well so why don't we do that okay usually with header it's good to have a bit of space between this and the text element that follows so i like to put quite a small margin as well i'm not sure if they did that here um but i think that looks a bit better than if it was cramped up yeah i think it they did the same here because there's quite a bit of a gap between the header and the paragraph and this is just one of the things um why i like if you're learning to just copy existing designs or good designs because you pick up on little things like this that you might not figure it out on your own or have the idea to do on your own until you see and realize that hey that's something that people do and there's a reason for it and this one i don't think we have to change this much i just think that it's slightly bigger than the normal size so maybe a text large at least at the screen size i think that looks fine and i think in their example all of these elements um these text is not exactly a black color it looks like a slightly dark gray to me that's pretty good because it creates a kind of depth to the text so not everything looks all the same so let's go ahead and put a color on top of all of these and i'm going to do that actually at this very top element here where i have the grid and the border just because um i think i want the color to apply to all of them so we'll do a text slate maybe 600. okay i think that looks a little bit better it's a slightly softer color than pure black but you can still read it and i'm just going to go ahead and copy the style down to the other class here so we have them okay and then just go ahead and remove the border so i noticed they actually do have quite a bit of a bigger space between this element here and ours so i'll just go ahead and do that as well because i do think that looks better okay so just comparing them side by side i think that doesn't look too bad let's keep on looking at ways to improve this so uh first of all the big one is this background image uh there's a couple of things to notice about this as well is that this background image seems to have this dark edge over here where it's black and then it just kind of fades i don't think that's part of the image i think that's a background layer on top of the image just to make the text stand out a little bit more here so we can try to do that as well but first let's just put a background image instead of this plain background that we have uh so if i'm mocking up a website what i like to usually do is just go to unsplash.com which you can find free images for and i'll just search for something like mountains or you know whatever i want to use as a background here's a free image to use i just went and found an awesome mountain image that i've downloaded here and i've put that into my project so let's go ahead and add that now adding an image to a background like this is actually not a tailwind thing i think tailwind deals with css and css styles but when we add an image we actually need to reference a file from the folder directory for this i'm gonna do it just using uh regular css which i searched on google how to add background image and there's this code snippet here so that's what we're going to do so i've renamed the image mountains.jpg and i've dragged it into my source directory in my project here to use this with react i have to import it first so i can import it at the top of my my file here i'll say import mountain image from then it's just going to be mountains dot jpeg is a css style so to inline this into my app i actually have to create an object to hold this style so i'll call something like this background image style it's going to be an object let me just close this folder i don't need it anymore and then i'll have this background image url but in typescript we don't have dashes we just use camel case instead and this has to be a string so i'm going to turn this into string with back ticks because we want to preserve the double quotes but this part here going to actually make it mount an image that we imported earlier okay so now i have a style object with the background image property being set to this url string and i've replaced the url with this import that react is going to resolve for me so this is going to turn into the url that i need for this image to appear and then to use this style i go to the div that i want so i want this div here with the slate background so this div and i'm gonna create or i'm gonna tag its style property with that new background style i created so you just saw that change it's the background image you can't see it yet because it's zoomed in all the way like this so we're gonna have to adjust that next by using a couple of other properties so here i want the background size to be cover let's set that and see how it looks okay i think that looks great so now we actually have our background image and it looks well sized for this space and as i mentioned before there's also this dark gradient here on this left side which i think looks really good because if you look at our image some of this text is hard to read because it's just contrasting against really light parts of the image but this side we don't really have any text so it makes sense to have this go from dark to light so how do we do that so we go to tailwind and look for gradient gradient color stops then there's a couple of examples here uh if we just look at an example like this uh so this means a background gradient to the right so left to right from the cyan color to this blue color but we want something that's from a black color to a transparent color but we can do that but first let's figure out how to get a div in position so that we can actually use this gradient so here i think that because the image style takes precedence over the background style we can't really use the same element because you can see this slate color is completely overwritten by the background image so i'm just gonna remove that property now and i reckon what i'm going to do is create a class inside this div and then have that be the gradient background so now i'm going to copy this gradient snippet i have from tailwind and just put it in there and this gradient works but our padding is now in the wrong position it's it's padding the gradient as well so that's an easy fix i'm just going to move these padding elements from this top div down to this div where i actually have the gradient like like this okay so now i have the gradient in the same position i just need to adjust the color so the from color is pretty easy it's uh from black and if we look at the gradient page here there's actually from transparent so i'm guessing there's also a two transparent but there's quite a lot of them let's have a look two transparent oh well actually here there's a there's a little section that actually is dedicated to fading towards transparent says gradients fade out to transparent by default without requiring you to add a too transparent explicitly so we don't need to add this if we wanted fade to transparent all we have to do is just write this and then write the from color so basically if we just delete the destination color this should just work and there we go we have this black gradient now fading to this nice color and i'm pretty happy with the way this looks as an image now that we know how to use gradients let's go ahead and apply this to the button as well because if you remember uh the button here on this airbnb website actually has a very subtle gradient so let's go ahead and add this to our button which is kind of boring plain red right now so i've added bg gradient to right and then i'll need a from color uh and there's a lot of colors in tailwind actually if you type in uh tailwind and then do color palette and you see the default color palette you'll see how many different colors they have so we'll pick two reddish colors maybe this this pink color and maybe this orange color and then have them fade between the two okay so now this button looks a little bit more interesting it's fading from sort of like a pinkish red to a orangey red color now a lot of the times when you're designing a site you probably want to customize your font as well to pick font that looks right for the design this one is currently using the default ubuntu font which i i personally really like it but if we compare it to the airbnb you can see that it's slightly different this one's just a little bit sharper a little bit more clean so if i want to create this look then i would need to apply a different font so how do we do that with tailwind let's go back to the documentation and type in custom font so here we go using custom font family values and we'll have to change our export file in the tailwind config we've changed this before when we set up the project we'll have to add this font family uh property to it and then we can choose what font we want for what the default one is sans so we'll just have to replace that with a value that we want but first let's go ahead and pick our font from somewhere i like to use google fonts for this if you just type in google fonts google has a lot of free fonts that we can use in their google fonts website just search for one that you want here personally i like this one i think this will fit the style so this one is called poppins so if you click on it it'll take you to a page where you can press the button to select the style this will add it to a palette that this google side will give you a snippet to download and use in your project so i've added the regular 400 and the bold 700 to my cart and then if you go all the way to the top and view selected families there'll be a pop-up here and there's a link that i can use this will embed it in my website so if i copy this link just this whole section here i can go back to my react project go to the index.html and then just paste the link here so when my react website loads for a user it will download these fonts from google and they should be ready to use uh so the font family is called pop-ins and we're going to remember that because now we're going to update our tailwind template config to use that font so we go to tailwind config css and this is all empty we have to we have to add it like this so theme extend font family sounds and then this i'm just going to copy this whole section here and put this into the extend part except instead of proxima nova and in fact all of these i'm going to delete them and put poppins because that's the one we downloaded and after that i did that my site kind of blew up i think it just got stuck when i was halfway through editing this so let me just quit this and recompile it now i've booted it up again and you can see that the font has changed so it's this nice sharper looking font now uh so that's pretty much it for adding font and that's how you can do it and then the last thing i want to show you how to do is to add icons and logos like this here important thing to know about icons is like unlike images these things probably need to be sharp and scale really well so i don't like using jpegs or pngs for things like this instead you want to use a vector graphic format something like an svg and that will make it look good and sharp at any size which is what you want one place to get really nice icons from that i've been using is font awesome so you just type in fontawesome.com you can go and browse a bunch of different icons including brand icons that you can download as svgs if you have an account so i'm going to go and search here for the airbnb icon and once i search that you can see that it shows up here and if you just click on that you can see the icon the svg here and how you can use it you can even just download it as an svg file so i'm going to go ahead and do that as downloaded as an svg file and once it's downloaded i've gone ahead and dragged that into my project source directory as airbnb [Music] brands.svg so my file is here now so how can i actually use this let's go back to myapp.tsx and just like the image mounted image we had earlier we'll probably have to import this one as well i would say logo import logo from airbnb brand so now i've imported this logo i should be able to use it i can use it in an image element in html for example if i just create a new element up above here above become a host thing like this like an image element i can just put the source of this image element to be my logo object and that will work but there's a couple of problems first of all it's really big and it's a black color the svg is basically a vector so we can change its color pretty easily even though the original one here is black or dark however we can do that if we do it as an image tag so we need another way to use this image without using this image tag luckily for us react makes this really easy we can actually import this as a react component and just use it directly as an element so i searched the stop online and then i found this code snippet it says import react component as react logo from logo.svg so let's let's go ahead and copy this snippet but adapt it for our code so i'm just going to copy this first part here then put it here instead and now instead of using this image source i'm just going to create a react logo element like that and that should work so let's go ahead and save that and see what happens now so nothing's changed it's still there but now i think that we can actually change the class to change the color of the svg file itself here it turns out that we can control the svg color by a class called fill and then we can choose the color all the colors that tailwind has to offer so fill white and this changes the svg color to white it's still really big though so let's put a div around this and make it have a limited size so let's make its width maybe something like 12 and put the svg inside that div and now that looks a lot better because our element is more appropriate size for this site so i think that's as far as it will go for this project today we've already covered quite a lot of ground going from a plaintext website to something that looks a lot better we've only scratched the surface of what you can actually do with tailwind and how nice you can make your sights look but for the time being i hope that this project was sufficient to demonstrate you know the powerful capabilities of this framework and how fast you can make your content look really good if you want the source code for this project then check out the comments in the video aside from that have a great day and thank you very much for watching