Tailwind CSS v3.2 Crash Course - Build a responsive conference landing page

Tailwind CSS is not just hype it speeds up your front-end development and makes styling web pages a great experience stay with me for the next 60 minutes to get started with Tailwind CSS and learn all the basics of this framework we are going to build this cool conference landing page using tailwind and learn things along the way we'll also learn how to make it responsive once you build this along with me you can build your next project confidently using Tailwind CSS this video is sponsored by the freelancer Rex Community by Kyle Prinsloo it's a completely free community for freelance web designers and developers Kyle has been a freelancer for seven years now with a six-figure income he's written multiple books and helped hundreds of Freelancers grow their career in this community you can get one-on-one help from Kyle himself and many other successful Freelancers you get to network with other Freelancers in the monthly calls you can get your work reviewed by other members and get genuine feedback too you even get a chance to win 250 dollars every month by building something using editor X so if you're a freelancer or aspiring to become one I highly recommend joining me along with 900 other devs on freelancer X right away now let's go first of all what is Tailwind CSS I'll directly show you in the playground here go to dogs playground and let me remove all of this here I'll add a single div and some text what is Tailwind CSS in simple words Tailwind is a CSS framework that is packed with thousands of class names like text white for white color text BG black for a black background P six for some amount of padding on all sides you can see padding 1.5 Ram here Shadow LG for a large shadow rotate 3 to rotate it slightly and so on all of these can be combined together to design any web page without ever leaving your HTML file so you don't need to create a style sheet this is there for a different reason which you'll understand soon but you don't need to give class names like card or header and then go to your CSS file use the selector and Define your styles so without switching between HTML and CSS staying in HTML and designing everything saves a lot of time now all these utility classes we just added were immediately converted to regular CSS by Tailwind you can see them here for reference scroll down scroll down and that you can see rotate three BG black B6 and everything that we just added but we don't need to worry about them at all Tailwind generates this automatically now if you're not very sure of using Tailwind in your project before going through the long process of installing it you can simply come to this playground play dot tailwindcss.com try out the utility classes and maybe even build some components and then if you feel like it's for you you can go ahead and install it I'll also do the same right now before installing let's get a taste of Tailwind CSS by building this part of our website right here in the playground itself so we have two divs within an outer div so let's add that div inside that we have two motives the top div has a violet background class BG Violet now you can see Tailwind CSS has Auto suggested the class names BG while at 50 100 200 and so on up to 900. this is how the color system entail Windows if you go to the docs I'll keep the docs handy because we will keep referring to them time to time here if you search for default color palette you can see a huge list of default colors available to use readily this consists about 22 main colors with each color having 10 different shades the lightest shade of violet for example would be while at 50 and the darkest shade would be Violet 900 we can use these colors for backgrounds text borders and so on apart from these 220 colors of course we have white black and transparent values so coming back here the color we need is violet 400 you can't see anything yet because there is nothing in this diff so let's add some padding that is p hyphen number it starts from P0 there is P1 4.25 Ram of padding P2 4.5 REM P3 P4 P5 and so on up to P 9 to 6. but of course you can see that some numbers are missing in between like p13 and p15 17 and so on that's because it's very rare that you would add a padding of uh you know say 3.75 Ram which would be p15 you can still add a pairing of 3.575 ram though it's not available in these utility classes but that's something I'll show you later for now a padding of two Ram should be sufficient which is p8 now this div is sticking to the edges so just to make it easier for us to see the div clearly let me wrap this within a section and give some padding to the section say P4 one ram padding so we are able to see the step all right within this top div we have a mail icon I use hero icons whenever I use Tailwind CSS that is by the creators of Tailwind itself so go to heroicons.com let me search for mail yeah here it is I want the solid version so go here copy SVG and paste it within the first dip great now notice that this SVG also has some utility classes H6 means height 1.5 RAM and W6 means width of 1.5 Ram initially these numbers like p8 head6 all of these might seem very cryptic but as you start using them more often you'll get a hang of it one thing to understand here is that these numbers are not random let me show you in the docs I'll close hero icons and in the talks search for spacing scale default spacing scale and here you can see these numbers of values like 0 PX 0.51 and so on are used for widths Heights padding and margin 0 obviously means 0 pixels PX is for 1 pixel after that 0.5 is 0.125 Ram or 2 pixels and then 1 is 4 pixels and so on so if you usually design using pixels on your mind if you want a width of say 20 pixels divide that by 4 and that's 5 so W5 would be the width on the other hand if you usually use Rems if you need a padding of 2 RAM multiply 2 by 4 and that would be p8 right so if you're using pixels divide this value by 4 if you're using REM multiply the value by 4 and you get this value but you can always come back and refer to the documentation whenever you need let's say just search for fixed widths and you will know what to use here you can refer to that now coming back this SVG icon has a height and width of 1.5 Ram looking at our final design it looks like we need double the size so let's change this to h12 and W12 great and now you see that the fill is current color so let's not change this let's not change the color of SVG within this instead let's add a text color of white to this using text white great now we need this icon at the center of the div if you're familiar with CSS grid layout to center a div we can use display grid to the parent container so that would just be Grid in tailwind and then we use Place items Center in CSS that's again Place items Center this way I have an entire tutorial on CSS grid with table in CSS it's one of the most watched videos on my channel so you can refer to that video once you've started using Tailwind in your projects next in the lower div here we have a paragraph and then a form with input and button let's add the paragraph first foreign get notified of all the updates this whole div needs a little padding so let me add P 10 here and it's also white in color so we can add BG white either to this div or we can add BG white to the parent div itself let me add it to the parent div here and while we are doing that let's also add the Shadow and rounded Corners so for shadow the utility class is Shadow hyphen SM MD LG XL and so on depending on the size of the Shadow you need Shadow XL would be perfect for us and look at this look at the amount of CSS you had to write if you had to add a simple Shadow this way until then makes it so easy you can simply add a uretic glass okay now for rounded Corners we can use the utility class rounded again SM MD LG and so on even rounded full which adds uh you know if you need a circle you can use round it full so for us again rounded LG would be great notice that we got rounded Corners at the bottom but not at the top because we've added a background color to this diff you'll have to add rounded Corners to this div itself so let's say rounded LG here but that gives us rounded corners on the bottom so to add rounded corners only at the top you can say rounded T LG where T is for top so similarly you can add rounded corners only on the left by doing rounded L you see there are no uh you know the right side is not rounded or you can do rounded L rounded B and so on again this is more readable in my opinion so rounded T LG for now next let's add the form input type equals email and then button notify me placeholder email address did you observe something the default browser styles for input and button are gone otherwise we would see a gray button here right and you would see some border for the input now removing these styles are intentional Tailwind CSS has some base Styles which resets most of the Styles browsers apply and also adds some opinionated CSS you can learn more about what styles are added and removed in the talks you can search for pre-flight and this will give you an idea of Base styles that are applied now let's style our input and button from scratch let me refer to the mobile version of this because we will be designing mobile first we have the input field first and below that comes the button so let's use flexbox with flex Direction column to place them one below the other that would be class Flex just Flex for display flex and for Flex Direction column it's Flex call now for the input let's add some border by just saying border class this adds a one pixel border and then we need to set the Border color so we can say border and then mention the color let's use a shade of gray border gray 300 let's add a padding I want a different horizontal and vertical padding so for horizontal padding it's p x because X in the X Direction and then you can select the size this this will be the same let's say PX4 and then the vertical Direction padding is p y I need like py2 we also need rounded corners for the input surrounded MD would do here you see how quicker it is to style form elements using tailwind and the best part is you can even add the hover and focus Styles right here using the hover colon modifier this is called the hover modifier and then you add your utility class so that will act upon herbal let's change the Border color on Hover to border Violet 400 you see on Hover now we have border while at 400 and similarly for Focus let's first remove this outline Focus outline none and then Focus again border Violet 500. you have to use this modifier for every single utility class there's no way of combining these two with a single Focus modifier yet so the input is done next let's style the button button class we need a background BG Violet 400 same horizontal and vertical padding so PX4 py2 I need rounded Corners rounded MD we need a text White and the text appears to be slightly bold here of course the font is different we will get to that so font font weight semi bold we need so that would be font semi bold and that's done it surely takes some practice to remember these class names but once you start remembering you can feel the speed now this looks perfect you might have started to feel that the HTML is getting too cluttered there are too many class names and your code is getting unreadable initially everyone feels the same slowly you'll get used to it now let's add some gap between all these three elements for these two elements you can add a gap in flexbox using the Gap utilities so gap of three would do and for the form itself to add a margin at the top let's use margin top which is M for margin and T for top margin top of three great and that's it this entire component is done except for the font family and this text color those are General styles that will add to the overall project so we do that later this is wonderful isn't it we've built an entire component without leaving the HTML file at all I hope you're liking it so far and you might have already realized that you need a good enough knowledge of regular CSS to use Tailwind CSS so if you don't have a good foundation I suggest practicing regular CSS a little more before you jump into Tailwind alright now that you know what Tailwind CSS can do and how powerful it is I'm sure you're excited to install this in a brand new project let's start with a completely blank project create a new folder front conf CD into front corn and open this up in Visual Studio code by typing code space dot I recommend using vs code because you get an extension with vs code that auto completes Tailwind CSS classes just like you saw in the playground first create a public folder within this create index dot HTML this public folder is where we like to have all the HTML CSS and if you have any JS files add a skeletal structure to index.html change the title to front conf now let's install Tailwind CSS go to the docs and go to installation there are multiple ways to install Tailwind CSS I have a complete tutorial on all the different ways and the pros and cons that video is linked above so you can watch that in detail if you're going to use a framework like next.js or laravel or a tool like wheat you can follow the respective guides for installation but right now we're not using any framework so we'll use Tailwind CLI which is the simplest way to install for this you need to have node and npm installed on your system you can install without node 2 using the Standalone executable but this is easier so I would go ahead with npm if you're not sure if you have npm installed go to the terminal I'll open a new terminal within vs code itself you can run npm-v if you see a version number like this that means npm is installed if not you can go to node.js.org and install node npm will also be installed along with it once you have npm initialize the project with npm in it and or Dash y option for default values back to Tailwind docs the first step is to install Tailwind CSS using this command so npm install Dash D this installs Tailwind CSS as a Dev dependency all right Tailwind CSS is now installed you can check package.json file you'll see that the latest version of Tailwind CSS is 3.2.4 as I'm recording this video so you will get the latest version next run npx Tailwind CSS in it this command will create the default configuration file you can see here tailwind.config.js once done the next step is to configure your template Parts what this means is here within content you need to add the paths for all the files where you wish to use the Tailwind CSS class names since we're going to have Ola HTML files within the public directory all our utility classes will be within that so we can add a path to public directory dot slash public slash star star in case we add some folders within that or even if we don't slash star dot HTML if you also have Js files within it or any other extension files then you can add those extensions this way otherwise you can just leave it as star.html now a lot of beginners go wrong at this step it's very important to get this path right because Tailwind CSS looks only into those files mentioned in this path searches for the unity utility class names and using those it builds the actual CSS for us so this path has to contain all the HTML files or whichever files like I mentioned that has your Tailwind utility class names otherwise tail will will not build those class names and so those Styles will not work as expected right next create a CSS file that is your input.css now you see that the path here is SRC but I am using a public so it's quite different from the docs either follow this to tutorial completely or follow the docs otherwise you'll get confused I'll be adding it directly in the root of this folder input dot CSS you can name it whatever you want I'll call it input.css now this is where you add these three directives Tailwind base Tailwind components and Tailwind utilities what are these Tailwind CSS uses this input file to build the final CSS Tailwind will convert this line Tailwind base to all the base Styles the PreFlight CSS that we saw before we need these utility and components layers too for Tailwind to perform correctly now we need to run a command to make tilbin CSS build the styles using this input so clear this type npx Tailwind CSS Dash I dot slash input.css that means take the input file in the root of the project this means Dash I means input and output this to dot slash public slash CSS slash styles.css yes this file does not exist yet this is what will be created by tailbone and this is our final CSS file which we can use along with HTML now run this command you now see that the CSS folder has been created and there is styles.css with all the base Styles already added right do not edit this file because it will be Rewritten every time Tailwind CSS builds so close this and if you need to add any custom CSS you have to do that in this input.css below these directives we'll see how to do that as well now here's a warning no utility classes were detected in your source files that's because we haven't added any utility glasses yet in index.html it's time to copy that HTML code we wrote in the playground and paste here so go back to that copy everything and paste it within body one last step is to link this output file styles.css within the HTML so link CSS CSS slash Styles dot CSS that should be it run the same command once again no warning this time so open this up with live server if everything worked fine you should be able to see something like this this means Tailwind CSS is installed and working correctly back to vs code instead of running this command each time manually we can add a watch flag at the end like so with this Tailwind will watch the files for changes and build automatically also instead of typing this huge command every time you open this project we can create a script in package.json file change this to build or Dev you can call it whatever and paste this command here now instead of typing this command you can just run npm run build and now the command is running in the background we can make changes it will automatically build all right let me close all of these and continue so let's first limit the width of this div coming back remove the padding for this section and let's limit the width of the div by using Max width and you can use values like SM MD LG and so on you can see what each of them means so let me add a Max width of LG here that should be fine let's see all right now if you noticed I was able to get these Auto suggestions uh all of these because I have the extension let me show you view extensions Tailwind CSS Tailwind CSS intellisense extension you should install it right away coming back to the browser view this in responsive mode let's Now work on the rest of the landing page we can see that the respiring on the left and right so let's wrap the whole of the page within a section another section and this I can minimize it for now wrap this and add some horizontal padding PX 8 so that would add a left and right padding of 2 RAM and let's also limit the whole uh screen width using maxed width you can use any of these values but we need a very wide value and that would be with maxed with screen utility glasses so let's use Maxwell screen to excel this limits the width of the page to 1536 pixels in case of very very large wide screen desktops let's also add a Min height of screen that adds a minimum height of 100 viewport so that the page occupies full height of the viewport this is needed for desktop layout next within this section comes the header with the logo within that an anchor tag and then the image I have the logo within images folder right here so you can copy the same image if you need from the GitHub repository Linked In the description below so image SRC Images slash logo.png let me give it a height of H7 which is about 28 pixels all right so we have our logo here we need some vertical padding in the header so that would be header class P Y 8. great now let's add this section with a heading and two paragraphs go back let me add some comments to differentiate the sections this would be subscribe section begins and we can close this subscribe section ends and now let's add the section for description so copy the same thing description section begins and description sorry description section ends great this is better first we have the heading and then to paragraphs let me copy and paste those text this is the heading this is the first paragraph and the second paragraph all right firstly we have a huge top and bottom padding for this entire section so let's add that section plus b y for vertical padding this could be about 12. right now you can see that all these three elements look alike so H1 is not different from the paragraphs that's again because of the base Styles added by Tailwind CSS there is no additional padding margin none of that so it's set to zero you can start from scratch so H1 has a semi semi bold font weight let's add H1 class font semi bold and this is a very large text to increase the font size you can use the text utility classes and then there is uh there are values like SM MD XS for too small and then there is LG XL 2XL sorry XL 2XL and so on this would probably be 6 XL let's see refresh yeah that's about it but we need to change the font Family First the font family used here is fira Sans so you can grab that from Google fonts go to fonts.google.com search for fira Sans and add the regular and semi-bold font weights and then copy the import statement from here and you can paste it in the input.css input file before all of these directives at the top like this great we've imported the font but how do we include it you can do it with regular CSS itself you can add body here and then say font family but only thing is when you add custom CSS in Tailwind like this you need to add them within any of these layers using the layer director since this is a base style that is it applies to the entire layout all the pages you can add it within the base layer but if you're adding some custom styles for any components like button components or model or card or anything you can add them within layer components or if it's if you're Rising your you're adding any custom utilities you can add them within the utility layer it's okay if you don't get the layer right because usually it works fine it's just for ordering the CSS in the final CSS file that's why these layers are meant so it's okay if you don't get this value right but you have to add it within a layer otherwise these will not be considered so now let's see if this worked and refresh yes we have fira Sans this is the same font that we need so this is one of the ways of adding a custom font something else we could do is change the font in the config itself go to the docs and search for font family gives three utility glasses like you can see font Sans font serif and font mono the default is font sense which is applied to the HTML and this is the default uh Sans font that is used to customize this you can go to customizing the default font here and this is how it's done copy these lines font family and add it within the extent block within theme so you're extending the default theme and changing the font Sans utility value so here you can change this to fira Sans and you also need to copy this line from here for the default theme and paste it here so now it uses freera sense and using the spread operator it includes all the other font families the default ones so in case your browser fails to load this font then the default one is used now you just learned one of the most important Concepts in Tailwind CSS customizing the default configuration here we customize the default font family you can customize everything in Tailwind CSS let me show you let's say we want to use some brand colors instead of the default ones provided in the default color palette so that can be done by adding colors and let's say you want to call it primary you can call it blue green you can override the existing ones using the same names but if you want to say call it primary you can give it a value here something like yeah and now use this color anywhere in your HTML say for example now you can say text primary and that color appears notice how the till then CSS intellisense extension also picked up the configured color right you can say text primary you can say BG primary you can save border primary all of that will now work now not just colors you can also customize the spacing scale itself now earlier we saw that the spacing 13 was missing which was 3.25 Ram so you can add that using spacing or if you particularly want that 3.5 3.25 Ram only for height you can even just say height and say 13 3.25 RAM and now you can add that to any of your elements earlier h13 was not available but now because you've customized it you can use h13 you can add any other value here like uh you know height of logo or something so you can simply use h logo here sorry I haven't saved it yeah you can say h logo and you can use so this value can be completely customized all right so let me remove all of these I just wanted to show you how powerful customization is and remove this as well and now we can also remove this block here because we've customized the default Sans itself but instead of removing it let me comment it out because we might want to use this later all right we just saw how to customize and add some utility glasses that are not available but let's say this h13 that we just added you just needed it probably for a one-time usage then you wouldn't want to add it in the configuration file you just want to use it once how do we do it then or even this text color text primary it might not be primary you just want to use that color once somewhere on your page instead of customizing in your config file what you can then do is use something called as arbitrary values so let's say you do text and then use square brackets like this and use that same color this way you see this has immediately added this particular color and you can use it let's test you see this color has now appeared this is very similar to adding inline Styles where you can quickly add some Styles but definitely this is way more powerful than that because you can even use it using the hook hover or Focus variants and there are more benefits to this as well this is awesome now let's get back and complete our mobile layout I will remove this all right so now uh the font family and font size is perfect but we need a larger line height for line height to utility class is leading and you can use it with a number like three four five six and so on or you can even use words like tight snug normal relaxed loose for us what we need here is about 1.25 so leading tight will do it great next is this element we need a little margin top change of color and increase in font size so that would be class empty margin top of I think two should be good and then we need Violet sorry text violet 500 and then a larger text so text LG or text Excel refresh yeah one thing you might notice is these fonts are slightly thicker than this that's because of font smoothing I always like to use this one class to body that is anti-aliased or whatever it's called it just makes the font smoothing anti-aliased I have absolutely no idea what this does but I know that the fonts look great when I add this class so I add it and now you see this is perfect all right now this paragraph let me add a margin top again mt3 and then text LG all right only thing is the color here the margin is also slightly bigger nt4 and we can add a you know gray color or I have used slate here you can add text slate 600 to this paragraph or you can add this directly to the body itself because all the other paragraphs used in this page are of the similar color right great now this color needs to be changed so H1 text slate 800. and that's it now we need some more gap between these two elements and we can add margin top uh to this but instead let's use flexbox and add Gap because for desktop layout anyway we need flexbox to display these two elements next to each other right so wrap these two sections this one and this section within another section which will make the flex container so class Flex call in Mobile layout and we need the Gap say about 20 and then let's add this padding directly to this section now right so let's remove this okay this should work yeah we have a gap which is exactly as this now time to add the footer we'll work on this Violet background towards the end so add the footer right here below the section footer UL Li a and the first one is about us then we have contact and then we have privacy policy let me use flexbox to display all three next to each other so make the UL a flex container UL class Flex with the gap of uh about maybe 1.5 grams so that's six and we need slightly smaller text so text SM and lighter text too so that would be text slate I think 500 or 400. okay okay yeah this is different for mobile layout or we have a white background because sorry we have a white text because of violet background but here you'll see that yeah this is what it is we just need some padding vertical padding for the footer so here as well we add B by 8. all right perfect we have our mobile site fully ready except for this background like I said now comes a huge task making this responsive now let's see how Tailwind makes this super quick even this can be done without leaving the HTML at all now look at this layout until about 1000 24 pixels the layout Remains the Same after the break point of 1024 the flex direction of the section needs to change from column to row so this here Flex call needs to become Flex row after a breakpoint of 1024 pixels in Tailwind you can do this using modifiers like SM or MD LG XL and so on so if you add LG you notice that this adds a media query at media Min width 1024 pixels which is why we need to use the mobile first approach if you first add Flex row there is no way you can then change it to flex call in Mobile but these are the alternative classes considered for mobile and then for desktop that is beyond a certain breakpoint like for a small screen like 640 pixels Beyond 640 pixels you can add your utility classes here now Beyond LG breakpoint we need this direction to change to flex row so similar to using hover and focus Styles we say LG Flex row so this is what has been added that is men were 2024 pixels and this particular section Flex Direction row is the rule added let's check up 2024 it Remains the Same and then great we have the direction changed to row now we need both these sections to occupy 50 each or the same width in regular CSS you would add Flex 1 to each of these elements so let's do the same here as well Flex 1 is the utility class that does the same thing here also it's Flex 1. for a wider screen like this there is more horizontal padding starting from about 768 uh break point that is the MD breakpoint so at that breakpoint for this wrapper section let's add a uh you know greater horizontal padding which is about px16 right that's good also for the flex container this vertical padding needs to be increased at the same break point which is here so MD py I think about 20 should be good Perfect all right let's see what else okay there's one thing for larger screens this input and button are next to each other let's see at what breakpoint that changes for screens above about 6 30 pixels that changes to next to each other until when that is SM breakpoint So within the Subscribe section we have Flex call so above SM breakpoint change that to flex Pro let's see great we also need to remove the Gap here so SM Gap 0. notice how we are adding these two glasses Flex call and cap 3 for the mobile layout and then for slightly larger screens we are resetting it to flex row and GAP 0 actually Flex row is the default and GAP 0 is also the default only for the mobile we are changing it to flex call and cap 3. so in cases like these where you are resetting the default at a higher break point instead of adding four utility classes this way or instead of adding Flex call and SM Flex row you can just say Max SM that is until SM use flex call so after that it will automatically reset to whatever is the default which is flex row so you can see here this not keyword is used to make sure that until the width of 640 pixels Flex direction is column if this is too confusing just use whatever we did before this was very very recently introduced in Tailwind version 3.2 so if you're using a lower version again this will not work so here as well instead of Gap 3 and SM Gap 0 you can just say Max SM Gap 3 and remove this like I said you can totally use whatever we did before as well I find this smaller so I'm going to use this even in this case Flex call and LG Flex row instead of doing this I would say Max LG Flex call and flex row is default anyway after that all right coming back to the input and button we need to extend this input input to occupy as much space as possible making this entire row occupy full width and that can be done using Flex Guru you can set Flex grow 1 to the input and in Tailwind you can just say Flex Gro that's it Flex grow sets Flex grow to one the other value is zero which is the default I have a complete tutorial on flexbox utility glasses as well using Tailwind CSS so you can go through that that will be extremely helpful for you one last thing is we need to remove the rounded Corners um on the right for the input and on the left for the button for that above SM breakpoint only rounded are none so we are saying rounded corners on the right none for the input and here you can say rounded L none refresh yeah that is perfect let's verify again for mobiles yes we have rounded Corners we have the cap and everything and then first larger screens this is perfect great now for desktop layouts notice that the footer is floating that's not what we want to keep the footer at the bottom you can add flexbox to the wrapper section and using Flex Direction column as well so here not here the wrapper section is this one we can say Flex Flex call and then for the footer you can just say empty Auto now this is a neat flexbox trick I have covered this also in the tutorial so now this footer stays at the bottom because these three are now Flex items and we can add margin Top Auto to any element to push it to the extreme end so that's about it the only thing pending is to add this Violet background now I recently figured out that this can be done using background gradient so time to add some custom CSS snap go to input.css uncomment this and instead of font family background linear gradient to bottom so because we are going to do the mobile Styles first from top to bottom starts with white at zero percent and it's white itself until about 60 percent and then it's Violet right it's Violet from 60 percent and then it's Violet itself until 100 but this is not the violet color that we need we need the Violet uh 500 from Tailwind configuration so how do we get that do you have to copy the hex code not needed you can use the theme function of Tailwind to access any of the default theme values or the ones that you have customized so using theme just say colors dot Violet dot any of the colors now it's not violet hyphen 500 you can't use hyphen here you'll need to use Dot and the same thing you can copy and paste here as well let's see yeah so this has been added we need this in the mobile layout now that we have the Violet background let's change this color to white so for mobile this the footer text needs to be white so that's here so for mobile it needs to be text white and above LG breakpoint where the Violet background is on the right we need text slate 400 so it is LG breakpoint right oh yeah we need to change that right so here in the custom CSS don't worry about these errors they're actually not a problem now above the break point of 1024 excels for pixels for that we need to add media queries but instead of saying media and Min with 1000 24 pixels instead of writing these this one manually you can use the screen function so instead of this just say media screen LG so you don't have to manually remember 1024 pixel 768 or any of that and also in case you customize these breakpoints you can use start using those values as well so media screen LG copy this paste it and here instead of to bottom it's to right let's check yeah great fantastic here it is to the bottom and here it is to the right so that's wonderful now our landing page is complete if you have come this far take a moment to appreciate yourself this is a lot go ahead create your own project Now using Tailwind CSS and you will learn a lot more if you want to Minify the final CSS that we have this one you can use the Minify flag so we can have another production script and in strip sorry you can copy this paste it and instead of watch flag you can add a minified flag for production and then you can stop this and instead say npm run Broad and now you'll see that all your styles are minified so use the build script for development and then broad script for production let's see if everything still Remains the Same yes it does nothing has changed now to host this project simply upload the contents within the public folder and you're done you don't need anything else this full project is on GitHub the link is in the description below check out if you need any help let me know if you have any questions at all in the comments below would also love to know if you enjoyed this course thank you for watching hit the like and share this video ahead if you enjoyed watching this don't forget to subscribe below and turn on the notifications so you won't miss a single video from Tyrus

Channel: Thirus

Views: 21,945

Keywords: tailwind css crash course, tailwind css full course, learn tailwind from scratch, tailwind course for beginners, tailwind css latest version course, tailwind css version 3.2, tailwind css tutorial, build landing page in tailwind css, tailwind css no framework, install tailwind css, tailwind css full project, tailwind css shruti balasa

Id: ei20HfTloFE

Length: 54min 57sec (3297 seconds)

Published: Thu Nov 17 2022