Adding Tailwind CSS to an Existing Project

hey what's up everyone in this video we're going to look at how to add tellurium css to an existing project and when doing so how to avoid naming collisions specificity issues and also how to leave a really really small footprint let's get right into it [Music] alright setting the stage here i've got this friend of mine called darren which in australian automatically translates to dazza and he runs surf camps and serves safaris as a business he's got this website that was built a few years back so you can see the different types of camps that he's offering and so dasa asked me for a little bit of help he wants to make a few changes to this website nothing much essentially he wants to add a new team section because he's recently hired two new surf coaches for his team he's also sent me this word document with a bit of copy and a picture for each coach and by the way quick shout out to html5 up since dasa's fictive website was built using one of these templates i've downloaded the website on my computer here and there's a few pages but we'll only look at index.html and right away i can see that there's a link tag to a file called main.css so let's go look at that all right so by the looks of it it starts with the css reset and as i keep scrolling down i start to realize that learning how an existing css code base works can be really overwhelming and while i'm sure that all the css works really well i wish that i could just use tailwind css for this new section since i'm already really familiar with it and you know what this is exactly what we're going to do and i'm going to show you how to do it in a way that avoids conflicts and leaves a really small footprint we're going to keep it super simple here no build tools involved and we're not even going to install tailwind css or create a css file as an entry point we're just going to create a tailwind config file so we can customize the project a bit but outside of that we're going to use a simple one-liner command in the terminal which is going to take care of everything for us first i'll create a tailwind config with npx tailwind css init alright so in here i'll use the mode just in time which by the way will become the default mode intel in css version three and in our purge array here i'll ask to look for every html file in our roots directory so it's going to take care of all of these okay cool so next we're going to generate a css file with npx tailwind css and we need to define an output so output and let's collocate it with the other css file so in assets css and we'll call it tailwinds.css and we'll also pass a watch flag so that the css is recompiled every time something changes great so here's our new css file and you see here that it starts with modern normalize which is also a css reset and as you can imagine this is going to conflict with the other css reset in the existing website so well let's see what happens so i'm going to duplicate this link tag and this one is going to point to our new tailwind.css stylesheet and so here on the left i've got dasa's live website and here on the right the website we're making changes to one thing you can notice is the heading tag here has been normalized in terms of font size and weight compared to the default one and you might notice that the font family is different and the same happens with every heading tag and that's definitely not what we want here we don't want to change anything to the existing website we just want to add a little team section without affecting anything around it here we want to opt out of tailwind css reset called preflight and the way you do that is in the tailwind config file open the core plugins object and here we're going to target preflight and set it to false and now both our websites are back to looking exactly the same as you'd imagine our generated tailwind css file should be empty but it's not we've got this container class here and yes tailwind has a container class but we haven't used it so why is it here in our index.html file if i scroll down for a bit sure enough you can see this header with the class of container the existing css already has a container class and that exposes at least one place where we're going to have a problem since we have no idea of what other naming collisions we might face we're going to do another thing in our config file and we're basically going to name space all tailwind css classes with a prefix and here i'll go t w dash and this time our television css file is truly empty all right perfect so let's start building the steam section now we want to build this just before the footer section so i'll add a comment here since in the word document there is a heading and an intro paragraph what we're going to do is borrow the markup for this heading and intro paragraph from the section before we will grab everything till the end of the header so let's paste that here and make sure we close the section and the wrapping div and this is what we have which is a really good start i'm not entirely sure what these classes do but i think the wrapper adds some vertical spacing and then the container is a max width container so we leave this as is and maybe i'll change the id to team we're not going to use it but we leave that here in case someone else needed that and so let's grab a headline text and replace it here and do the same with the intro paragraph now i want to put some emphasis on this wonderful world and give it a treatment kind of like what we have at the top here so i'll wrap it in an m tag and now we're going to add some classes so tw remember the prefix font bold nice and text and here since we're using just in time i might hard code the color and this color here is actually somewhat the brand color you can see it in logo you can see it on hover states so what we're going to do is add it to our tailwind config file so in our theme i'll extend the colors object and we'll create a new color called highlight and set it to ff6b00 so here we can apply this text color tw text highlight and uh it looks like the bold font is applied but our color hasn't been respected if we inspect that element we can see that the font weight 700 has been applied but our text highlight utility has been overridden by this custom nested selector here so if that wasn't there our color would be applied fine but because it's here and it's more specific this color is applied and so that's a scenario that you're almost guaranteed to encounter by nature telling css classes are really low in specificity and so the chances of underlying css overriding it is very high and so what we want to do here is give more weight to our utilities and we can flag them as important in our config file so after our prefix here we will add another option important and we'll set that to true and so now you can see that all our generated css from tailwind will be marked as important wait a second isn't important supposed to be bad well i'd say it's important that you know when to use it in this case we want our utilities from tailwind to always override the rest of the css so that's an actual legitimate scenario to use important looking at the website again the color is applied properly and the custom nested selector here is being overridden by our tailwind color utility since it's important alright so next let's bring our coaches down here let's build a list of coaches so a node at least and i'll scroll down for each coach we'll have a list item and each coach will have an image so now as a placeholder i'll use images and let's go with image02.jpg and just so it's not gigantic i'll add a width class with tw with eddie we'll use an h3 tag for the coach name and a paragraph for the little biography alright so it might be hard to tell but if i inspect you can see that our unordered list since we've opted out of tailwinds preflight there's things like this marker here or the padding left on the unordered list and the list item that we'll need to take care of so let's start styling uh another list like i just mentioned we are going to remove the padding with twp 0 and i'll also do the same on the list item right and we can also get rid of the marker with tw list none alright and let's also give our list item a subtle background color with twbgray100 and a shadow with tw shadow i'll scroll down a little bit all right let's replace our width 80 that we had on the image with width full so it uses the full width and i want to bring some internal padding to this name and description here so i will wrap both the heading tag and the paragraph in a div and here we'll have some padding with tw padding level 8. and we're not going to change the font sizes or typography too much here so it fits with the rest of the site but i still want to handle some spacing on the paragraph tag so here we'll add a bit of margin top with tw and it also looks like there's some margin at the bottom of the paragraph which i don't want so i'll remove it with tw mb0 so that starts to look pretty good but this layout will eventually break at some point as you can see the image gets bigger and bigger and if we look at it on our desktop well this is not really working it's way too white and so we could fix that with the max width container so on the unordered list tw max width and we'll go with small here and let's also center that with tw mx auto and yeah that works much better now i still think that when we have sufficient space we might try to use a little bit more of this horizontal space and maybe have the image on the left and then the name and description on the right of it and for that we're going to use css grid so our list item will be our grid container and so by default it will be a one column grid so everything stacks but then uh when we reach a certain breakpoint the small breakpoint we want it to split into 10 columns so small breakpoints tw grid calls 10. and so once i reach the small break point here the grid splits in 10 columns so the next thing we need to do is assign how many columns the image and the text here should utilize so our image which is the first grid cell we're going to tell that on the small break point it should use call span three columns and then the other grid cell which is this one on the small break point tw call span the extra seven columns so now we're being constrained by our max width container so let's expand this a little bit i had max width small and on small breakpoint tw max width and let's go with 4xl here all right that's better next thing to fix we want the image here to use the whole vertical space available so it's taking three columns and then we want it to fill up the whole vertical space which is defined by the coach name and description here to do this i will wrap my image tag here in a div and so that's going to break the layout temporarily because we need the three columns span here to be applied to the direct child of the grid and now what i can do on a small break point as well is set this wrapping div to be relative and by doing so this allows me to set the image tag to absolute and let's also add a class of height full so now it takes this whole space available obviously the image is distorted and we can fix that with object fit cover so small tw object cover and so now the image will use its normal aspect ratio below the small break point and at the small break point and up will be cropped to use the available space depending on the height of the container alright that's looking great so now let's go replace the placeholder image and text with the contents that dasa gave us let's start with the first coach harry eckerson aka hackers hectic beckers so i'll replace the name here i've already placed the images that dasa gave me so i can come here and replace this image with hackers and i'll grab the biography here and paste that here and this is looking really good one more thing i want to do is style this nickname since they all have one uh similarly to that so here we can wrap this in an m tag and like we did before tw font bold and tw text highlight alright great so now let's duplicate this for the next coach i'll grab the entire li element and duplicate it and we have a little issue here we need some vertical spacing between each coach so let's add a spacing utility on the unordered list right here tw space y and let's go with eight all right that's looking great so let's grab the data for the second coach sally mcdonald's aka mac is mcdonald's maccas swimming costume cozy mosquito mozzie track suit pants tracking dance and again we'll grab the biography and put it here and i'll repeat the process one more time for the one and only dazzer and our team section is looking really good there's one thing i want to point out our layout here currently changes at the 640 pixel break point which is a small break point but if i scroll up there is no such 640 pixel breakpoint on the actual rest of the css and you can see here we have a breakpoint at 736 pixels if we poke around the website's existing css you can see these media queries here defined as max width breakpoints at 680 1280 960 840 and 736 pixels that would be really nice to mirror these breakpoints so that the layout changes in our team section happen at the same time than the responsive changes in the rest of the ui in our tailwind config file we're not going to extend but replace the screen's object and i will paste a few breakpoints here and so these pixel values correspond to the breakpoints we've seen in the existing css and i've named this breakpoint following tailwind's naming convention and now since these were max with breakpoint and tailwind css breakpoints are min width we need to add one pixel to each so that the layout changes happen at the exact same time so now a small breakpoint has changed to 737 pixels here we have a width of 738 pixels so we're still in this three column layout here and our team members are displayed in that nice grid layout but if i go down under the 737 pixels you can see that it jumps into one column and so does our one day adventures all right let's look at the website one more time and i think that the section that we've added fits in really nicely it uses the same colors the same typography and blends in really nicely and the best thing is we've only generated the css that we're actually using and if you look at the file size we've generated 1.87 kilobytes of css which i think is perfectly acceptable we could even take it one step further by minifying the css so we can reuse the cli command that we were using but instead of passing the watch flag we just want to build it and we want to minify it so i'll pass minify and so that's going to well minify the css and now we're down to 1.53 kilobytes or 598 bytes all right one last thing to consider we have that tailwind css file generated but nothing tells where it's coming from we've used the tailwind css cli to generate it but there's no trace of that and for someone who would jump into this project it kind of feel like this file has been dropped here and there's no way to edit it something useful that we could do here is add a package.json to this project and then add scripts with the tailwind cli commands that we've used so i'll create a package.json file with npm init and here in the script i can add a dev script which is going to be npx tailwind css css output assets css tailwind.css with the watch flag and let's duplicate this and we can also have a build script which will not watch but minify our css and that means that now anyone can run npm run dev which will start the watch and build the css and when they're done working on the project they can run npm run build which will minify the css all right let's take a quick recap of the things that we've done to integrate tailwind css to an existing project most of these things happen in the tailwind config file we have opted out of preflight in the core plugins we have namespaced all tailwind classes with a prefix and marked all our utilities as important and so that our integration is really fluid with the website we have customized the theme a little bit by redefining the breakpoints so that they mirror the existing breakpoints in the css and adding a highlight color here with that in place we were able to add a new section to dazzer's website that integrates really fluidly with the rest of the ui and we've done so without touching anything else and leaving a really small footprint and that about wraps it up for this video as always thank you so much for watching and i will see you in the next one bye for now [Music] you

Channel: Tailwind Labs

Views: 13,763

Keywords:

Id: oG6XPy1t1KA

Length: 17min 47sec (1067 seconds)

Published: Mon Oct 04 2021