Eleventy (11ty) Website / Blog with Tailwind and Webpack

what is up guys james here and welcome back to the channel as you can see we have a new setup so in this video we're going to be talking about 11t now if you've not used 11t before it's a static page generator similar to what you can do with next.js or some of the other ones like hugo in the jams deck so what i'm going to show you is how to build a home page a header a footer a blog how to handle data using 11t and of course we're going to use tailwind css so if this sounds like something that interests you stick around as we get into the code so here we are in our application and as you can see from the beginning all we have is just a package.json file with nothing in so what we're going to do is install everything that we're going to need to create this now in this video we are going to be using webpack post css tailwinds 11t and that should be pretty much everything we're going to use so there is going to be quite a bit of install to get through so to begin with let's install the essentials now everything here is going to be a dev dependency because we're not using anything when we're building this because once you build it you can deploy it anywhere you want because it's a static site and just uses html so let's first install 11t so to do that you're going to do npm install 11t 11t then we're also going to need uh syntax highlighting so that we can show cool code in our blog so that's also part of the 11t package so it's going to be another 11t slash 11t if i could spell 11t dash plugin syntax highlight and we're also going to need tailwind so we're going to do um a couple of different things here we're actually going to use the tailwind css typography so to do that it's just at tailwind css typography and we're going to use that to just default uh our stuff to a particular way because the way that tailwind works is you can set each of your h1s or h2s or paragraphs to whatever you might need so in this version we're actually going to use the tailwind css typography obviously we're going to need tailwind so let's just tell in css and then we're going to actually need a few different plugins here so because we're using webpack we're obviously going to need that so you can just go ahead and install webpack and we'll install webpack cli and then we need post css so that's post css we're also going to need post css import and post css loader now this might seem like a lot but in the end it's going to make it easy to create whatever we want with our application um so we're also going to need a few different things here so auto prefixer is a favorite of mine it essentially just adds vendor rules so uh if you have something that you want to run on firefox and chrome and safari and internet explorer if you still have to support that you don't have to worry about like oh did i use the right kind of css if you're using any custom css we're also going to use cross end and that's because i know a lot of listeners out there are using uh windows as i am as well so that we can pass in uh values such as node and production and it's not going to complain that you're trying to stuff something in that windows doesn't understand on top of that we're also going to include css loader and mini css extract plug-in we also need npm run all we don't really need this but it just saves a bunch of time in the long run and just in case you don't want to type this all out i'm going to leave a part of the description with this full install so that you can just skip ahead to the install part and i want to make sure that we get everything uh situated because we don't want to have to keep installing things and that should be all of our dev dependencies you're going to do save dev and then hit enter so once this is all installed and you've installed it on your side we can go ahead and start building our application okay so we now have our package.json done and our node modules installed so let's start framing out this application so first let's create a source folder and that's going to hold all of our source files and then outside of that in the root directory here we're going to create a few files and we'll edit them as this video goes on so first we need a 11t file and that's going to handle anything that 11t needs to do we're also going to have a post css dot config.js file and we're obviously going to have our tailwind.css.js file and of course we need webpack so webpack dot config.js and then let's build out our structure here so inside of this source folder we're going to have a few different things so we're going to have a folder called blog that's going to contain all of our blog files then we're going to have one that's assets for any images that we might have outside of our blog and then obviously we're going to need somewhere to describe where our templates for tailwind css are going to go so you're going to do an underscore here and then it's just includes and then we need one more and that's our bundle file so we can just do another folder and call that underscore bundle so now we have our structure this is how it's pretty much going to look all our blog posts are going to go in here anything else any other pages will just go inside this source directory and then anything in this includes is essentially going to be what we would call templates so we could do a footer and a header we could also do our full layout and we don't have to just repeat code and then inside of this bundle is where we're going to take care of our bundling which is going to bundle our tailwind and if you decide to add maybe alpine or you want to add turbo links or any cool js that you want for your lmt you can do that too and add it to this file so first let's talk about 11t and how 11t actually works so what we're going to do in this includes file here is we're going to create essentially a layout and this layout file is going to be a dot njk file so let's just create it out first so we'll call this layout.njk now if you've never worked with njk files before we're going to talk about them quickly if you've ever used something like liquid templating or pug or any of those it's fairly similar but first let's talk about that before we start creating our files so the njk files or nunjucks is a rich and powerful templating language for javascript so what you can essentially do here is temple out things using inheritance uh macros asynchronous controls um and it's just another version of templating it's really extendable i like to use it uh some people might like to use liquid templating um but i prefer this and essentially you can see here this uh way that it works is that we have like block content here and we can extend out a base html file that contains just the base layer and then you can add your own flavor as you go um you know mozilla uses it it's super popular you can do sort of built-in filters around certain things you can use keyword arguments and then you can transform and use inheritance and it's super quick and easy to get started with so that's what we're going to use so first thing we need to do is actually do our layout file so let's do that from the beginning so here we are in our layout njk file again and the first thing we need to do is make this an html file so let's go ahead and do that and then underneath you can just do your regular html we can do a head and we'll close out the head and obviously we need a body and then we're going to have a main and then in the future we will have a header and obviously a footer but inside is main and we'll close out the body and then we'll close out the html so as you can see right now it looks fairly similar to a regular html file obviously it doesn't look very pretty right now because we don't have indents etc but we can now begin so let's add lang english so that we know that this is english language and then inside of here we're actually going to create a meta tag and let's set that to char set equal to utf-8 and i'm just typing this out obviously we could have used the shortcut to do this but i want to show you how to make it from start to finish we also need the viewport so that we can have a nice responsive website and inside of here we'll have width equals device width comma initial scale equals one so now we have that we're actually going to do some linking here in the sense that we're going to have our bundles set out so just like you'd link a regular style sheet which we are going to do here we need to have a style sheet then the haref is going to be slash assets slash main dot bundle dot css which i'm going to show you how we're going to create that in a minute and then we need one more thing and that's prisma which we're going to use for some syntax highlighting and some code highlighting etc so i'm just going to copy this in and i'll put a link in the description so that you can copy and paste this too then finally we need one more thing and that's the script tag which is going to take our bundled scripts that we're going to create so let's just do that for now and then let's talk about how we're going to handle that so we're going to defer this bundle for speed and then the last piece that we actually need is title and now we're going to use some templating so we'll just do title and inside of here we can just put the title variable and it will take the title from the page and put it in here which will show you how to do as we do a post but imagine if you've gone to your about page then the title will be the correct one so now we've got that we should talk about how the bundling works here so in this bundle we're going to create two files a main.js and then a main.pc ss post css so in this main all we're going to do is import the file we just created so import main.pccs like that and then inside here we're going to import all of our tailwinds so tailwind css slash base and we're also going to import tail wind css slash components and we're also going to need our tailwind css slash utilities utilities that doesn't look great let's try again there we go so now we've imported all of this and we have this main we can actually use this to bundle up so what we can do is tell webpack hey when we get these files we want to do something with them so let's create webpack so first we're going to create a const at the top and that const is going to be path and we're going to require path and that's just so we can take a file anywhere in our directories and be able to use it then we're going to take mini css extract plugin and we're going to say we would require mini css extract plugin which we installed previously and then we're going to use these to our advantage so let's do our module exports here and then say entry is going to be source underscore bundle slash main dot js and then we can set the mode here and the way we can do that is just say process dot n dot node environment and that just basically says if it's one or the other so if it's [Music] development we want to do one thing and then if in production we want to do a different thing so we'll just do module and then we're going to set our rules here and what we're going to do is essentially tell it what we want to use to do anything here so you set your rules like this it's an array and then it has an object i'm going to say test and then it's a slash this way and a slash the other way dot p c s s dollar slime so basically we're looking for anything that has dot pss and only that and then we can use the mini css that we imported at the top here and it has a function called loader and we can say css loader comma post css loader and that will take care of our bundled file and then outside of this module we're going to tell it about what we want to do with all of this bundled files so we just say plugins actually we can just say output we will get to that plugin afterwards but we need an output first and say path is equal to path dot resolve and then we need underscore underscore directory name so the directory name and we want it to be dist comma assets now if you're unsure about what's happening here well the dist file is what we're going to essentially tell 11t where to put our files and the assets is where we're going to store anything else and then we just say file name main.bundle.js and that will be our main bundled file then in this plugins what we're going to do is essentially just take all of our css and bundle it up so we can just do mini c ss extract plugin and then inside of here we can just do file name main.bundle.css and then hit save so now webpack is essentially going to take all of our uh post css stuff and bundle it up into a main.bundle and then it's gonna create a css with everything in it in this main.bundle.css that includes our tailwind so now what we should do is create our tailwind config file here that tells tailwind what we want as some defaults now i'm going to keep this really simple and you can obviously change it as you so wish so the theme i'm just going to make one change here and i'm going to add container i'm going to set it to center true and padding to rem just so it's easier and we can use container wherever we want something to be centered i'm going to put extend in here and we're not going to extend anything but you can as you feel like you need it and then for variants we're also just going to have an empty file here and we're going to extend absolutely nothing now we'll put a link in the description talking about how you can add different things to your file as needed and then we just need some plugins that we're going to be using and the way the plugins work is you type the word require and then you tell it what you need so we're going to need this typography and then we're going to tell it what we want to purge so because we're using 11t it's slightly different than most so we need to do dot slash source slash star star star so anything that's in our source directory any directories we're going to purge.js files then we're also going to need to purge our template files which is under source slash star star star dot njk which is this file we've created here we want to make sure that that gets purged and then the last thing that we want to be purged is any svgs we might have so it's just source star star slash star dot svg now i know we haven't actually seen anything happen yet but we want to make sure this is all configured correctly the first time so that you don't have to spend hours trying to debug the code now for post css really quick one we're just going to do a module exports and inside of here we're going to do plugins and then we're going to do require post css import we're also going to require tell in css and then we're going to tell it where the config file is so it's tailwind dot config dot js and then finally auto prefixer to handle all of those cross browsers that we don't care about so now we have this we can actually start using 11t to do something so 11t just like anything in the jam stack it statically generated files here um and in this version you can actually tell it all sorts of cool things you want to do such as if the um if you want front meta to be have excerpts and things like that it's completely customizable so we're going to tell it that we're going to use syntax highlight and that's going to come from require and plug in syntax highlight then just like the other modules that we've done we're just going to do a module exports we're going to say take in the config and then we're going to create some changes here so config.addplugin means that we're going to take a plug-in and add it in so we're going to take the syntax highlight here and put that here we want to use that then we're going to add pass through copy and that's essentially going to take something from a file directory here and make sure that it gets bundled up with the levante so in this example we're going to use source assets we're going to take that and put it as an assets folder then as i stated before because our blog we want people to look at excerpts so we're going to do a config set front matter passing options and this says essentially like we want to be able to pass something from our blog that we create here in markdown files and be able to use this somewhere else on the website so we're going to do open parentheses here and a set of curly braces and we'll close it out here and we're going to say excerpt true so we want to be able to have an excerpt somewhere and then i'm going to customize our exa separator uh the default is just three lines like this but we're gonna say we want to be able to say dash dash excerpt dash dash so that we know if this comment is there that is going to be our excerpt then we need to configure our templates now if you don't configure this correctly if it's not included in here essentially what will happen is 11t will just purge the files away from you so that you won't be able to use them if you bundle something up like a jpeg file or a png or webp or a markdown file or something like that it will just purge the file out and won't bundle it up ready to be used so i'm going to put some defaults here of jpegs pngs web p's markdown files and our njk files here now you might think that's a bit weird like this is a template but our blog are also going to be built around our njk files and also pages that we create such as an about page you'll be able to use that here too then we just need to set uh how to set the the browser sync so when we're testing so we'll do const set browser sync config and then inside of here we're going to tell it the files are located in dist star star slash star and that will be anything in this dist folder that will get created we want everything inside of there and we can tell it to open true let's make sure we got common there and then our last pieces are here is config set data deep merge to true and then we just need to return something here so now that all the config pieces are done we're going to just tell it return directories is going to be input and that's where it's going to get all the files from so we want everything in source and then what we want it to be outputted as and we want it to output to dist and that's obviously because we're telling it that that's where our files are going to be located and that's actually where we want everything to be built and then you can hit save and now we've configured post postcss tailwind webpack and 11t so let's create a page here that's just going to be our index page and we can see if our index page loads using our layout so to create a new page just in the root you're going to create index dot n jk and that needs to be in the root of your source folder so let's just make sure it's in the source folder and then we can create something here so the cool thing is now is that in this front mass section we can set a title so we'll just say this is the home page and we can extend out that layout so we just type the word layout and then do layout dot njk so essentially we're telling it like any any time this page is loaded we want to make sure that it includes this which is essentially the body of this and obviously we're going to fill out these pieces in a second so that it actually has something to load then we can just do something like section and we'll close out the section here and then inside of that section we can just do an h1 and we'll just say hello to our block and we make sure we close this out correctly and that's it so in theory now this section should display this obviously we need to just do something here so inside of this file what we can do is tell it that we want it to include essentially the body and then anything that the content contains so for the body i'm just going to add a class flex flex column min h screen and then inside of our main we'll also add a class of container flex grow and py of 8 from the top and then what we can do inside of this main we can just do our curly braces as we've done before write the word content and then save and what happens here is if there is content it'll do it otherwise it'll just override them and we can hit save so at this point we're ready to actually test this out obviously we don't have any scripts here to test this out so let's quickly just write up some scripts here we're going to need a build we're going to need a build 11t we're going to need a build webpack and we're going to need a clean so that we can purge all of our files as needed we're going to need a start which is going to combine all of these together and then we'll also do a start 11t and a start webpack okay so our build one here is we're going to take cross n which we imported before and this is basically for windows users and this allows us to do this which is that we can pass in the word production here then we can do npm run all which is a great feature and say clean p and build and this will run clean and then run all of our build commands here so build 11t and build webpack so we can hit save here and then our 11t1 is really simple it's just 11t and then for webpack you just do webpack and for clean we're going to do rm rf dist so we're going to remove our dist folder and then to start we're going to do mpm run [Music] all we want to run clean and then we want to run all of our build commands and then we want to do p start like this and what this will do is it will run all of the build commands and then run the start commands also so for a star 11 t we're just going to do our 11t serve and then quiet and that will build and serve our files there and then for webpack it's just webpack dash dash watch so now we should be able to run our start command here and it should build and bundle everything up ready to go so i'm going to run that command and then i'll meet you on our local host website okay and here we are we have hello to our blog as an h1 and it seems to be working as expected so now we can do is actually start using this index file to create some interesting and obvious changes that will work really well so let's create um our header and let's create a footer and then what we'll do is we'll create our actual single blog post and test out how that works so i'll meet you back in the code okay so we're back in the code and we now have a header njk file and we're just going to create a header and we'll just create an empty class for now and then inside of that we can have a div with an empty class because we're going to use some tailwind and inside of that div we're going to create our nav class so let's make sure this gets closed out and also our header and let's just do some tab work here so that we know where we're landing and then we need a nav and close nav and just like that so what we're going to do is we're going to add some classes here um i want to have text set to gray of 700 we're going to set the background to white we'll have a border on the top and border on the bottom and then we'll set the body font then inside of here we're going to add the container class that if you remember correctly we set here um so we're going to use that along with flex flex column flex wrap will have a padding of five mx is auto so that it's in the center we'll say medium screens items to the center and on md we'll also set it to flex row and this is why i like tailwind it's something that i am still getting used to but it is definitely very quick to build out certain items and it is much easier in the 11t world to use tailwind over other css frameworks so now we need our nav class so it's nav is flex flex wrap and we want the items in the center again we want to justify it also in the center and we want the text base and on a medium screen we'll set ml to auto and md also will be mr auto so that it's in the center so now in this nav class you can just create a tag so we'll just a here f equals slash for now and we'll set a class here to make it nice and we'll just say margin on the right of six text medium font semi-bold and on hover we'll do text gray 800 and then we can just do close this tag out and say this one we want home and then we can just essentially copy and paste this here and say we want three links and we'll have contacts and about so now we've created this nav what we can actually do is go to our layout here and say i actually want to use this in every single time this is used so above our main class here but inside of the body we can add percent signs here and say include header dot njk and then close it out with another percent sign so now if we go back to the website we should see a header so i'll meet you over there and we can talk about what we've done okay so we do have a header at the top and then we have our hello blog here and obviously these links don't do anything right now but we do have a header at the top so let's go ahead and make some more changes and add a footer and then we can sort of play around so we're back in here and we're going to create a footer now so footer.njk and that footer file is going to contain a real simple footer that we can use on every page so we're going to need a footer let's close that out and then inside of that we're going to need a div and then inside of that we'll also have one more div to contain everything and then at that point what we will do is start creating our p's and our links etc to create everything the way we want so what we'll do is we'll add a class on the footer and we'll say we want the text to be gray and we'll set it to 700 background will be white again border on the top and body font then on this div we'll have no class and we'll just use that as a as a holding place and then on this one we will have a class of container we'll have flex flex as a column flex wrap and we'll have a padding of 5 padding on the y of six on large we'll do px 20 and small will do flex row now on the next part in this div that i'm going to create here we're going to have a class of flex flex rat items in the center justify center and text dash base and then this div is going to contain everything that we need so in this div we're going to have a p here and this p is just going to have a class of margin right of 5 text is going to be small text in the center and i'll make the text light gray so we'll use gray 200 and then i'll just say something like uh let's close it out and then i'll put my name here so we'll just say james perkins then underneath this we can start with uh an a-link here and we'll just put the herrera to a pound sign for now and we can decide what you want to use these for so again we need to justify it in the center we'll put a margin on the right of five text is small text in the center we'll make this text blue gray of 200 i'm pretty sure that's a class and then we'll hover we'll say it's text blue 700. and then we can say this is going to be a link so we'll just type the word link for now and we'll close it out then we can just copy this again and now we can have a secondary link and we'll call this link number two and then underneath this div we can create a span and this span is going to contain um something on the right hand side just to fill out the space so we'll do inline flex justify center margin on the top of two small ml auto small empty at the top of zero and justify end and we can say inside of here we'll have another p and we'll have the simmer class as we did before with our other p on the other side we'll say mr5 text is small text in the center text is gray and set to 200 and we can just say creating tutorials for you and then hit save so now we have this what looks really complicated but is quite uh a small amount of code we can go back into our layout folder and say in this layout file under this main we can now do includes and then footer dot njk and a percent sign so this will now include the footer so now what we can do is go back to our website and check it out okay so we're back in the website and as you can see we now have a footer here that says creating tutorials for you with my name and a link so we're sort of building out this index page but really we want to see how blogs work so what i'm going to do is i'm going to create a markdown file in our blog folder and show you how you can create a post layout and handle blog posts okay so i've created a blog post here and i've done a few things i've added some front matter and it's just the title the layout that we want to reference that we haven't created yet a featured image which is a doggo page title this is the other title and then text and here i've created an excerpt and then i've put in some stuff like uh js code python code no codes and tables um h1s and h4s basically just to show you how this all works so what we can do now is in this includes we can create a new file here and say we want a post.njk and this post file is going to handle our posts so first we need to just create that and say layout layout.njk and that will reference this layout file and use it for our pages then all we need to do is create an article and the article is going to hold our blog posts that we have created and it's as simple as that right because we've made this one main layout and yeah it took a little while to get there now we can just reference it all the time and just add little spices here and there of things we want so in this article we're going to add a class here and we're going to ask the class of pros and pros lg and this is the typography that we imported from our tailwind to give us some default styles we're going to tell the max width is 2xl and we'll have mx auto and we'll set bg to white then inside of here we'll have an h1 and we'll say class i don't know py8 so we have pang at the top of the screen and we can just do title and when we can do h1 and then inside of here we can do content safe and just like that we've created a whole new page structure without having to type more than 10 lines total with spacing so now we're actually ready to handle uh what happens when we use this so inside of here we have this layout and what 11t is smart enough to do is to build this page out using that so now if we run our task of npm start we should be able to build this blog post and navigate to the page and it should look fantastic so i'm going to build this and i'll meet you over there okay so i have loaded up the page and we're at my first blog and as you can see it's already gorgeous looking we got h ones that look great we've got syntax highlighting for code and everything looks the way we expect it to so what we need to do now is actually handle uh this being able to be on our homepage because our homepage right now is blank so let's go back and create a functionality that will handle this for us okay so we're back in our index file here and we're going to add a little bit of code here so in the top we can just do pagination we can say data is collections dot post size will be six so that's the maximum we want to reverse this set it to true and alias will be alias will be posts and essentially what we're going to do is create this collection of posts and we're going to take them and use them somewhere else on the page and this is what's fantastic about the way that 11t works so all of our data is available and it's smart enough to know where to grab it from so what we can do now is underneath this section underneath the h1 we can create a div class here and this class will contain our wrapper so what we can do is just do a container and we'll say px at the 8 at the top and we'll do uh playing at the top of 24 mx is auto and on large screen px is four then inside of this div that we have here we're going to create another one and this div is going to have a class of flex flex wrap text to the left and we're going to say percentage four posts in posts so essentially for every post that's in this post file here we want to do a div and we'll add classes here to make it easier we'll do a px of eight a p y of six on large screens we'll do width of one third and md will do width is full and then what we can do is essentially take pieces of our posts such as the images that we have like the the doggo jpeg or the islands jpeg and use those to our advantage to make our homepage look fun and exciting so here what we'll do we'll add another div class around padding of six rounded md bg will do uh blue grey 200 and then we can do an image class here and we'll say we want the object to be cover object in the center width is full height is going to be 40 mb of 6 and rounded so now we have this image we can then say okay for this image the source is going to be the post.url so that'll be from this post we have a url and then we can do post dot data dot featured image and then the alt we can just set to uh for now blog post image so that image tag is now done so we can close that out and say okay underneath that we're going to need an h2 and this h2 is going to contain the title so we can just do mb of 3 we'll set the text to large font semi-bold text to gray and we'll do lg we'll do the text to 2xl and then the title font and say post dot data dot title so we're essentially just saying we want that post title and we can close this h2 out and then underneath it we'll have the excerpt so that someone can read a little bit about the blog post before they start using it so we'll do mb4 text this base leading relaxed and we just say post dot data dot page dot except and then if they're interested in reading more we can actually have underneath here an a tag that says aharef use the post url or url and then we can just add some classes on here to make it look kind of nice so we'll do inline flex items in the center font semi-bold text will set to blue at 700. on medium screens we'll have a margin at one of two on large we'll have no margin on the bottom hover we'll set the text to blue dash 400 and we can just write read more and we can close that a tag out and then we can just make sure that we have everything all set here and hit save and at that point we just need to end our for if so underneath our divs here uh we need to make sure we've closed them all out so this div has a div this div has a div but this div does not have a div yet so let's create a div here and we'll just add a tab here so that we know which one is which and uh in between our two divs here we can just do end four and that will stop the full loop that we have going on and then we can hit save and now we can go ahead and test this out so i'll meet you back on the website okay so we've logged in and now we have a nice cover image and then some extra here for our code so overall it's looking pretty nice so the only things that we really need to do is sort of make sure that we have a about page here that we could use and then make sure everything's working as expected so let's go back in the code and create a contact page and then i'll i mean an about page and i'll leave you a challenge of creating the contact page okay so at this point we just need to create our about page so in here we can just create an about njk file and add at the top uh title and say about me we can set the layout to layout dot njk and then we can just create our uh main class here and say actually this can just be a div because we already have a main class we don't need to we just say container and then a py of 8 and outside of that we can just create an h1 and say class is equal to text center text is 5xl and we can just say this is the title and then page so basically what we're doing is taking it from this front matter here and putting it in here and sort of doing a couple different sections then we can do a section here and add a class on it of text is gray 700 and we'll add body font then we can create a div and this div is going to be a way of surrounding everything so we'll just do container and then we'll have flex flex call items in the center px of 5 py of 16 mx auto lg of px dash 20 lg of py36 and on mds we'll have a flex row and then inside of that we're going to create a 5 6 width that we're going to use for a picture so we're going to div class is equal to width dash 5-6 md of 10 lg max width lg lg will have width of full and medium will have a width of half and then md will have no margin on the bottom and then we can just have an image here and we'll just say we want this image to be an object center max width of extra small we'll have it rounded and we'll call this alt equal my face and then the source we can equal to slash assets slash me dot jpeg which i currently don't have in here but i will put in and then this will show that you can load images from our asset directory then we can create another div here and this div will just contain information about yourself so we can do div class equal to flex flex column items in the center text in the center on large screens we want the flex to grow and md we want the width to be equal to one half and an lg we want uh pl of 24 md will have padding on the left of 16 and then on medium screens we want items start and then md will have text to the left and then inside of this paragraph class which is going to be where some text is we'll do md equals 2 text base leading relaxed text in the center text is gray and we'll have a at 700 and then text is left and lg text is extra large then inside of here i'm just going to write something something something and then we can close that p tag out then close our div tags so we have two of those and close out our section tag and our main tag oh we don't have one of those i think i use the div right and that should be it make sure that's a closing tag hit save and we can go and look at this about page so i'll meet you back in our website okay so i've come back and hit the about page and now we have this about page with my face slightly rounded corners something something something and we're good to go so if you look at our homepage now these links work we have great highlighted blogs we have an about page so there we have it guys 11t tailwind css and webpack if you did enjoy this video make sure to leave it a like leave some comments tell me what else you want to see and of course make sure you're subscribed until next time see ya

Channel: James Perkins

Views: 3,025

Keywords: learn eleventy, eleventy crash course, eleventy tailwind starter, eleventy tutorial, web development tutorial, web development roadmap, web development tutorial for beginners, web development 2021, static sites, web development

Id: gE8hcdG2vsw

Length: 61min 12sec (3672 seconds)

Published: Thu Jan 07 2021