Make a React Website with Tailwind CSS Tutorial

yo what is going on everyone so today i'm going to show you how i made this super simple website with react and tailwind css so let's take a little tour right here a little animation effect going on a little bounce button right here and you see the website is gonna be excellent so pretty much here that's just a little hero section and i got some basic image so this one's kind of like an intro i guess video just showing a little basic template and then you know if i shrink it over here a little more menu nav drop down and nothing fancy just wanted to show you do some basic stuff with tailwind css and react but i might make one that's much more detail complex later let me know below if you want to see that but for now this is going to be like an intro videos now let's go in and hop into my code editor so i'm going to show you how i made this all right so here i am i have my vs code editor open so go ahead and open up your code editor and if you want to make sure you have the exact same screen as me then i highly recommend you use vs code for this video so i'm gonna make everything from the terminal if you aren't comfortable with that then you could just make like your own project with a folder and drag it into vs code but let me just show you this way so i'm gonna do command j so here i'm on vs code and i have all my files where i keep them on my project folder so for me i'm going to cd into my desktop first and then i'll cd into my project folder so this is going to be different based off of your setup so if you have it in like documents or downloads or whatever that's at go ahead and navigate into that folder and then for the creating the react app we're just going to go and type mpx and then create dash react app and then he'll just say tailwind cs dash react dash version one and i'll put yt because i don't know if i um pretty sure i made this exact same thing already and then that's just the name of the file and i'll just do double and and then i'll just say cd tailwind css dash react dash v1 dash yt so this last and the double and cd you don't have to do that but this way once it finishes creating it it'll just automatically navigate into my project so it just saved me like one line of code and cool little shortcuts so let me just press enter and while that is loading i'll just show you on the right side here i have tailwind css so ideally if you are watching this i would hope you have a good understanding of css if not then you might be super confused but pretty much if you have a good understanding of css then you basically can follow along this pretty easily and also we're going to be creating everything utilizing the documentation i've seen a lot of other videos and i'm not sure they're using like a previous way of doing it or uh like an older version but the way i'm gonna show you is at least to this date the way i did earlier today and it works just fine so in case there's any updates in the future then hopefully somebody can leave a comment showing how to update it there but once it finishes i'll see you once it is done alright so that took forever but it is finally done and notice when i did the cd and part it already shows up in my file so if you're not in your actual file then obviously you'd have to type this line here but we already did that and since i'm using vs code and also since i have it open at the same time i'm going to open up this project by doing code dot and then i have to do dash r because i'm using vs code if i had my terminal only i'll just do code dot and open up a new window but i don't open up two vs code windows so just doing that line right there opens it up and here we are in our project so pretty much typical create react app so before we get into anything let's do command j and then if you want to navigate over to tailwindcss.com go ahead and do that and pretty much i'm just go ahead and click on get started and we're going to use the docs for this so that anyone can like check out any updates or any changes that way they know how to set it up too and i go click on reading the docs here and as you can see there's a bunch of different options but since we have create a react app we use this one so just click here and pretty much you can see it tells you what to do so we already did this the mpx and then we also navigated into our project so now we want to do is i'm using yarn if you have mpm then you can do npm but for me when i do fpm it takes literally light years forever to take uh to load up so i just i usually just copy everything past npm install so just copy this command c and i just do yarn add and i'll just paste that in and i just press enter and then let's shrink this right here and then here it's going to say right here that this part posted s8 it doesn't uh work well so you have to actually install some more things and then basically we're going to use this theme called craco and what we can do here is let me just copy this part here again if you don't have yarn just literally copy this exactly just do npm install but i'm going to do yarn add and i'll paste that in and then press enter and if you want to learn more about this you can click on the link or just quick google search and then we'll scroll down here and once it's done let's go to package.json really quick and check so we got tailwind the craco crack i don't know how to say it but uh you can see everything has been installed and then if we go to our scripts we have these scripts right here so right now what it's saying is we need to basically delete everything in the red and replace it with green so here let's just copy this right here everything in the green and then we have from start to test we'll have to delete these three lines here and then we'll just paste in the craco code here and then we can pretty much continue scrolling down and now it's going to ask us to create a craco.config.js file so let me go here and then go on the root and do new file now we're going to say c r a c o dot config dot j s i'm going to press enter also let's make sure we save this package json file so i'll save that there let's exit off this terminal real quick and then let's go to craigo.config and then we just copy in this code right here just like the docs say so let's copy this we'll paste that in here and save it and then we'll continue scrolling down and then now we need to add this line of code so let's copy this so this is mpx not npm so there's a difference so then when i paste this in i'll just paste it in and then basically what it does is creates this config tail and config file and then we go over here and we need to purge at this line of purge to save up on some file space so then here let me just make sure i copy this whole line here and then pretty much like it says again replace the red with the green so we'll just paste that in here and we'll save it if you want to look up more details on like purging those css you can check it out and then uh here we'll continue scrolling down and now let's open the index css file in our creator react app so let's do src index.css and let's just copy these lines right here this three here now delete these and just paste these in and then we'll scroll down some more make sure that you have the index.css imported so it should have already been since we have the create app so we got it right there and then we'll pretty much we can do this so now we can go and also i have uh i'm gonna create it dot e and v5 because watch when i run yarn start it shouldn't run me that error so watch this let's do it now because i already know it's going to say it dot env and then they say that script uh skip free flight check everything so we'll just paste this in here and then we'll just go up yarn start again and then this will basically open up the tab and i already have it running so let's actually let me do this do ctrl c actually let me just do yes and here we can see that the react logo everything is working so the only thing now we need to check is did tell when css actually get installed so let me exit off here right now my my my computer fans going crazy i don't know why but uh if you can hear that just ignore the background but go to app.js let's just type h1 really quick and let's just be like yo let me save it also let me read this logo really quick don't need that line there and i'll just delete this logos vg don't need that there so yeah let's refresh make sure okay so now i'm gonna go into the h1 now if you've never used tail and css don't worry it's if you know css already it's like literally just putting class names but uh let's just test it out to make sure we actually have it working on our react edge let's do class name since we're in react equals two and let's just do a a font code let's do text red dash 500 and if we did everything right boom it changes color so if this all you needed then again you can go crazy and then start editing your own designs but uh now let's go and let me show you how i created the website that i showed you earlier so first thing is let's go to src let's do a new folder and let's just make components folder here also let's do another folder let's just call this one images and let's do another folder here and let's just do pages so it's fairly basic and uh let's go to components now let's just create a navbar let's do navbar.js and then we're gonna have another file i'll just have hero.js and then a new file again i don't really know what to name this so i just called this like content that's basically just the images with like the menu items again you can rename these but out here and go new file again i'll have a drop down dot js and then last but not least we'll just have a footer so now let's go here and also go to the extensions right here make sure you have es7 type it in and then make sure you have this snippets plug-in here because we're going to do those shortcuts so let's go ahead and just type in a f c e and then press tab we have the nav going here so let's just type in this h1 here say nav bar and add that js let's erase this let's just import it for now i'm going to create a uh also cool trick is if you before you press like anything if you see it highlight or if it doesn't highlight like you miss click and you do control space so highlight it again just press enter auto imports for you saves you some time boom got the nav bar so pretty much let me just show you a quick styling really quick with tail and css so here let me just exit off these pages and like i said i'm going to move i'm going to move all these into a home page but for now let's keep them on the app so here well let's do this let's import link from let me do uh react router dom i don't know if this is like a new update let me know in the comments below but earlier when i was making the site i didn't even have to install required dom and it still worked so i don't know if that's just like combined now the react app i couldn't see it on the files but in case it's not working then you just have to install this but uh here they're make it nav really quick so let's do nav here i'll press tab and now i'll have a link so this is going to be the react writer link and let's just say egg this is my logo for now and then i just put a two path slash and uh let's save it really quick and uh say yeah i have to do this now so let's do this really quick let's go back to index.js and let's just import i'm gonna do browser router from react router dom and then i'll just pass this wrap it around the app so here you can rename it to router 2 if you want but let's just make this simple and then if i go to app.js let me delete this and then this one just going to be a this one's just going to be a fragment because actually the nav is going to be around everything let's do this and we'll just save it for now make sure let's see if this works yeah okay we're fine yeah so we're good for now and then we'll add my rats later but pretty much let's just start styling this show you how to use tailwind and then let's add a class name so right now let's say class name equals to pl dash eight which basically padding left eight so we got a little pattern spacing and uh for this video i'm not gonna go like super in detail like what each clasp means i did my beginner one where i did the chasm on css but since it's react hopefully you guys know how to like re um read the docs but anytime you need help just literally type in um like padding and it'll show you all the like the actual styling values over here i'm just gonna straight up go and type my class names and then you can follow along with that so then now let's do this under the link let's just add a another div and then i'll have a class name so px-4 so that's some padding and then we'll have cursor dash pointer and then i'll have for the medium screens we'll have it to be hidden and i'll just press tab and then basically in here this is going to be an svg so go to slide heroicons.dev it's basically made by same dudes with hill and css you can see this guy right here and pretty much you can just copy and paste icons so like here i just type in menu not e what is that men you and uh click on this one but uh before you do it let's see if i can um where's it at i can't see the the options yeah it looks like it's still yeah so it says here click enable copy svg okay yeah it's already had to click so basically for react that if you're first on the site it's not going to be clicked so make sure you click to enable copy as jsx if you're using react because like certain class names and values are named differently and they're just going to run errors if you don't copy it with the jsx value so let's click on this menu and literally copy code and then we just shrink it and this is basically going to copy an svg code so i can paste it and see since we clicked the jsx option it shows a class name if you did regular svg i mean uh without the option click it just say straight up class and then like these values here would be like um dashes i think so here let's save it and you got a little bars action here and then notice how i put md hidden so on large screens it just disappears so that's basically the responsive way to do things and then under this the right below the or above the nav do another div so let's do dots and we'll do padding right dash a so pr 8 dot m d colon block and then dot hidden so by default i want it to be hidden on smaller screens but on basically tablet or seven i think 728 pixels and up or 768 and up it should be uh displaying and then here are just passing some links so these literally your navs like home about us etc so let's do link dot p four just press tab and then let's just do two equals to slash for now say home and then i'll press shift alt down arrow one two three times change the second one to menu change this to menu then for this third we'll do about changes to abouts and then for the fourth we'll just say contact and contact save it there and uh technically it's not shown because we are not on uh desktop or tablet view so now it's like that so let's do this let's go here and let's just style this so let me do command b let me shrink this a little bit because it'll be hard to show you at the same time actually no that's not a good idea i'll just screen my screen but on your screen you if you have like two screens you're probably able to see it if not or just keep dragging it but uh let's go here let's just style this really quick so the cool thing about tail and css is you can have all your styles in just one file and it's just like super easy to do everything so let's do class name on the nav equal to let's flex these menu items so actually let me see if i can um instead of doing this let me dip this off let's just take off hidden for now so you can see it because you're gonna be like what was going on so let's take off hidden on the menu and then we'll do justify dash b okay spell it a tween and then we'll center the item so this base i think is a line it should be a line item center and then we'll have the height of this nav bar to be h 16. bg will be white text will be black position relative uh let's do shadow dash sm so a little shadow by saving now you see a little shadow little line right there and then just font dash mono so there's three font choices right now and this one i'm just gonna use for now and then also let me just outside this course let me just add a roll equals to navigation and there we go and then totally this shouldn't be showing on mobile but i just doing it so you can see it and then pretty much if i scroll this out here it kind of looks like this so now let's go and try it should uh that's why it's not standard i put item should be items okay sweet there we go and i think that's pretty much it for the nav like it's super basic so let's go back and let's add hidden back to here save it so there we go and then shrink it out there we go so we're gonna add the functions too to update the state and everything later but uh let's just start basically with this and now let's mess around with the hero so let's go here command b let's go to hero rafc e and then pretty much let's just erase this let's do dots bd dash whites dot h dash screen so this makes it a hundred viewport width then let's do flex dot flex dash column dot justify dash center dot items dash center and then press tab then i'll press enter here and then in here again this is just basically like centering with flexbox here let's do h1 i'll do dots i don't have the text large so i'll do on large screen i'll have lg colon text dash 9xl and then on medium screen so i'll do dot md colon text dash 7xl and then dot on smaller screen to do dot sm colon text dash 5 xl and then on just default like after smallest value dot text dash 3dxo and then i just have dot font dash black so this is like in terms of like boldness is like the max 900 value so things like font weight and then dots margin bomb dash 14 press tab throw a bunch of crazy classes here and then we'll just say so i can't believe i'm just about egg cell wet egg so i'll put eggs select i don't even know what i said at the beginning oh well it doesn't matter all right so now it's basically invisible so let's go to app.js let's go here hero enter and hopefully import you import it save it excellent i can't believe i missed i missed the x so i don't even know what that means people probably feel like i mean what are you talking about anyway i fixed it i think excel i don't even know it doesn't matter here let's go here underage one so also you're like whoa what are these lg's mg md sn what is that so pretty much that's just the way i made it to where it's shorter responsive you know better ways definitely let me know in the comments but like see how it just gets bigger bigger and then when i shrink it does it like this you're gonna be more in the docs in terms of like those values but that's pretty much it and then here let's do uh let's put a link in here so let's do link and uh let's do this first let's import it first let's do import link from react dash router dom switch that to a link and close the tag let's close it out let's just say order now i'll save it and now when i add a little shopping cart icon to the end of this let's just add uh let's just do cart shopping cart make sure we got yeah here jsx go back and i just pasted this right after the order now and then we'll save it and then for the link we've got a lot of class names to add here's a little link in the comment be it close out i'm gonna say class name equals two quotes so padding so py dash six and then i'll do px-10 and then we'll do bg-yellow-500 so let's add it right now you can see it so right now i'm just making a button and i want to be rounded dash full so i save it looks like this and then we'll just make the text large so text 3xl and then we'll do we'll have a hover so we'll do however you hover colon and bg dash yellow dash 300 so now we got a little hover and then we'll do transition space duration that's 300 ease dash in dash outs and then we'll make sure we flex them then we'll align them center so item center and then i want to add this cool animation called animate bounce they have a couple or a few animations and this one just like the one that makes i would say it just shows you how to use it and then for the svg the icons like touching the the word so i want to go into the svg and let's do margin left dash four so a little margin space there we go and that's basically how i made this super simple hero section so now you can uh play around with this but yeah like the animation there you have some pre-built ones and then let's do command b here so let's go to content so content right here r-a-f-c-e and i already have some images so uh so i have my github link in the uh bios you can actually uh get these or just you literally go to any like not copyright website for images or doesn't matter you can use regular images for this but uh let me just go and get to my my folder really quick so i can drag these over just save some time so i'm gonna drag in my two images over here so i'll just drag these in and what in the world it did not drag in the right spot let me put them back where they belong so here yes these are just like pictures of eggs and these are vertical so like uh i mean this side is so basic so uh you can go and refactor this styling but let me just show you how i did this so here let's just do uh we got a div and let's just say i'm g let's do dots i'm gonna say h dash full for the height i want to be rounded just the borders of the corners but not like the button and then we'll do margin bottom dash 20 and then i'll have a little shadow and i'll just tab and for the src there's a cool way and i think this is the way that works i think for most people there's other ways where you do like the requiring all that and for some reason a lot of people have issues so i found that if you curly braces and then just like come with your own names like image one then i'll just put egg and then if you just import it at the top imports image one from dot dot slash images slash egg dot jpg and i just do shift up down again i say egg two and image two so pretty much that's like the easy way i found that majority of people have been able to import images with reacts and not have issues so hopefully that works for you and then under here we'll just create a div so let's see dot oh i should just do div here press tab and then for the divs actually so let's add this let's go class name let's say class name equals two quotes flex flex dash column justify dash center and then item dash center and then for the the top div let's just do class name equals to flex space flex dash column justify dash center items dash center bg dash white h dash screen font dash mono and then py-40 so padding and then if we save it now that's what we got so far and pretty much this little like my um formatting saves it oh so close let me erase that and then here just put like h2 and let's say egg i'm often doesn't matter what you put here and then i'll just set a class name equals to text 2xl so slightly bigger text and then margin bomb dash 2. so we got this and tell you can't see it so let's do this let's go to app.js let's pass in content so control space didn't import for me so i'll do there save oh there we go so now we'll go and under here say p dots margin bottom two so it'll be two tab crispy delicious and you try sure and then under here just put like a little spin and just put dollar signs 16. so just basic design but uh the reason i want to do this because i'm going to copy this exact same thing so right now get this entire div and then just paste it so i'm only doing this for example purposes but uh normally i'll like map through like data so i don't repeat but i just wanted to show you this thing with tailwind css just for this video and react is not like when you do this when you have your saw div on div so you can do fragments around them or just include a normal div and that should fix it so here's the second one and then i'm gonna change this to image two let's save it so now you can see the two different ones so let me just change the name really quick so let's say egg salad and then price to put 18 it doesn't matter it's just for examples and uh here so you're probably wondering like well actually you don't even probably probably not even wondering but uh basically right now actually yeah make sure yeah okay let me shrink this i think it's yes they're messing up my view of it okay so right now you're you're looking at this and you're like man these are a lot of same classes and like you're basically copying and pasting the same thing so imagine you had a bunch of these where it's just repeating it'll just be a pain to sit here and type in and it's crazy so cool thing is with tailwind is on the index.css we can actually add these uh values so i go here to uh here just type in apply press enter you can see here you apply that existing utility class into your own custom css so basically they call it supply directive and uh for instance like here i'm on index.css i'll just say dot and then you call this like whatever makes sense to you so i'm just calling this the menu card and the curly braces and then you say add apply and then you pass in the values so here this is like the div for the card so i just basically let me do command b these entire values here i'm just gonna show you copy them so just copy it and then just the first one because um we're just gonna copy that for the second one so here i just press tab so now if you go to content i erase this i just save it the since we're react to it just automatically formats it with just regular html css just like run build again but here so far i just auto saved so you can see the second one has it right here still but this first one's like yo what happened so all you need to do is just type in what we uh called it so i set it menu card and bam look at that it's back to normal and then here same thing on this div we can erase that because this exact same card and i'll just say menu dash card we'll save it and see it work and that's just one more time so like uh for like the text like the this content here the text words we're basically just copying this this uh content here so let me copy this and then here it's called this uh that's international content so ideally if you had a like another file or folder with the same styles then you could just straight up use it on other pages but this site is so basic so i'm only having on here but let's say add apply now just paste this in save it and then go back to content and let's go here highlight it and then do command d and highlight the same exact text that you have and then we'll delete it and then we'll just say center dash content save it and then you'll notice if it shows if not what is refresh just to make sure you can see everything is saved everything looks exact same and there's just way less code and so like globally too if someone else is working on this they can see exactly all these styles if they want to update stuff then like you're set to go versus head match and having this massive file with like insane amounts of class names and then the footer i think that's enough for the uh yeah for that section the photo we'll just do since we're here already there's ref cd and super basic but uh let's just do this right here so let's raise this div let's say dot flex dot justify dash center dot items dash center dot hd16 dot pg dash black dots text dash white then here's put p and then say copyrights and i have the the symbol here let me paste it in save some time and then yeah just put whatever you want here and then we'll grab that js we'll put the footer so say footer slash close it boom got the footer here so the thing we're missing is the uh little drop down menu so let me show you how i did this so first thing is we need to make our pages so let's go here let's do a new file so my homework do index.js next we'll do new file let's just see we got menu dot js new file again we got what about js and i think that's fine i mean we could you could make the third page or the contact when the fourth one doesn't really matter and here index.js let's do rafce press tab change that to home click out of it and then pretty much we need to move everything from the app.js aka by everything i mean just the hero and content so let's do this here content command x go to index or home page paste it here we can just get ready to do so command d highlights gives fragments save it go to hero control space highlights auto imports content control space highlights auto imports save and then for the app now we just do here we'll go and basically wrap everything with a switch so there's typical react router stuff so here we'll just say routes and then the path is to the home slash and make sure it's exact and then components is going to be the home close it and if i go back and see if i type it it'll auto import it for me so import home from pages also get rid of the hero and the content imports you don't need them and then pretty much i need to go and import the switch and the routes from react router dom save it here and technically right now that's gonna happen because like we're on the homepage but um you can see here we're still here so let's do this let's go to abouts and basically let's just say rafc e and let's just do capital a so a couple of bouts let's get rid of these divs and let's just do dot screen dot flex dot justify dash just fi dash center dot items dash center dot bg dash yellow dash 300 dots site just kidding tab there you go and then h1 dot text 9xl dots uppercase dot font dash black tab about page save here and then we can go to app.js and this is just for uh tutorial sake so you can see like what you're on go here shift all down bring it down and get rid of the exact here let's put the about in the components we're going to look for the about page save it now if i shrink this out we did everything right click on the about boom we got the about page home now the route's working so now let's do this again for like the menu and since it menu is like right next so let's just say menu here and uh here before i do that let me uh let me update the menu so it just auto imports for me let's go to about just copy paste it go to menu paste change this to menu and then the color can just be like green save it now we go back to app.js go to here do menu oh come on what happened i guess it does not want to did i not change yeah i didn't change this go back to menu make sure you put menu so that it knows and then we'll go back now let's try it does not want to work oh well we'll just do menu here and then we'll just do shift all down change this to menu and menu save save boom bam there we go menu about home etc so now i've got a routes working you may go for contact if you want to but uh i'm sure you probably understand it by now and last thing is basically the that menu like where is it at so here's the drop down opponent is going to drop down and uh my other sides i went crazier detail made like something completely uh like looks much better but for this sake this is just basic so you can get like idea and then go crazy after that and figure out like your own design but here's the rafce tab let's uh imports link from react and then okay what is going on inside of uh here we basically just have a div and then we have a bunch of links so i can sure to go my nav let's just steal these links right here go by the drop down just paste them and then pretty much we can wrap this div class we'll say class name and set equal to curly brace so if you've seen like style components before then this might make more sense but uh there's just ternary operator like if else and essentially this is just the way to do it at least with uh i've seen with tailwind where you just say whatever your state so your value you want to look for so i'm going to make a function actually let me just let me just do that let me just create it first here how about that let's do this let's just say grid grid dash rows dash 4 text center item that center bg dash yellow dash 500 we'll just save that here let's go to app.js let's just pass in the drop down so here and then close it and now we got the drop down so you actually see what it looks like that's how i started and what i want to do is basically make this hit so uh the way you do this is let's make the function first because you're not going to understand this so here on the app we'll import uh we're going to import reactor tops let's do item or tab and then we'll just say curly brace yeah click brackets use state and they also have use effects so now we actually got something regulated so here i'm gonna say constant again if you've seen you state or uh before then you most likely understand this my first value is you know i just call this is open and then my function is going to be set is open equal to use states and it's going to be false and then here is a const toggle equal to curly brace so error function and it's basically just going to set is open to the opposite of is open and then under here we never use effect and for now actually you don't even need it yet we'll just do this for now but uh here let's do this we'll save it and now you're like how is it going to work so pretty much let's go to the navbar so there's one thing that i want the [Music] the functions that we just created the set is open to get triggered by and that's basically the icon with the hamburger menu so for that it's wrapped with this div right here on nav bar so i can just say i'm gonna add on click equals two co curly brace and we're gonna pass in the function name called toggle which we just created in order for us to actually get this value like how's it gonna know because there's no nothing here we gotta destructure that so i'm just do curly brace and say toggle so now we're passing it in and then it's gonna basically read our app.js and see that we have this toggle here but it can't because we need to pass toggle into the nav bar as well so say toggle equals to toggle and then also for the drop down we're going to check it is open is equal to is open and then also we're going to pass toggle in here too as well we'll save it here and now for the most part this is done but now we're going to go to the drop down because right now like clicking there's nothing happens because we have no logic to trade the drop down so here earlier now let's do this so let me just highlight this and command exit so now we'll do class name curly brace and when the value remember the state we said is open or set is open so say is open if that's true i'm going to do question mark curly brace and do quotes i'm going to paste back in the classes that we just copied which is essentially what it looks like right now the drop down here and so if it's true i want it to show like that colon else i want it to be hidden so it'll disappear if it's false so if i say that nothing's gonna happen yet because it's not defined so we gotta destructure that here and just say is open and then also we have to say toggle two because i want to pass in on this div on click equals to toggle so that whenever i click on a uh thing so i go here now boom we got it and then i click it and you can see it it this part is on click just basically closes it whenever we uh go back and then the last thing is and i just want to add this thing because like if you click it and then you scroll out like it's still showing and that's not cool so ideally usually when i make a nav or the mobile it's like foolish covering and there's like an x so that way it doesn't matter if you max it out there's nothing you can see besides the mode menu but in case you're like trying to mess around with design you can do this little thing right here and we're just passing use effects so i say use effect pass in arrow function pretty much i'm just going to say const i just call function just say hide menu and that's how you go to an arrow function and here i'm going to check if the window.inner width is greater than 768 which is the medium size for tailwind and is open is true so if it's bigger than like right when it changes to the regular menu and it's the drop down is actually showing then i want to trigger this to actually work so then i'll just say set is open to false and i can actually call console.log this too so if i say like three resize here and then inside these effects still we're going to say window.addeventlistener and we're going to check for a resize event so resize and then i'm just going to basically trigger the hide menu and then we're going to return arrow function and basically we're just going to make sure we do window dot remove event listener resize and then push past it and hide menu so i'll save here so now if i click it and then i drag it it disappears and if i do transcript c go to the console you can see i'm not sure why is it saying you think it's not the phone let me refresh that should be done all right oh we got two so what does this say link what do i have a link around 2 value let me search really quick it should be it's not drop down it's probably this one yeah so let me add a link to the hero really quick just to make sure this air goes away yeah so go back to hero jazz make sure you have a two value there it really matter but uh let me show you what i was showing you here so like uh shrink this down okay so when i shrink it and then we see the little map menu right so we open it so right now when i when i once i once it turns like this you see it comes with a log resize and there it goes like that and then basically if i refresh it again you can see it's like there and then pretty much that's it so that is the website so if you did enjoy this definitely let me know in the comments below give it a thumbs up like the video share it with your friends let me know any other css frameworks or other videos you have in mind i'll check them out aside from that if you haven't already go down below hit that subscribe button and i'll see you later peace

Channel: Brian Design

Views: 46,770

Rating: 4.9564853 out of 5

Keywords: react website, tailwind css, react website tutorial, tailwind css tutorial, tailwind css react tutorial, tailwind css react js, react web development, react web app, how to make a website, how to make a react website, react js for beginners, react js, react crash course, react js full course, react js project, react js tutorial, tailwind css ui, react ui, website tutorial, tailwind css navbar, tailwind css grid, tailwind css flexbox, tailwind css website, react, css

Id: gOQ31Kc8H5E

Length: 46min 15sec (2775 seconds)

Published: Fri Jan 01 2021