Tailwind CSS v2.0 | Nuxt JS Setup & Install

hey and welcome back to the channel in this video we'll take a look at the install process for nux js with tailwind css version 2. now if you're new to the channel i post up tutorials tips and tricks for web development especially for developers that are just getting started so if that's the sort of content you're interested in please do hit the subscribe button and subscribe to the channel a couple things you should know before we start you should have node and npm installed i'll be using bs code as my code editor and if you're on a mac and you need help with your web development environment i have a tutorial series on my channel to help you set up your mac for web development focusing on the terminal node get vs code and much more you can check the video in the top right corner over here and i'll post it in the description down below and you should know a little bit about nux nuts is a views framework now i would say the major feature that got it popular was the ssr server side rendering this allows single page applications to get rendered on the server side before it gets rendered on the client now that doesn't sound like a big deal spas are not seo friendly they were primarily used for web applications and not for standard websites but now with ssr that's not really an issue we can use it as like a jam stack or a static site generator i'll go through more nux features as we go now let's go over here and click the get started button we can install nux using yarn mpx or npm i'm going to go with the mpx route here let's go over to terminal i'm in my project folder let's go mpx create nux app i'm going to name it pw2 dash nux gonna ask us some questions here i'm gonna name it that i'm gonna use javascript npm for package manager it'll win css because that's what this video is about i'm not going to do this because i think it's going to increase the install time none of that no testing i'm going to use universal ssr let's do static we'll turn that on and yep yes that's installed go into two into that i'm going to open up vs code okay let's serve it up up terminal do npm run dev and let's take a look at the package here while that's setting up and we have these scripts here for dev build start and generate nux also installed this dev dependency here for tailwind css and this is nux's official tailwind css module for setting up tailwind with nux over here here's nux this is the default application here i'm going to cancel out of that and we'll close this for now this is the tailwind css nux module this will show us how to set up l1css with nux we've already done this because in our install process we configured it to use tailwind css what we need to do now is right now it's running tailwind css version one and we need to install version two and nux doesn't use post css 8. so we'll have to go ahead and install the compatibility build within l1css this is for people that have installed it normally and figured out that they didn't have post css we can start at this step here i'll grab that i'll do npm install dash i'm going to install it as a dev dependency and i'm also going to install a couple other things i'm going to install sas sas loader and i'll win css forms let's take a look here now we have tailwind css the compatibility build installed sas and the sas loader these two post css auto prefixer oncss forms and if you want to learn more about the tailwind css forms i have a video on my channel i'll post it up over here you can click it on the top right here and we have the nux tailwind module let's go over here and create the tailwind config file so we use mpx cli latest we do init this will create our tailwind css config file it looks for the tailwind css nux module looks for our css file in assets css and they name it tail sure so over here looks for the source css file here assets css tailwind css and it looks for this tailwind config file so pretty pretty standard on how it's normally set up on other frameworks yeah let's take a look here and this is a documentation on how to install they use yarn here but we used mpm instead yeah that's pretty much it here let's look options here and you can find this site at tailwind ss.nuxjs.org and i'll post this in the description down below as well let's go and create our source css file that and that's it that should work take a look at our config no one config so this is the recommended tailwind config here i'm going to grab this i don't want to type all that out put this in the purge here i'll add mode and this looks for all the views layouts pages plugins nuxconfig and here's some typescript stuff this may not all apply but good to have it in there you may if you're using it as a static site generator you may look for markdown for md and you can add that to here if you want and dark mode leave that as is some other stuff i want to add we can do let's do colors we'll add this is the extended palette extend it by doing colors i'm going to add emeril felt it right i'm going to override gray with one of the new color palettes blue gray so this is going to be a new color palette and this is overriding with a new one of the new color palettes and i'm going to add a plug-in here and be required that when yes and this is the tail when css form a plug-in and i think that's what i wanted to do in here and there's no post css unless you wanted to add your own post css plugins but for our purpose we're not going to be doing that hopefully there's no errors here we'll figure it out if uh it'll tell us if there is now let's take a look let's go to pages or index and here let's get rid of a bunch of this stuff this css can't have more than one element and have it like that it has to be contained within one so let's call this wrapper and here it gives us a comment where we can use the add apply that's good i'm gonna do that grab this and in here do card one dot i'll do span dot next enrolled under i'll do next yes and p l s s e o that let's serve it up and let's do npm run dev and as that's going let's take a look at the nux config this module is added here if you're wondering how it gets added to the nux they go to the next config and there's some configurations here that you can change all right let's take a look at what we have and we have here and let's add some other stuff and do here lang equals s css and this is the sas and the sas loader we installed with npm we'll scope it to this view and let's go and add card we'll also add title what happened here it didn't like that let's do add apply do text 6xl let's go ahead and do add apply and rounded large x emerald 500 eg emerald 100 we'll do shadow large save that and there we go we got our next js tailwind css version two uh setup and installed and that's pretty easy to set up nux with i set up tailwind css with ducks and that i think that's probably because there's an official tailwind css module for nux and if we go over here to the github it's maintained by sebastian and he is the creator of nux we can assume that this module unless something happens to tailwind and he doesn't support it anymore but he's maintaining and there's contributors here as well that is maintaining this so it should be pretty pretty up to date with what's going on they added something i think recently maybe even a couple days ago go type in tailwind so this will give you all of your colors that you're using within your l1 css build and you saw that i added the emerald and i guess i also replaced the gray i can't really tell i think normally the gray's a little bit bluer than this so i'm assuming this is the true gray and you can click on any of these colors and copy or copy it to your clipboard i don't know how useful this is but it's something fun that they added to it okay so let's go back i want to go ahead and create a couple of components and pages just to show how easy nux is let's go ahead and create some pages we can right click and create a new file here i'll do an about.view copy this let's change this to about let's create another file called login i'm going to copy and paste the markup for the login page if you want to know how i created it i have a tailwind forms plugin video i'll post it in the top right corner over here if you guys want to take a look at it now let's go ahead and create a component and it's very easy to create this stuff with nux i can go ahead and let's delete this i'm going to create a file called app bar you let's quickly create something here and i'll do nav dot logo i'll do another div and here i'm gonna do we can use this next link to equals plus button and duplicate this login vote login okay so we have a navigation here let's go and create some styles for this now i'll do a nav add apply and do flex justify center items center y 2 actually this is center x 10 x 5th full g white shadow large we'll go adding four on bold i'll do button x4 y2 x spray 500 rounded i'll do hover and with still and css2 you can use these pseudo classes now with hover you don't have to go and create a hover like btn colon hover as another add it right to the apply now emerald 100 another hover just like when you add them as classes within your markup 700 and i'll do here and this is a special class this is next link that active and this will give us the active link i'll do bg emerald under x 700 hopefully that's all good look here and i can apply this to added to this layout here and this is the default layout the only thing i want here is my bg gray 100 and i'm going to add it here app bar let's save that okay so here's my page not what i wanted class here this needs all right so we have that and about in our login page and this is using the for uh tailwind css forms plugin and here's an about page here's our home page and look how easy that is to create components like we created this app bar component we don't have to go ahead and we don't have to add it here it just knows that it's there and this is a new feature within nux it wasn't always like this you would have to go into and add it have to go in add it to here within your script before but now it just automatically uh brings it in if you set your next config here auto import components equal to true nux also auto generates our view routing for us based on our page components if you're using state management the view store is greatly simplified as well with the view x nux definitely simplifies building view apps allows us to focus more on the development i wouldn't jump right into nux definitely learn javascript first then views then nux would be like learning tailwind before you know css you gotta know your foundation before you get into the frameworks let's take a look at the build process here we can cancel out this i think it's npm run generate and take a look at npm package so there's a couple of scripts here dev is what we've been using build is builds it and i think it puts it into this dot next folder and start does what dev does but uses the build files and generate actually builds out a distribution folder okay so that's done we'll take a look the file is there's no css file it's just they embedded it into the html so there's no render blocking when from the css so it makes it faster now let's go and do a serv list opens it up it's the same we have our localhost 3000 that we had before and we have our 5000 and let's go to about we have our login small thing i noticed these aren't hovering or they're not active when you're on the right page let's go take a look in the app bar a link is named wrong i put ling instead of link if i save that that should highlight now and if i go about that should be there and those are not highlighted now when i'm on the home let's do a quick recap here we installed nuxjs through mpx using create nux app when we were setting up the app we specified that we wanted to use tailwind css and it installed the official nux tailwind module the next tailwind module uses post css 7 and it installed tailwind css version 1. we needed to go ahead and install tailwind css using the compatibility build over here compatibility build and we installed this we also installed sas and the sas loader and we installed tail one css forms for our login page so we're able to use sas within our pages here within our plugins using the lang playing css and we use the elon css forms plug-in within our config so that's pretty much it for setting up nux js and tailwind css you guys have any comments any questions let me know let me know if you want to learn more about nux in general yeah just comment down below and i'll talk to you guys in the next video hey if you've gotten this far thanks for the support this will help the channel grow if you enjoyed the video please remember to click the thumbs up button and leave a comment down below to stay updated with the latest content from the channel you can subscribe by clicking right here in the middle

Channel: codewithchu

Views: 4,507

Rating: 4.9682541 out of 5

Keywords: Install tailwind css v2 with nuxt, building vue app using tailwind css, setup nuxt and tailwind css, Install nuxt and tailwind css, tutorial nuxt and tailwind css, tutorial vue and tailwind css, nuxt and tailwind css, install tailwind css nuxt, tailwind css nuxt, tailwind css PostCSS 7 compatibility, tailwind css Postcss config, tailwind css config, tailwind css v2, tailwind css, nuxt, vue, tailwindcss, tailwind, code with chu, nuxt js, tailwind 2, nuxtjs

Id: z3VcXnk06p4

Length: 21min 14sec (1274 seconds)

Published: Sat Dec 05 2020