Tailwind CSS Tutorial With Next JS 13 For Beginners (2023)

hi and welcome to the comprehensive Tailwind CSS tutorial so if you're looking for a CSS framework that offers flexibility customization and scalability so you have come to the right place so Tailwind CSS is a popular utility first framework that enables you to build the responsive modern and user-friendly interfaces with ease so in this tutorial we will guide you through the fundamentals of the Tailwind CSS including installation configuration some Core Concepts such as utility classes responsive design customizing the Styles and a lot more and we'll be building some projects along with it so by the end of this tutorial you will have a solid understanding of how to use the Tailwind CSS to streamline your workflow and create beautiful web designs so let's dive in and let's get started and if you don't know about this Channel and you don't know about me then I am nikhil tarani I'm the instructor at the Indian coders and I make several videos on the latest Technologies like the reactors the next stairs the full stack Frameworks like the mongodb express node.js and so many things so I create these videos on the latest Technologies so please subscribe me so that I can get some help from the YouTube to grow my channel so that's it for the intro so let's get started to the main content of this video so welcome and let's start with the Tailwind so what is the Tailwind CSS so Tailwind CSS is a powerful CSS framework that can help you create the beautiful and responsive designs quickly and easily so the main motto of the television CSS is you have the flexibility and you can easily style your website or application so I'm nikhil tadani and I will be your instructor throughout this course and this course is designed to you by the Indian coders so let's see about some of the features about the table in CSS so Tillman CSS follows the utility first approach so this follows a utility first approach which means that it provides a wide range of utility classes that you can use to style your HTML elements and these classes are named based upon their values and their properties like the text line centers so it makes very easy to understand that how they work and let's see the second feature which is very customizable so Tillman CSS is highly customizable and you can configure the framework to include only the utility classes that you need so it will help you to smaller the bundle size as well so you will only be applying some styles that you need with the Tillman CSS and nothing else will be added to your bundle and let's see the third feature which is the responsive design so the Telvin CSS makes it easy to create the responsive designs using the breakpoint system and you may know about the breakpoint systems as we Define in other Frameworks as well like the bootstrap material UI so we have the breakpoints according to the screen sizes like for the small devices for the medium screen sizes for the large and the extra large devices so you can add different classes for different screen sizes to ensure that your design looks good on all of the screen sizes and another feature with the Tailwind is it's very easy to learn and some people says that it is very hard to learn because you need to know and you need to be a professional inside the CSS but they are wrong because the detail when CSS is very easy to learn especially if you are just familiar with the HTML and CSS and no professional CSS knowledge is required just a basic syntaxes and basic knowledge of the CSS is required with using retailwind and since it uses the utility classes instead of the custom CSS rules so you do not need to be an expert in the CSS to use it effectively in D1 if you are stuck somewhere so Tailwind has a huge Community Support as other Frameworks do so it would be very easy to implement and use so this is all about the Tailwind CSS in the introduction section so if you see the differences between the tailwind and the other CSS Frameworks so let's have a look at the differences between the tailwind and the material UI so the features offered with ATL wind is it offers the utility classes to use in the elements so we add the classes in the elements so we do not use the components but with the material UI it offers the predefined components predefined set of components to use with the custom flexibility to build the UI so material UI provides you a UI tools that you can use to save you a lot of time for building the UI components but with the Tailwind it offers the utility classes like you have a bit more flexibility to use with the CSS elements you can design that from the scratch you can design your own as well so that's how the element works and if you see the flexibility options so the Tailwind is easy to use and flexible with customizing the CSS and with the material UI so if we need to customize any component in the material UI then we create the style components for the custom styling so that's how the Tailwind wins with the flexibility only so that's why we use the tailwind and I will not argue that the Tailwind is good or material UI is good so both are good but as per your requirements so if you need to use the set of UI tools set of UI components then you can use material UI but if you want your design starting from the scratch by using the utility classes of the CSS then the Tailwind is good option so both are equivalent options according to me so you have the choice to choose the Tailwind or material UI so now we'll be seeing the Tailwind inside this course so let's work with the Tailwind so now let's have a look that how we can use the Tailwind CSS with the nexjs so we'll be installing the Tailwind with the next JS so we'll be using the next CS which is a react full stack framework so the Tailwind CSS Works flawlessly with the react and the next JS and you can use that with any other Frameworks as well like other Frameworks can be a solid JS you can use that for the vanilla JavaScript as well like for the vue.js you have the remix as well so you can use detailment with any other Frameworks as well any other framework or liability with that so let's have a look at how we can install the Tailwind so I'll be moving on to the Tailwind CSS homepage so we have the tailwindcss.com and this is the official site of the Telvin and then you can see we rapidly build the modern websites without ever leaving your HTML so it directly applies this trials to your HTML so you can see here we have an example that you have the Styles like you have the screen sizes like the medium you have the flex property for the medium screen sizes and you have some Styles like the BG slate it means the background and you have the text LG it means the large property of the text like it will increase your text size and then you have a lot of options as well like Tech Sky 100 so every color inside detailment provides you nine options starting from the 100 to the 900 so you can use them according to your requirement and then you can say you have some best practices your apis and so many things with that so let's click on the get started to install the Tailwind so if you are using the vanilla JavaScript then the process is again very simple so you need to install the Tailwind inside that so you need the node.js as well before that and if you do not have the node.js installed then you can move on to the node.js.org and you can install the node.js and the process is very simple and straightforward so and then you need to initialize a Tailwind CSS with that and once you run the edit command of the Tillman CSS then it creates the Tailwind config.js file which is the configuration file which allows you to have some customization configuration with the tailwind and you can extend the theme of the Tailwind as well you can use your own theme here and then finally you need to add these three properties of the Tailwind into your CSS file so into your CSS file you need to add the ATL win base at the retailwind components and at the rate Elven utilities so the base provides you all base classes the components provide you some of the components that you can use with the tailwind and then with the utilities then you have the utility classes with the tailwind and then you can build that Tailwind as well with this and then you can just use with the Tailwind with the HTML file but we'll be using the next JS with that so we'll be moving on into the framework guides and there you can see you have a lot of Frameworks that you can use you have the create it react app as well you can have the white as well you can have the next chairs you have to have the next JS we have the white we have the laravel angular as well the solid GS as well so you can use on any framework so the Tailwind is same on any other framework as well so we can move on and we can click on the next JS and you can see here we have the page of install detailment with the next JS and then first we need to create a new nexjs app so we'll be using the next JS version 13.2 which is the official version of the next JS with using the Delvin so let's start and first let's create a next JS application so I've opened a folder in the vs code and you can do the same so you can move on into the terminal select a new terminal from there and then what you can do so you can move on and you can run the command of the npx you can have the create Dash next Dash app and then you can add the latest flag as well to install the latest version like the latest and then you can add the typescript flag as well so you can have the dash dash you can have the typescript and then you can hit enter and then after hitting enter you will be having this project name so you can move on and delete that undefined and you can use the my app like this so you can have the my app and then would you like to use the eslint with this project so we can click on the yes and then would you like to use the source directory so we'll be using the no because we'll be using the main app directory with the Nexus so we can click on the no and then would you like to use the experimental app directory so we can click on the S so we'll be using the app directory here so in Port Alias you can use the at the rate as well so you can by default click on the enter and then what it will do so it will install a couple of dependencies and it will initialize your new next.js application within a moment so let it install and let it create a next JS application the new nexgs app has been initialized and now we can move on into the app directory so here you can see here we have the page file as well so this is the route file of this main route like the local osport of the 3000 so this is the route file for this and now we can move on to the Tailwind so here we have the tailwind and now we need to install the Tailwind CSS so we need to install these three development dependencies so we'll be using the Tailwind inside the development because the Tailwind Works inside the development and then once we create our application once we build that so it will compile all of the Styles inside the CSS file of our application so we do not need to install the Tailwind inside the bundle because it uses the CSS utility classes so what it will do so it will just create a CSS file for all of these classes so we can move on and we can just run this command npm install Dash D so we'll be running this command so before that you need to move on into the directory of the my app then you can run this command and after it will install these dependencies then you can move on and you can initialize the Tailwind CSS as well so you can run this command as well and pxt will win CSS init Dash p and there you can see after running this command it will create two new files inside your project directory the first will be the TL wind config which includes your configuration files with detail mean and then it creates a post CSS configuration as well so we are all done with that and now the next step you can see now we need to configure the template paths so we need to tell the Tailwind that where it will find the files like here you can see inside the content we can have the app directory as well we can have the pages as well we can have the components as well and then we can have the source as well so we need to tell the paths to the Tailwind like where it will find the JavaScript or the typescript files so what we can do so we can move on and we can copy that we can copy the whole file and then we can move on into the Tailwind we can paste that here so here you can see here we are using the app directory so we won't be using the source so we can remove the source as well we won't be using the pages as well so we can remove the pages because here we'll be using only the app directory with the Nexus and inside the app directory inside even the nested files even in the more nested files if it finds the JS file or TS file or the GSX or the TSX file so it fill at the typescript support to these files so it's saying this and now we can move on and then you can see finally now inside the globals.css file now we need to add these three lines of code inside that so we can copy that and then we can move on into that so we can move on into the globals.css and there we can remove everything we can just write these three Styles over there where the Tailwind for the base and then we have the Tailwind for the components Tailwind for the utilities and now we can move on and everything is done from our end and then finally we can just run our application with the npm Run Dev so we can move on and we can run this application with the npm Run Dev you can see the steps are very simple so you can see the experimental warning and these are some warnings that you need to ignore and then you can see the server is open on the port of the 3000 so now we can move on with the server so here we go here we have the server running or the port of the 3000 so we have the get starting by adding this this and now we can move on and there inside the page.tsx then we can remove everything that we do not want we can remove the whole main as well we can remove that and then we can remove all of the things from there we do not need that we can remove this font as well as of now so now we have the export default function home and inside the home what we can do so we can just return a div with the hello world inside that so we can have the hello world so if we do not have anything so we'll be starting everything from the complete scratch and now to use the Tailwind first you need to move on to the extensions and there and you can install the Tailwind CSR intellisense so it provides you the auto completion with writing the Tailwind CSS Styles so now we can move on so you can install that and then you can move on to the page file and there you can see if you want to apply some styles this div you can provide the class name like this so we can have the class name and inside that if you will press Ctrl ND space so you get all of these styles that you can provide so you can see these tiles are there from the Tailwind so you can provide these Styles like this and if you want just the font size to be increased like you can have the text to excel so you can have the text to Excel and then you can see if you will just save if we'll move on to the application so now we have the hello world inside that and then you can see if I open the Chrome window here and then you can see if I provide the one Excel then you can see now the text size is smaller and then you can say if I provide the two then you can see now the text style is bigger so you can see now the Tailwind CSS is working fine so now we have successfully initialized the Tailwind CSS inside the next JS application so now let's move on and let's just learn about the Tailwind step by step so here now we have just set it up the next JS with the tailwind and it is working totally fine and here what are we doing is we have just defined a component function and inside this function we are returning a div with a class name of the app and then inside that we are rendering a hello world and then we have the class name of the text to excel so what is this class name so if you will just hover over this class name you can see now we have a class of the text to Excel and there we are just applying some of the CSS Styles so we have some CSS Styles inside that inside this class so this exactly shows us that what is a utility class so a utility class is a class which takes some of the styles of the CSS and then it generates a specific class for that style so those are the utility classes so what this utility class is doing the text to excel so it is taking out the font size property of the CSS and it is providing the font size of 1.5 REM and the 24 pixels equivalent and then it took this time file of the line height and then it provided this style to the 2 REM so then after putting out these styles from the CSS then it generated this class and it provided these two cells inside this class so now this text to excel is a utility glass inside the Tailwind CSS so you can see if we just provide another class like the text 3XL now the textiles will be even bigger you can see now the textile has been increased and then you can see if you will hover over it once again again you can see now with the text 3XL class this is different class once again and here we have different values for the CSS Styles so these are the utility classes inside the Tailwind so now let's have a look at some basic utility classes inside the Tailwind CSS so here we have some basic utility classes of detailment CSS and comparing it with the actual CSS as well so you can see the Tailwind has the independent class for each style like you can say we have the text to excel it has the independent class like the text to Excel and then we have some Styles like the font size property and the line height property so that's how the Tailwind works and there you can see now we have the utility classes and then we have the actual CSS which is working under the hood so first we have the utility class of the background white we have the BG white it means the background is white but what actually is the CSS so in the CSS it is the background Dash color we have the background color property and we have defined the color for the white so you can see it so you can see this style is equivalent to this Styles inside the CSS so this is a Tailwind utility class and this is the actual CSS which is being applied to this class and same for the P10 and the M10 so P10 is the padding so we provide the padding as a 10 and we have the 40 pixels and then we have the margin of the 10 then we have the margin of the 40 pixels but why this 10 and 40 because one in the Tailwind utility is equals to the 4 pixels so 1 is 4 pixels it means 4 into 10 and then we have the margin for the 10 we have the margin here as the 40 so these are the utility classes and these are the actual CSS which works under the hood and again same if we provide the display property as the flex so if you put the flex property inside the utility it means we have just provided the display as the flex same for the flex row if we provide the flex row it means we have provided the style of the flex Direction and the style name is flex Direction into row and if we provided the justify Center it means we have just provided they justify content into the center so these are just the basic utility classes of the Tailwind CSS and comparing it with the actual CSS which is being complied so that's it for the utility classes in set detail win and I will see you inside the next lecture so now we have seen the basic utility classes of the Tailwind with the actual CSS so now let's have a look that how does the Tailwind CSS works so how does the Tailwind CSS works if we Define any class so first it passes the configuration file so the Tailwind rates your Tailwind config.js file to determine that which utility classes to generate and this file includes the configuration options like for the colors for the spacing for the font sizes for the breakpoints and even much more so it passes the configuration file which reads your tlb config file to determine that what are the classes that the Tailwind needs to generate and after passing the configuration file after reading the utility classes then it generates the CSS utilities so after seeing all of these things so it generates a CSS file that contains the utility classes based on the past configuration file and these utility classes are automatically generated based on the options that you have specified into your configuration file foreign so if you have added any options into your configuration file like for the colors for the breakpoint so all of these classes will be automatically generated based on the options and after this what it does so then it processes and optimizes your CSS code so the Tailwind is known for the optimization so after all of the CSS classes so after defining the CSS file of the utilities then it optimizes your CSS code so the Tailwind CLI runs the post CSS plugins onto the generated CSS file to optimize the output of your CSS so it runs the post CSS plugins and the post CSS is just like a preprocessor that transform your CSS code using the JavaScript plugins so what it does is so it runs the post CSS plugins onto the generated CSS to optimize the CSS file and the optimizations will include like it will remove all of your unused Styles and then it will Minify the CSS file and then all of the optimizations will be completed so that's how it optimizes and it processes your CSS file and then finally after all of the things then it generates the output CSS after all of these steps so after passing the configuration after generating the CSS utilities after optimizing and after processing your CSS file then finally it will generate the output CSS code so it generates a minified CSS file that you can include into your HTML markup like even you can include that into your final bundle package and that file contains all of the necessary styles for your website that we have used and you can use the utility class provided by the Tailwind to style your HTML elements or the jsx tags so that's a complete overview that how does the Tailwind CSS works and how does it compiles your code so now I think now you have a knowledge that how does the Kelvin CSS works and how are the classes what are the utility classes and now we have read all about the Tailwind CSS in theory so now let's move on into the practical way in which we can build some mini projects to see what are the things that we can achieve through the Tailwind CSS so now let's move on into the Practical part now so now we know a little bit about the Tailwind CSS and now let's move on and let's build a very basic project with the Tailwind CSS which will be a header of any application so we'll be building an header of the application built with detailment CSS so we'll be applying some of the Tailwind utility classes to complete that header so I can move on into the directory we can move on to the app we can create a new folder that can be a components and inside the components folder now we can move on we can just Define a new component that can be the header so we can be the header dot TSX and now inside this file now we'll be defining a header of the application so for that now let's move on let's define the function so we can have the function header and after that we'll be just exporting this function as well so we can have the export default as this function so now we have the function header and now we can write the header inside that like this and now we can move on into the page so here we are rendering the div but we can directly move on into the layout file and here after this body so in this body we can remove this children we can just render the header inside that so this can be the header and inside that we can render the header of the application so we can have the header like this and now we can move on and we can define a main content inside the body that can be the main and now inside the main will be rendering the children so main will be rendering a children inside the next JS so if we just say if we move on to the application so here you will be seeing on every page you will be seeing the header inside that so if you move on to any other page inside the next JS but you will be seeing the header on the top because onto the root layout we have the HTML file and in the HTML file we are rendering the body and first content that we have is the header so now you can see now we have the header it is blank header so we do not have anything as of now so now let's move on into the header and let's close all other files so we can close others we can close the sidebar menu as well so we have the export default function header so now for header we know that we'll be requiring some of these links so we can Define the area of the links so we can have the links like this and that can be an error so the array can be a weakened of these services we can have the block we can have easy students so we'll be just creating a header for suppose like a school or like a Educational Institute so we can create the header for that type of application and now we can move on and here we are rendering the div so we can remove the div as of now and then we can directly render a nav tag like this so we can have the nav and inside the nav we'll be having a UL so we'll be having the UL in which we'll be having a lot of links we'll be having these links inside that and now before the UL will be rendering the logo of this application as well so we can have the logo and then we'll be having some text of that logo as well so we'll be defining the content like this so now we can move on into the nav so you can see there won't be anything as of now so we can move on to the nav we can move on to the class name so we can just provide some of the utility classes to build this header so as we already know about the CSS that how the CSS is that how does the CSS Works what are the CSS classes and what are the CSS Styles so we can just Implement some of the utility classes from the Tailwind CSS to apply these Styles so as we just saw some of the basic utility classes from the the Tailwind so we can use the background so we can use the background that can be the gray and so there are around 10 shades of each color inside the Tailwind so starting from the 50 100 200 and going on till the 900 so we have 10 shades for each color so we can give the background as the gray 800 background gray 800 and then what we can do so we'll be rendering the logo we'll be rendering the UL so we can just put the display as the flex so for the flex display we can just use a reflex but here inside the application we won't be seeing anything because we haven't specified the height and we do not have any children inside that so here we have provided Flex as the display if you will just hover over this class so you have the flex class and inside that the class of the CSS the style of the CSS is the display flex and now we can move on we can just provide a couple of more Styles like we cannot justify content so that should be the between so we'll be having the Justified between because we need the Justified content to be aligned into the space between so we'll be having some spacing between them we can have the items as well so we can have the items we can have this Center so what this will do is you can hover over the every class inside detail when you can get all of these Styles there so here we have these styles for the Align items and it is saying that align items to the center and after that what we can do so we can Define the height so for each height you can see starting from the zero if you will just access the zero height now you have some height and then you have the one it is 4 pixels again for the two it is X pixels so the three it is 12 pixels the four it is 16 pixels so you can specify all of the properties of the height so suppose we need the height of around 20 20 into 4 that should be the 80. and then we can have some padding as well like the four so we can have the P hyphen 4 for specifying the padding as the four which is 16 pixels so this will be all for the navigation so if we save if we move on to the application if we just move 200 so here you can see now we have a basic navigation bar inside that a basic nav tag with some Styles so for the logo I will be using this hero icons package so you can see this is the hero icons and what it does so it provides you a couple of icons with their svgs and with the jsx as well so you can see we are building a website for Educational Institute so we can move on we can copy the SVG icon we can copy that and then we can paste that here so in this logo we can remove that and then we can paste that here and then you can see after this we have an error like we have the class so we need to convert this to the class name like this so we'll be having the class name so if we say if we move on to the application so here you can see inside the top left corner inside the start of the navigation bar we have the icon and now you can see now we have the icon we have the class names as well so you you can see where the class names of width we have six value we have the height we have the six we can define the color as well so we can have the text Dash white to implement this color if we save if we move on to the application so now you can see now we have the color as well so you can say it is working totally fine so now we have this color so this is all the Telvin works and now if we need a if we need like the company name as well after this logo then how can we do that so we can just move on we can just plot the paragraph after this SVG so we can add the paragraph and I will now just minimize this SVG tag so now we'll be having this paragraph so we can just write a couple of styles for the paragraph as well so we can have the class name and there we can provide the text we can add the yellow 50 we can provide the margin left as the four and if we just add something like this so we can have the cadoo Hub like this if we just save if we move on to the application so now we have the edu Hub inside the center of the screen so you can see now we have the edu Hub inside the center but we need the edu Hub after this logo so how can we do that so it will automatically aligned after the logo once we write all of those links so that will be the functionality so after that now we can move on we can provide the ml4 and then what we can do so we can just put the font as well so if we need the Bolder font a little border font now what we can do so we can provide the font at this semi bold so it will just apply the font weight of 600 into this style so you can just apply that style you can apply that font semi bold now you can see now you have a little bit Bolder font with that and if you want to increase the font size as well again you can use the text to excel property so now you can see now you have a little larger font with that and now let's move on let's define the links as well so we'll be having a couple of styles for the UL as well so we can give the class name that can be the flex and after that what we can do so we can just put this justify as well so we can have it justify from the start so we need the items from the start so we have the flex property and now we can just put the gap between the items like Gap can be around 6 pixels would be okay we can give the gap of around 6 that would be compared to 24 pixels so we have the gap of this 6 then we can just provide a list as well we can have the list Dash term so we won't be having the disk effect inside the list and now we can move on we can just plot the links inside that so again we can use the react approach via the dynamic links so we can use the link set like this we can use the map function with that so with the map function what we can do so we can enter a callback for each link that we have so for each iterator we can render a callback and inside that we can render a list item tag so we can render the LI tag with that and we can point the key as well so the key would be the link itself as of now so we can just spot the link because we have around three links as of now and after this Li we can quite the a tag as well for providing that link so for the a we can provide the ref as the hash and then we can just plot the value of the link inside that and the link would be we can just point the link itself like this so now you can see now we have the links as well inside that and then you can see everything seems to be working perfectly fine so now we have the links over there but now if we just move on you can see now these are not visible at all so we can move on we can just provide some color so we can move on we can just provide the colors to the parent UL element because if you provide the style to the parent it will automatically be applied to the list item as well so we can just provide we can provide the text we can have here the gray that should be gray 100 or 200 would be okay if we provide that style if we save and now you can see now we have the list items as well so you can see now we have the colors of that and everything seems to be working perfectly fine once again and now we can move on we can just provide a font as well so again you can see this font is not looking good so we can just increase the font weight of the font so we can move on again we can use the font as the semi bolt and if we save if we move on to the application so now you can see now we have this semi Bolder font and then you can say it is working totally fine so you can see now we have defined all of that so you can see now it is looking good and now the last step of this header so we can just move this edu Hub like here we can just move this I do up here so we can move on and we can just plot the paragraph text so here we have the paragraph We have the text Taylor we have the margin left it as the four we have all of the things so we can move on into the paragraph So after the text to excel we can provide the margin from the right so we can have the Mr and that should be the auto so it will automatically align after the right margin so now you can see now it's aligned into the left and then you can say it is looking very good so now you can see within a couple of minutes we have recreated the header of any application so this is the educational institute so we have just provided the header of this application and then you can say it is working perfectly fine so you can see it now this is how we can just create some of the basic projects with the Tailwind so in this project now we have built this header and it's looking perfectly good and now let's move on into the bigger projects in which we'll be just defining a landing page of this application as well so now that's it for this header project so in this lecture we will see that how to handle the focus States the Over States and other states within the Tailwind CSS and these states are most used inside the real world applications because all of the modern applications which has great designs which has great UI uses these states to build their UI so let's see that how to handle the over focus and other states within the Tailwind CSS so let's see the first style that we currently have will be the hover and I think you already know about the hover so when you point over any UI element it is known as the hover state so then the hover States get active and then it will apply the Styles which you provide to the hover State and same with the active as well so if you have the navigation bar and if you want to style and currently active link like if you're on the about page if you want to apply some styles to the about page which is currently active then you can just provide some styles to the active and then we have the focus as well like if a UI element is currently in the focus then you can apply some states to the focus as well and same with the first and last as well so if you want to apply some styles to the first or last child of any parent like suppose you have a div if you want to apply some styles to that div like the first and the last child then you can use the first and last properties with these states so these are just very few states which are most commonly used within the Tailwind or any other CSS libraries as well so these are just very few States so let's directly head over to the Tailwind CSS documentation to see that how to apply these Styles within the Tailwind so I am into the tailwindcss.com and I'm into this section of the hover focus and other states so in this section you will see that how to handle all of these states so let's say suppose we have this button and then you can see once I will point over this button then the hover style would be then applied and how to apply the whole style we just add the hover like this we add the hover colon and then this style name so you can read the hover Styles like this and then you can see you can have the pseudo classes like the hover you have the focus first child required and there are so many other styles that you can use within the Tailwind as well and you can see how can we use these Styles so suppose you want to apply the hover focus and active all of these Styles inside that so you can use the normal button you have the BG wallet of the 500 and if you want to apply some hover style like once you will hover over this button then the color of the background would change to the 600 shade from the 500 so if people hover over this then you can see now the background has been changed with the 500 to the 600 and then you can see once this button would be active once we click on this button then you can see now we have the styles of the 700 and then you can see now we have these styles of the 700 once the button is currently active so that's how the active also works so now it is currently in the active and then you can see we have the focus as well once this is in Focus then you can see outline has been none and then you can see inside the focus there is one more style like if you want to apply multiple styles of any element so you can use multiple definitions like this like Focus via the outline none and with the focus they have provided the ring so ring is now adding the ring inside the focus so now you can say it is currently in the focus it is currently in the tab Focus so then you can see once I will move out of the focus once I will click outside so you can see now we do not have these Styles available so you can see the focus has these colors like we have the focus outline none we are removing the default outline we are adding the ring inside that and then the ring has the color of the wallet of the 300 so you can see once it is in Focus so that's how these Styles work so let's just see the first and last as well so you can see now we have here a div so suppose we have a ul and suppose this is a list item so for every list item we have these names and their profiles so let's see the first child that we have so inside the first they have provided the padding top as the zero and inside the last as well they have provided the padding bottom as the zero so this is how they can just Define some Styles within the Tillman CSS for the first and the last Styles like you define the first colon then the style name the last column and the style name so that's how you can use all of these Styles and then you can just head over to the documentation so there are a lot of things with these states so you can just learn about them from the Tillman documentation as well so now let's just move on and let's just test these values so if we just open our application here we are the header here we are the code we had the simple header as of now we have here the navigation tag we have the SVG for the logo with the paragraph tag and then we are rendering all of the list items inside that and then we can move on into the create next tab so here you can see now we have the services blocks and the students and we were building a navigation bar for suppose like Educational Institute so let's move on and let's see some of these Styles like we have the ATAC the anchor tag if you provide the class names like this so we can have the class name and suppose on the hover we can add the hovers like this so this is the hover in the hover if you want to add some background color so we can have the background and then I can give the background like BG slate 700 or 600 as well so if we save if we move on to the application then you can see if I will now just hover over this then you can see now we have some background color inside that so you can see if I just maximize so you can see once I will hover over any of the elements so you can see these types will be then applied and then you can say you can also add some padding as well inside that you can move on into this style like this and then you can have the padding legs padding like that should be somewhere around two would be enough so you can have the padding and then you can add some space so you can see once you will just hover over this element then you can see now you have some background Shadow inside that you have the background color and then you can change the colors as well that you want so you can get the colors like this as well like you can give the background gray as well so you can give any color that you want so you can see now inside the hover you have the first date and then if you want to add other things as well inside the hover then you can again use the hover like this so if you want to apply the multiple Styles inside the hover then this is not supported as of now so every time you need to apply styles for the hover you need to add the hover then the style again the hover then the style because this is not currently supported inside the Tailwind but maybe they can add the support inside the future versions of the Tailwind so for every style that you need to add inside the hover unit 2 at the over element like this so you can add the hover and then suppose inside the hover I will add the background as you round it so like we have the background color so we can add the rounded background color like this so we can have here they are rounded so we can have the round it and we can use the MD for the rounded it will be 6 pixels so if we will save if we'll move on to the application once again so here you can see once I will hover over this then you can see now we have little bit nice effect of the rounded Corners so we have the rounded corners of the background and then you can see it is also looking good so we have these styles for the hover and if you want to apply more Styles then you can play around with all of these styles that you want so now we have this forwards and suppose we want to apply some styles for the active link then how can we do that so we can use the active and suppose inside the active link I want to do like I want to change the background color once again so for the active we can change the background color and suppose the background color can be we can give the pink color like this or like we can give the purple color like this so that should be purple like suppose 800 or 700 of the purple so if we save if we move on to the application so here you can see once I will click on this link and you can see this link is currently active so then you can see now we are not moving into any other route so the active States get lost so you can see but once we will just click over this element once we continue clicking so you can see now we have the active State inside this button so we can add for this as well we can add for this as well so that's how the active Works inside that so if the link will currently be active so we'll be seeing the active like this so that's how we can Define the active and then if you want to apply some styles for active Focus so you can use the focus like this and then insert the focus if you want to apply some Styles like you want to apply some ring defect again that you saw inside that as well so you can use the ring and inside that again you can use the focus once again so you can hit the focus and then you can use the ring color as well so you can have the ring like suppose you have here the green ring like this so you can have the green of 600 so if you will just save if you move on to the application once again so you can see once the element will be in the focus so you can see if the element will be in Focus like this so then we'll be seeing the ring effect like this so you can have the ring so you can see then we'll be having the ring defect inside that so you can see once we'll move on to the services now we have the ring defect inside that and then you can see it is working perfectly fine and then you can see that's all we can use the ring effects like this so we have the ring color but only if the tab is incorrectly in Focus so you can see once we'll move on to other tab with the switch as well so here we have the ring here we have the ring and here we have the ring so that's how the ring Works inside that so that's how you can apply the ring effects as well like this so you can play around with all of these values like you can see there's one more thing like once we are in the ring so you can see once we move out of the focus then we do not have the rounded Corners so for that you can again use the rounded for the focus as well so you can have the focus you can have the rounded we can have the MD property so you can see now we have the MD property with the rounded as well so you can see once we will switch to the tab like this like this and like this as well so now we have these properties with the ring as well so that's how it works inside that and then you can see we are seeing the outline as well so if you want to remove the outline then you can use again the focus you can use the outline that should be none so if you remove the outline now you have the green color with the outline as well so if you move on to the block now we have the green Outlet color same for the students as well so that's how these states Works inside detail when CSS so you can play around with all of these values with other states as well so that's it for this lecture so now we are wrapping up with this so from this lecture onwards now we'll be building a project which will be a about us page for that application so earlier we were building the header of an educational institute which is the company name of the adverb so in this time we'll be building an about us page with that so we'll be using Tailwind CSS and then we'll be using basic utility classes the hover States and other states with that so let's see what will be the demo of that application so here we'll be building the project like this so we'll be having the adverb we have the header of this application and then we'll be having the states like the activities we have at The Institute name like the idea Institute of Technology and then we have some static text over there and then we'll be having the images like this so we'll be having some images we'll be having a lot of styles over there we'll be having hover States and we'll be having other states like this and this will be a fully responsive project so we'll build the application in the desktop first and then we'll make it responsive inside the mobile devices as well so let's start on this project so here we have this header component and now what can we do inside that so here we have the links of the services blocks and the students so instead of the students now we can change it to the about so here we have the anchor tag but for using the links with the client-side routing inside the next layers so we use the link component provided by the next JS for navigating through the different links so for that we can remove this link or we can just use the link instead of this attack so we can use the link from the next JS that would be available from the next stairs so it will be imported from the next link and here we have the class name we have all of the things like this and then we have the link inside that and then we can use the ref tag as well to move to the different pages so we can move on we can just provide the link like this or we can have the link dot to lowercase so we can have the link dot to lower case like this so if we save if we move on to the application so you can see everything would be same and now we can move on we can just provide these Pages as well like the services the block and the about so let's move on inside the app directory let's create a new folder that can be the services so you can have the services and inside the services now we'll be creating a page that should be the page.tsx so that should be the page component and then we can Define the function we can have the services like this so Services would be a functional component we'll be exporting this as well so we can have the export default like this and then we can just return the JS accents at that with the div of the services like this so we can have this Services we can move on we can Define the about and inside the about we'll be having the page.tsx so with this syntax so it will create the folder of the about and inside that it will create the page.psx with that so we can hit enter so now we have the about page.tsx so we can have the export default function we can have the about and inside the about now we have the about page so we can move on we can like we can have the block slash we can have the page dot TSX once again and then we can just paste this function over there so we can have the block like this so now we have all of the pages so if we just save if we just refresh this application if we move on to the services click on services so now you can see now now we are into slash services so here now we enter the services if we click on the block now you can see now will be inside the block page so now we enter the blog if we click on the about so now we'll be inside the about but here we have the text of the services because inside every component we have the services so that should be the block here that should be the about here like this so now we'll be having all of the things inside that so inside the about we are the about block we have the block we have the services inside the services so everything should work perfectly fine now so here we are into the about so now we need to design this page so we can close other files and now instead of this div now what can we do so we can use this section so beginning of this section over there like this so that should be the section tag and now we can just make some more space and now inside this section now what can we do so we can just write the class name and inside that we'll be providing the width so the bit would be of the full screen so we can give the bit screen to apply the width of the 100 of the screen we have the 100 viewport height and now we can just Define the margin from the top as well so that should be somewhere around 12 into 448 pixels for the margin from the top and now we can move on we can just provide a div again that can be a container for all of the things so we can have the class name that should contain the class the flex we can give the flex property as one like this so the flex would be fully covered from this tip and now what can we do so we can give the justify content that should be from the start and I think we need to define the flex as the column as well so we'll be having the items inside the column basis and then we can provide the Gap as well like the six so we can have the six of the Gap like this and now we can move on and I think we can also plot the items of the center to align the items inside this enter so we can have the item sketch Center and now we can move on we can just point some of the more basic stylings inside there so now we'll be having the H5 so for the H5 we can have the class name that should be so we can have the font we can have the Bold so we'll be using the Bolder font we can just increase the size as well so we can update text Dash we can have the 4XL for increasing the size so we can have the 4XL and then we can Define the activities like this so we can add the activities so if we save if we move on to the application so here we have if we move on to the about page so here we have the activities like this and it is looking fine so here we have the activities and then you can say it is looking fine and now we can move on again and here we can just Define the paragraph as well after this so we can have the paragraph we can have these Styles as well we can have the class name of something around we can give the text that should be to excel inside the text and then we can provide the uppercase for this and that would be the company name like The Institute name and then we can just put the font weight so we can have the font like we can have the lighter font with that so we can have the font light like this and then we can write the company name like we can probably add you up and now after that now we can just move on we can just provide some of the text after this so here we have the Institute name then we can add some text to represent that Institute so we can have the paragraph tag once again we can get the class name again and the class name this time can be we can give the width of this like that should be three by five so the three by five width if you apply the three by five that should be of the sixty percent and now we can move on again and we can just provide I think after this we can have the text of the center so that should be aligned inside the Center and then we can move on we can just provide the text property as the two Excel once again so we have the text to excel like this once again so that would be the text so as of now we can just provide the low Ram is from text so if you are using the visual studio code like this I am using same so we can just put the lower arm like this so we can have the low Ram then we can just use the amount of words that we need to require inside the Lona so if we need around 15 words then we can use the 15 and then we can hit enter so it will just create the dummy text of 15 words so now we have the 15 words dummy text inside that and now we can move on if we save so now we have the low Ram is pump and then you can say it is looking fine and now we can just plot the activity section as well so for that now we'll be using the div once again so inside that we can have the class name we can have the flex inside that so here we'll be using the flex box once again and then what we'll be doing so we'll be using the flex as the row inside that so we'll be having by default of the row so we won't need to justify that so we have the flex rope we can just plot the Justified that should be the center we can also have the items inside that that should be the center and then we can just put the gap between the items so that should be somewhere around I think five or six would be enough so we can give the six and now inside that now we can Define three images so we can have the images so for the images you can get the URL of that images as well so you can move on into the pixabay and then you can just search for the college inside that because we are also creating the website for Educational Institute so we can just copy a couple of images like this image is looking good so we can click on that image and then we can just click on copy image address but if you want to download that image then you can use the download option as well so now you can move on you can just copy the address of that image like this so you can paste that over here like that would be the first image and then we can use this image as well and it is looking good so we can just move on to this image we can just copy the image address then we can move on then we can Define another image tag like this so we can have the image and inside the source we can have this image address so we can just copy that so here we'll be defining the URL like this and now we can move on we can select the third image as well so we can move on and we can use this image over there so we can use this image and then we can just copy the image address and then we can just Define another image tag so we can have the image in this Source we can Define this source and then we can Define the alt as well so inside the all we can use the IMG one inside this all we can use the img2 and inside this all tag we can use the AMG 3 like this so if we save and if we move on to the application so what we will see so here we have three images inside that so here you can say if I have just now move on to 25 percent or 50 so here we have three images and and now we can just align the sizes of these images so we can again move on to the hundred percent we can align the sizes so here what we can do so inside the image we can again use the class name so we can select all of these images we can press Ctrl and F2 and then we can move on we can put the class name like this so we can have the class name then it would be applied to all of these images so inside the class name what we can do so we can again use the width that should be the one by four I think or we can use the one by three for the width and then we can move on and then we can just provide the shadow so that should be the shadow that should be led and if you want to provide some hover States as well so we can use the hover and inside the hover what we can do so we can use the shadow as it to excel so if we save if we move on to the application so here you can see now we have the Shadows inside that so here you can see but I think the images are too big for that so we can use the one by four inside that so we can move on we can use the one by four for this so we can use the 1x4 so if we save if we move on to the application so here you can see now the images are looking good so we have first image we have second image and then you can see we have third image so you can see in between very less amount of time we have defined the about us page as well opening Educational Institute first we have the title then we have here The Institute name we have some text over there and then we have some images over there and now we can move on and we can just Define the button as well after that so we can have this button we can Define the class name like this and inside the class name you can Define any class name like you can have the border that should be I think we can give the color like that should be something around red of 500 then we can move on we can just provide the Border width as well so we can have the Border Dash 2 pixels like this so we can have two for the two pixels of the Border we can use the padding as well so that should be P2 we can use the rounded as well if you want to be if you want to button to be rounded you can use the rounded as MD and then we can just select some text like we can either view more like this so we can have the view more if we save if we move on to the application so I think we have the button here but we need the button after this step so we can have this button after this div so here you can see now this button is there and it is looking perfectly good so now I can say now we have defined the page of the about us and now we have built this about us page and now inside the next lecture what we will see is we will be just customizing the styles of the Tailwind so here you can see now we have the font family like this activities but if you will just move on into this so there is no option to provide a different font if you will just move on to the paragraph so you can say you can have the font so you do not have any option of providing the different fonts so we'll see that how we can just watch the different font and how we can customize the CSS of the Tailwind so let's wrap up this lecture so here we have just defined the about us page of our application so we have used some of the basic utilities classes of the tailwind and they are working quite fine and now you can see now we have just used here the default font of the HTML so what if I need to use a different font so how can I use that so there are multiple fonts available if we move to the inspect if we just select this element and if we can apply some of these Styles like we can have the font we can have the family and there you can see there are multiples of fonts available to use these fonts but what if I need to use this font from the Tailwind so if we just move on if we just apply some font into this activities element so for the activities we have the H5 element so what if I need to use a different font for this hash file so we can use the font Dash the family name so here we have the family name of the sense we have the serif and then we have the mode so we only have three font families available within the Tillman nothing more but what if I need to use a different font so how can we Define a different font within the Tailwind so here you can see here we have multiple fonts available like if we just use the phone family once again so there are multiples of font available but inside the Tailwind we only have three fonts which are available this sends serif and the mono so how can we Define a different font so for defining a different font you need to customize this CSS you need to add your own custom CSS to apply some of the fonts because these are not available inside the Tailwind but you can do that inside the Tailwind as well but we'll look into that section later so let's see that how we can apply some custom CSS styles to the Tailwind so here comes a topic that applying the custom CSS for the Tailwind so how can we do that so we can do that with the layer directive so what is the layer so here inside the Tailwind we have three layers first we have the base then we have the components then we have the utilities so we have three layers so what we can use so here we have the reserved keyword of the layer which we use as a layer directive and which tells the Tailwind that which bucket a set of custom CSS Styles belongs to like in which bucket the CSS types belong to like the buckets are based the components and the utilities so in which bucket these styles are belong to so with the at the rate layer this is a reserved keyword inside detail wind so we can apply some custom CSS styles for this Tailwind with the at direct layer so let's see how can we do that so if we move on into our application if we open the CSS file so here we have the globals.css and here we have three layers the base the components the utilities and if you want to apply some custom CSS style like suppose inside the base if you want to apply some custom CSS Styles then we can use the at that layer directive we have the at the rate layer and at the red layer after that we need to Define like in which layer we need to Define some styles that can set the base the component for utilities we can apply for the base because the base provides you some of the default styles of your application as well so we can use the base and inside that you need to apply that in which tag you need to apply some Styles like if you want to apply for the body then you can use the body like this so you can use the normal CSS with that and inside the body you can use any font that you want you can use Font family like this you can have the font family then you can Define any font like here we have multiple fonts available like we have the cursive so if we save if we move on to the application then here you can see now we have defined the font for the body so it will apply the font family of the cursive to whole body tag the body contains all of your htmls so it will apply to your whole HTML file and here you can see now we have the edu Hub we have all of the things available inside the cursive font so that's how you can customize the CSS inside that so you can use the font family you can use any other font family as well you can use any custom CSS style as well like if you want to provide some styles for the H5 so suppose we have the H5 and inside the H5 we are rendering the activities so you can provide your own custom cells to the H5 as well so you can use the text decoration like this you can use the underline as well so with applying this there will be underline inside this font if we move on to the application so here you can see now inside this we have the underline as well so that's how you can use the layer directive to customize your CSS so here we have just divined this type and what if now I want to use a custom CSS style for only this activities so either we can use the H5 tag like this we can use the H5 we can provide the font family we can use a different font family like we have the mono space so the mono space font will be then applied so that's how we can use it but what if I need to use a custom CSS style for this font for this font and for this font so how can we do that so we can move on we can provide another layer so we can have the another layer and that should be of the components or we can have for the utilities so we can use the utilities like this and inside the utilities what can we do so we can use the class name like the class name can be we can use a class name like we can have the font and that should be I think the font of suppose like cursive once again so you have the cursive and inside the font because if now you can apply some of these Styles you can apply some Styles like you can use Font family like this the font family should be the cursive so you can have the cursive and now you can use this font cursive into your page so you can move on you can just provide this style over there you can just copy that from there you can move on into the page you can use this font as a cursive so you can have so you have the font cursive so here you can see now you have the cursive font inside that if you refresh the page so now you have the font as the cursive so if you will just select this element so you have the font family of the cursive so that's how you can use and that's how you can apply the custom CSS styles to your application and that's how it works and one more thing with that so you can move on and here we have the apply so what is the apply directive so the apply directive uses the delivery utility classes to Define your custom CSS Styles so if we again move on into this so here we have the H5 font family of the mono space so if you want to use so if I do not want to use the font if I want to use something else which is provided by detail bin then we can use at the rate apply so you can use the apply and then you can use any style of the Tailwind that you want so here we have multiple styles of the Tailwind which are available so what we can do so we can use the underline like this so if we use the underline so here you can see now we'll be having the underline inside this H5 spell so that's how the apply works so the apply uses the Tillman utility classes to Define your custom CSS code and that's how you can apply your custom CSS within the Tailwind CSS and that's how it works so here we have just used the custom Styles inside detailment CSS and there you can see we have just used the layer directive and inside the layer we have just used here the base we are customizing the base and inside the base Styles we are customizing the H5 tag and inside the H5 tag we have just used the apply to apply some of the classes of the tailwind and we are using the underline like this so what this will do so this will just apply the underline text into the H5 property of our application and inside the base and there you can see we have the utilities as well if we want to apply some custom utility classes then we can use like this we have the font cursive then we can use the font family like this so when we will use this glass inside anywhere of our application like this with the font cursive so this font family would be then applied to this so that's how the customization work but this was the first way of customization inside the Tailwind like how you can customize these tiles inside detailment so this was the first option so there are two more options available so the second option in which you can just customize the CSS you can head over to the documentation as well to see all about that so you can move on you can just customize the Tailwind theme so you have the theme of the tailwind and it is defined inside this like if you move on to the tailbit config file so inside detail with config file you have the theme so here you have the content and there you can see here you have the theme and inside the theme you can extend your own theme as well so here you can see here we have just used the H5 tag we have just used the apply underline so what you can do so you can just remove that from here or either you can comment that from here and then you can move on into the Tailwind you can just customize and you can just extend the theme as well like this so if you want to provide the custom font family like this so you can have the font family like this and there what you can do inside there so you can use the other different value like if you want to use the recursive like this so you can have the cursive then what you can do so inside that you can just provide an array of the values so you can have the cursive or you can add another Point as well like you can have the sense like if the cursive is not available then you can use the sense so what it will do or what it is doing so it is extending the font family of the internal Tailwind so if you move on to the page so this style will not work as of now the font cursive so we can say we can move on to the localhost 3000 so here we are the page so if we move on into the page component like we have the font sense serif and the mono so here you can see after applying the cursive now we have another option inside the phone to define a custom font family so you can see earlier we only had three options the sense serif and the mono but now we can see now we have the cursive as well but inside that you can see if we will just hover over this class so if I will hover then you can see now with the font family of the cursive and this sense and same thing that we have defined inside the extent so that's how it works so you can see we have just divided the value for the cursive we can Define another value as well you can use the the fantasy as well like this so you can use fantasy and you can use the fantasy style like this so you can remove this you can use the fantasy and if you just save if you again move on to the page file you can use the font fantastic as well so you can see that's how this works so that's how you can just extend the custom Styles into the Tillman CSS into the internal table CSS and that would be converted into a utility class the extended utility class so if we just save if we move on to the application so here you can see now we have the fantasy font over there so you can see it is working perfectly fine so here we have the fantasy we can remove this and then we can use the cursive as well so you can see now we have the cursive font over there and it is working perfectly fine you can use a different font family for the activities as well so you can have the font like this so you can have the font you can use the cursive for fantasy like this so you can see that's how this works inside the tailwind and that's how you can just customize the Tailwind theme inside your application so this for the second option that was available of how can we customize the style inside the tailwind and there is one more option available if we just head over to the documentation once again so here we have the Tailwind so now we are done with the customizing your theme so we are now customizing the theme we can just use the arbitrary values so what are the arbited values so here you can see if we just apply some of these Styles like we have the text okay so here we have the text so here you can see here we have some of these Styles if we move on to the page like we have the text for Excel and inside that we have the font size of this 36 pixels the line height of the 40 pixels so here we have the text so we can use a dynamic value like this so it is not as a arbitrary value but you can just provide any Dynamic content like this so you can have the 22 like this so if we move on here if we just apply some style like here inside this paragraph tag inside the low Ram is pump tag the PTX with the text property of the 2XL so we can remove this and we can just use our own custom size of the text like here with the 22 pixels so we can use the 22 pixels like this so if we save if we again move on to the application here so now you can see now the font size is smaller so you can see that's how we can use the arbitrary values inside detail in CSS and it will work fine so you have the width as well so you can just Define the width as well as the arbitrary value you can use the bit and then you can just provide the hundred percent like this so that would be the width of the hundred percent so you can see that's how it works inside this so that's how you can provide the arbitrary values and it is very very simple concept like this so you can use background your own color as well you can just apply some mask as well so you can see everything is very simple inside that so you can provide the LG so we will discuss about the breakpoints later and there you can see we have all of the things that we can apply dynamically inside that so that's how the arbitrary values works so it is very easy to use because we provide our own Dynamic Styles into this so that's it for the arbitrary values so now we saw that how we can customize these Styles inside detailment CSS and they were pretty easy so first we use the CSS and then we defined the layers for the base and for the utilities and then we customize the style and then second thing that we saw with the customization was with the theming object that how we can customize or modify the theme and then third thing that we saw was arbitrary values that's how we can provide the dynamic values to the television CSS so that's how we can customize all of the things inside the Tailwind so that's how it works so now let's see that how we can make this application responsive on all of the screen sizes so you can see if we just move on into the inspect panel if we just open the dimensions of the iPhone XR so you can see this application is not responsive inside any of the screen sizes so you can see if you open it inside the mobile device so you can see the links are taking a lot of space you can see the text is taking a lot of space the image is doesn't even appear good so you can see this is not responsive at all so we need to make this application responsive into any of these screen sizes so if the user so suppose if the user opens this application inside inside like mobile device inside the simple mobile device and if it opens inside an iPhone XR if it opens inside a big TV so this application should be responsive on any of the screen size so for that we use the breakpoint system so we use the breakpoint system inside that so the breakpoint are just values of multiple screen sizes so if this is a breakpoint so here you can see now we have values for the small devices like for the small devices they have the minimum width of the 640 pixels and for the medium devices they have the minimum width of the 768 pixels and with the last devices they have the minimum width of 1024 the extra large comes with the 1280 pixels and for the 2XL comes with big TVs with the 1536 pixels so these are the values for multiple breakpoints inside any of the CSS Frameworks or inside this Tailwind so you can see now we have the breakpoints for the small for the medium for the large for the extra large and for the 2XL so here these are the pre-default values so these are the predefined values inside the Tailwind which are available so you can see but if we just open our application if we open this responsive design or if we open this application so there you can see now we have the iPhone XR and there you can see now we have the width of 400 and 14 pixels so you can say this is not responsible for the responsiveness so you can see if we provide these styles for the small for the medium so this won't be applied to this application so for that we need to customize this Styles point so for that you can see now we have the small devices so we can just create another property that can be the extra small devices which contains very small devices to the iPhone XR so in that devices our application will look perfectly good so for that you can see if we move on to the responsive design so how can we apply these Styles so first let's see that how we can apply these Styles so to add a utility class so you can see it to make it effect so you need to use the property names like for the device name like for the medium you define the width as the 32 and for the last devices for the last screen size is you can provide the width as the 48 so that's how it works so you define different styles for the different screen sizes like for the medium and for the large so same Works inside any other screen sizes as well like you can see for the medium you have the height fold you have the width of the 48 so that's how it works and then you can say you can work on mobile first as well so you can see that's how it works so you can just provide the styles for multiple screen sizes like for the small for the medium for the large for the extra large so here you can see that's how it works so now we can move on and there you can see now we have the values for the small medium large XL as 2XL but as we discussed earlier that we do not have the values for below the 640 pixel screen sizes so how can we do that so we can move on and we can customize the theme object once again so we can move on into the tailbit config file so here you can see now we are already extending the font family we are already extending the some of the like pre-default themes of the Tailwind so now let's move on let's define another property which is already available which is the screens so we can use this screens so as we seen earlier that if I open this once again so we have the small so with the small we have the 640 pixels so we can Define under the screen that can be the extra small so we can add the extra small so that should be somewhere around we can give the 300 pixels so it will have the minimum width of the 300 pixels inside that so that's how it works but if you customize the screens then only these screens will be available so if we move on to the page if you apply some Styles so you can see only the extra small will be available not all of the screen sizes so if you are extending the theme object of the screens then make sure you add for all of the screen sizes so you can add these screen sizes as well like for the small for the medium the large extra large and the 2XL so you can add all of these values so you can use these Styles like this we have the extra small you have the small you have the medium you have the extra large so I think we have missed the large so that should be the large or I think we can have here the one zero eight zero pixels like this and then we have the extra large and then with the two XL so these are the screens that our application will work on so now we can move on into the page and we can Define some things like if we just move on into our application so let me close all other things so if I just close all other things so here we have this application so here you can see now the images are not looking good at all so if I want to say that for the small screen sizes like for the extra small screen sizes like for the iPhone XR So within the flex direction as the column so how can we do that so we can move on into the Tailwind so here you can see here we have these tiles so we can move on into the page and here we have provided the flex property of the display we have the justify Center we have the item Center we have the gap of six that should be 24 pixels so now we can just use the small property like we can have the XS so you can see the access is already available there so the excess what we can do so we can have the flex we can have the column so we can have the column of the flex so we can have the flex Dash we can have the call so if we save if we move on to the application so here you can say inside the extra small screen sizes so you can see now we have the flex property as the column so if we move on into the big devices as well so you can see if we move on into the last screen sizes it will be available as the column because so you are saying to the Tailwind that from the extra small screen size is the flex direction should be column but if you want different on above the medium like on the above the medium you can provide the MD so that should be again you can have the flex Dash row like this so if you say if you move on to the application so here you can see from the small devices from the small to medium now you be having the flex direction as the column but for the medium to next available screen size you have the flex direction of the row so that's how it works so if we move on to the inspect panel once again so you can see for the small devices now you have so now you can see now you have the images and there you can see now you have the flex direction of the column so that's how it works and then you can use different for the small as well so you can use different from the small from the medium for the large for the extra large so everything that you can use it is available inside the tailbit config screens so now you can see now these images are looking actually these images are not looking good so we can just increase the width of these images so we can move on we can just provide some more things like for the extra small ones again like here we have the image so for the image what we can do so here we have the image bit of 25 percent so what we can do so for the medium screen sizes we can use this width but for this small screen sizes for the extra small what we can do so we can have the bit so that should be somewhere around we can give like two by four so that should be two by four which is the fifty percent of the width so you can see now we have the width of the fifty percent so if we say if we move on to the application so you can see now we have the width of 50 with that so that's how it works so now we can move on we can make it three by four as well to increase the size once again so here you can see now the size has been increased so we can use these styles on all other images as well like this like for this as well and for this as well so that's how it works so you can see now these images are looking responsive onto any other screen sizes if we move on to the medium you can say it is still looking good if we move on to these small screen sizes it is still looking good so that's how it works so now our images are responsive so now if I want to say you that now this text should be having like we need to decrease the font size for different screen sizes so we can move on again so here you can see here we have this paragraph so now for this paragraph what we can do so here we have the width of three by five which means the width of the sixty percent so that would be enough and now we can move on so here you can see now with the text of 22 pixels so what we can do so for the medium to the all available screen sizes we can put the text of 22 pixels but we can just move on we can just point pretty small as well and for the extra small what we can do so we can have the text of somewhere around we can give around 15 pixels of the text so if we save if we move on to the applications so here you can see now with the text of 15 pixels if we just click that so you can see now with the font size of 15 pixels and then you can see it is login code but once we move on after the medium screen sizes so now you can see now the text size has been increased so that's how it works inside that so you can see now it is looking perfectly fine and now we can move on we can just decrease the size of this text as well so we can move on here we have the education name so we can use same thing over there so we can use the we have the text to excel which means the font size of 24 pixels so we can just use it for the medium like for the medium we have the text to Excel and for the extra small so we can have the text we can have like one XL like this so we can have the One XL so if we say if we move on to the application so you can see now the font size is smaller so we can do this for the activities as well so the activities we have the text for Excel so that should be for the medium only and for the small what we can do like for the small or we can have the extra small we can have the text that should be would 2XL would be enough so we can have the two Excel so you can see now it is looking good as per the iPhone XR perspective and now we can just decrease the spacing between them as well so we can move on so here you can see inside the header so here we have the header.tsx so here we have the navigation here we have the links so here we have the gap of the six so we can just point for the medium that should be Gap 6 but for the extra small devices the Gap should be somewhere around 2 would be enough so you can see now we have lesser Gap available so you can provide Gap as the one as well so now you can see now you have very less gap between this link items so now you can see that's how you can make everything responsive inside the Kelvin CSS so now you can see now this application is fully responsive if you open it into any of the devices like you can see even in the hundred percent it's looking good even in the 125 percent it is looking good you can open this inside the inspect you can move on to the responsive as well you can have the responsive so you can say if we just move this here so you can see once we open this inside any of the screen sizes so that's how it works so you can say it is fully responsive to any of this screen size available so that's how it works inside detail when and that's how we can just make any application responsive inside the television CSS

Channel: Indian Coders

Views: 10,599

Keywords: tailwind css, tailwind css tutorial, tailwind css react, tailwind css project, tailwind css navbar, tailwind css react tutorial, tailwind css responsive design, tailwind css installation, tailwind css code with harry, advanced tailwind css, tailwind css beginner, tailwind css components, tailwind css crash, tailwind css explained, tailwind with nextjs, tailwind css for complete beginners, tailwind css course, tailwind css quick course, tailwind

Id: ZTjd5RfVE9E

Length: 76min 36sec (4596 seconds)

Published: Fri May 05 2023