React meets Tailwind CSS | Implement Dark Mode in React

1. Course Introduction: Welcome to this course wherein we'll talk about how you can make use of tailwind CSS with react application. My name is Fesel and I'm excited to guide you through the powerful journey of combination of react and tailwind CSS. As a web developer and an instructor, I'm passionate about helping learners like you build clean, efficient and visually stunning applications. In today's fast paced web development landscape, creating responsive modern designs without compromising performance is a must. Tailwind CSS, with its utility first approach is a game changer for styling. Combine it with reacts dynamic capabilities, and you've got the perfect toolkit to build a production grade web application. Now, here's a glimpse of what we'll cover in this particular course. So you'll start with the introduction to tailwind CSS. We will break down its utility first styling system and then we'll walk you through setting up a simple HTML form that will make use of tailwind CSS. Then we'll explore responsive design and theming in react and our application will leverage tailwinds, flexibility to craft layouts that look great on any screen. And for the highlight of our course project, you will create a fully functional dark mode toggle in react. And this will help you enhance the user experience and the aesthetics of any application that you build in future. By the end of this course, you will have a solid understanding of how you can integrate tailwind CSS with react to build sleek, responsive web applications. Now, you will not only learn on how but also the why, ensuring that you can apply these skills to real world projects. Now, who is this course for? So whether you are a beginner, who is eager to explore some modern web design or a react developer who is looking to streamline your workflow, then this course has something valuable for everyone, developers. And when I say everyone, I mean developers of all levels. So whether you are a beginner, intermediate level developer or an advanced developer, this course could be perfect for you, given you want to explore how you can modernize your web application. So are you ready to master the art of building beautiful react applications with tailwind CSS? I am. Let's dive in and create something amazing together. See you inside the course. 2. Unleashing the Power of Tailwind CSS: A Beginner's Guide: So now it's time that we begin talking about tailwind CSS. Now, what is tailwind CSS? All right? So I would request you all to Google Tailwind, and you'll see this website tailwind CSS. Okay? Now, tailwind CSS is a utility for CSS framework that allows you to build custom designs really quickly by applying classes. Okay? Now, if you're familiar with HTML, you would be aware that HTML elements over here. You can see a few HTML elements, okay, image TV. They all have attributes, okay and one of the attribute is the class, okay? So 1 second over here. Okay. Now, what happens is if you want to apply any sort of CSS, what you would do is you would mention the class, and then you would basically add the CSS in the CSS file, and that CSS will be for this particular class. That is how it'll work, right? So you have to write CSS, and you have to make sure that the class names match. But with tailwind, what happens is if you configure this particular framework, you have to just make use of the classes, and you don't have to actually write any sort of CSS. So let me show you what I mean. So if you go to docs over here, Okay, let's say, if you go for dark mode, you can see over here. Okay, how can you implement dark mode in using tailwind? So you can see over here, you can just make use of BGite. BGiwhite means background white. Okay, dark BG slate 800. So basically, depending on the classes, what will happen is everything will be applied. So I'll give you a few examples like display over here, box sizing, okay. Container. So if you're creating container, you can specify SM, which is small, medium, large, extra large to Excel. You can make use of this. Okay? You can say PX, four over here. Okay, so these are all classes, basically you use in every class has a meaning. And on the basis of that, the CSS is auto generated. Now, a simple example is padding. Okay? If you want to add padding, you'll say P zero, so this will be added. Padding of zero pixel. If you say PX zero, so padding left will be added and padding right will be added of zero pixel. P zero means padding top and bottom. PS means padding in line start. So these are so you have to just make use of this class and these properties will be auto added. That is how it works. There are several examples and go through it, and it might seem, Oh, I have to remember all of this, but it's not that tough. As you start using it, you soon get a good grip of this, and you start basically memorizing and remembering the class names. That is how things work. Okay? So you can see over here, these are the examples padding top six. So padding is added. Padding right four, so padding is added. So it works that way. And there are like, you can go through this documentation over here, okay? And there is ample like you can see background attachment, background clip, background color. There are ample of examples and things that have been mentioned over here. So you can just take a look. Okay? So this is amazing. Okay, because you don't have to write any sort of CSS. You just make use of something that is prebuilt and done for you, okay? So that is tailwind. I would encourage you all to go through this website and take a look at it. Okay? Now, keep in mind this website keeps on changing. They might change the UI or something. So depending on when you are watching this video, you might see a different interface, but don't worry, okay? Still it's not it won't change that drastically, okay? The concept and the crux will still be the same. Okay. So just explore this. There are quite a few examples here on the home page as well. You can see quite a few examples, okay, for colors. Okay, example for typography. Okay, you can see shadows. Okay. So yeah, this is it. You can see playful, elegant. Okay. You can see how playful y can be made. You can see this entire CSS is being the class names, you can see the class names, what all class names are being used. You just have to mention the class name. You can see elegant look Brutalist look. Okay, playful symbol. So all sorts of designs are possible is what these examples demonstrate over here. Responsive is also possible. Okay. You can see SM, MD, LG. So this is on small devices, medium sized devices, large scale devices. Okay. So you can specify the classes that way. Okay, you can see over here. This is how this is created. You can see. Okay. So yeah, that is it. You can go through the examples. There are quite a few examples. Okay. I love browsing and seeing these examples. They are so elegant. Okay. So just go through these. You will understand the importance of why this is amazing, okay? And how things can change if you start making use of tail went, okay? 3. From Scratch: Creating Your First HTML Project with Tailwind CSS: So now it's time that we play around a bit with tail vent CSS. So what I'm going to do is I'm here on Visual Studio code. I have my browser also open side by side. Okay. What I'm going to do is I'm going to create a new file, okay? Select a language, of course, HTML. We'll create a simple HTML file. Okay, I have some plug inside it which can help me generate some boilerplate code. Okay. And I'll keep a lot of things simple. I'll say hello. The title is hello of this particular webpage. I'll just zoom out a bit so that you can see what code is being generated. Okay? You can see this code. It's a boilerplate starter for HTML. Okay? Now, we'll make use of tail wind over here. So I'll come over here. Okay. And I'll scroll up. Let's go to documentation. Okay, and let us see how you can make use of it. Okay? So this is all the installation part, okay? This is the installation for tailwind CLI. We'll make use of CDN. Okay. So here, you can see how tailwind can be used. Okay? So we can make use of third party plugin. Okay? There are a few examples in which tailwind can be used. Okay? So what I will do is, I'll copy this code. Okay? I'll say script. I'll get the script element. Come over here. I'll add script in head. Okay? This is done. Oops, I accidentally press Save. The file is not saved. That is okay, but I'll copy this as well. I'll come over here. Okay. And here in the body, I'm going to paste this, okay? So yeah, we're making use of, you know, some classes over here. Okay? You can see some classes. Now, one thing I would like to mention your classes are added. Okay, let me first save the file. I'll save this file on desktop, okay? I'll save the file on my workspace where I'm creating this project to keep things simple. So what I've done is I navigated to the folder where this file was created, on my local system, and I just double clicked on it to open it onto the browser. And you can see, without writing any sort of CSS, just by using, you know, text three Excel. I can say text four Excel, save this and the size will be a little bit bigger. You can see, okay, text seven Excel. It should be a valid class, o, and you can see how this is changing. Font bold. You can make use of semi bold also, semi bold over here. Okay, something like this. Okay, I will basically whatever you add over here, okay, that is going to pick that is going to be picked up. Okay. And you can see underline is also being added. You can also add Italics, whatever you want to any sort of text formatting. Okay? You can take a look over here. And with time, it's just not about, you know, it's just not about this thing. It's just not about classes, remembering classes. Wit time, you will learn things and you will also start memorizing class names. Okay? You can see font style. There's so many Italic. If I add Italic, it will be converted into Italic. You can see over here. If I add Italic. Oops. So I want to keep underline, I'll see Italic fresh. You can see Okay. So this is the magic of tailwind, okay? Let us also create a little bit. Like, I'll just get rid of this. Okay? I'll comment this, and we can add one more sort of UI. Okay. What I will do is I'll just, you know, expand this Opt. Okay. We'll go full screen. Okay? And what I'll do is I'll save this you can basically create a little bit better UI as well, and I want to show you that. In body, what I'll do is I'll say class over here, I'll say BG IphenGray and I'll say 100 over here. I'll say flex, I'll say Justify center. I'll say items center. Basically, I'm bringing everything to center, horizontal screen over here. I'll save this. Okay. Now if you save this and if you see the output, oops, if you see the output over here, let me show you the output. So there's no output because we have not added anything within body. Okay. So let me do that and we'll see what the output looks like. So what I'll do is I'll add a div class over here, Div sorry, not Divlas Div element. Okay. And let me apply some classes like tailbin classes. So I'll see PG of white over here. Okay, padding of eight, rounded. Okay, LG. This is for bottle radius, shadow of Okay. You can see rounded LG. If you want to know any of the classes, you can take these classes. You can come over here, you can search for them. Okay. You can see border radius. You can see. Okay. So rounded LG, rounded medium, Okay, rounded. And this is rounded full. So depending on what class you use, you'll get the corresponding output. Now within this, what I can do is if you save this, let me save this o over here. I save this. Okay, and I'll refresh this. You can see this coming in over here, this white sort of patch. Now, let me expand this and let me finish what I'm trying to do. I'll add H one over here. I'll say hello. Okay. And I'll say tailwind, CSS, something like this. I'm just adding a hello message, and you should see the output. Okay. So if I do a refresh, you can see Hello, tailwind, CSS. I can even beautify this H one, so I can say class over here. Okay. Let me say text. I'll increase the phone size, so I'll say to Excel, font of bold, and I'll say text. I want gray, Okay, and gray of 800. Okay. Yeah, let us see what it looks like. So Idly it should look much better. You can see. Right? So Hello tailwind CSS is what you're seeing as A output. You can even add one P tag. You can just keep on building on this. This is absolutely awesome. P tag over here. You can say, here you can add any sort of message. This is subtext. This is a simple example using tailwind CSS over here. And I'll add some classes. Okay. So I'll say class of two text to Excel, font bold over here. Or I don't I should not have to Excel over here, because this is a sub text, so I'll just have text, Cree and instead of 800, I'll just feed it a bit. I'll say 600, a lighter sheet. Let me refresh. You can see. Hello tailwind CSS is a simple example using tailwind CSS. How does this look? You know? You have literally not written any sort of CSS over here. No CSS. You've just added this script tag, and you're just making use of classes, and just by making use of classes, you're seeing this amazing output. Okay? It's that beautiful. Okay, you don't have to focus on writing CSS, you just have to focus on using the right classes, and that is what tailwind is for you. And with time, I'll tell you, it might look a little bit tough right now, but with time, it becomes super easy and you start remembering classes. For example, these are the classes for rounded corners, so you remember it if you use it two, three times, you know? Can see rounded full, rounded none. Okay? There are different examples rounded R, LG, you can see. You can see how it's applied. There's so many examples, and documentation is also really good. Okay? So I hope you are enjoying this and I hope you love this example and the possibilities that you can do with this amazing framework. 4. React Meets Tailwind: Setting Up Your First Project Like a Pro: So now it's time that we begin talking about how can you set up your react project with tailwind? So what I'm going to do is here, I am on Visual Studio code, and I'm into the root directory of the folder where I'm building all the projects. Okay? Now, inside this root directory, we can create one more project which I already have react Tailwind. So this is a command which you can make use of to create a new react project using at. So you can say NPM create wheat at the rate latest. And this will ask you some questions whether you want to have which framework you want to use or which template you want to use. All of those questions like you have to select react, vanilla Gs and all of that. And depending on your preferences, it will create a project for you. I've already done this step, so I'm not going to do this again, but what I'm going to do is I've created this project called React Tailwind. I'll head over to this project, o and then I will run the server. So I'll say NPM run tab over here. Okay. The moment I run this, you will see this default page up here. Okay? Now, this project is created, but there's no tailwind configuration done over here. Now, to do tailwind configuration, you need to actually add or add a couple of config files or I should say only one config file, okay? And I'm going to show you the importance of that file and also how you can create it. So now here on tailwind css.com, if you go to get started, you'll be taken to these stocks, and you're going to see over here, how you can install tailwind, okay? So you can install tailwind this way. Okay, you can say NPM install hyphen D tailwind CSS. So this will make sure that the dependency is added into your project. Then you also need to initialize tailwind in your project, which means that you need to run this command NPH tailwind Css in it, and this will generate this tailwind config dot gs file, which is like a configuration file for tailwind. So this is something that we need to do. Okay? What I will do is I'll copy the commands one by one. I'll come over here, and I'll create a new set of terminal. Okay. One more thing I want to mention that this is the content of tailwind confit file. Okay? You can see this is what it looks like, okay? You can extend your theme, the default tailwind theme. If you want to add any sort of custom colors or any sort of them definition that is valid for your application, you can define them over here. The plugins you can mention, okay? And then you need to add this piece of code into the main CSS file or the root CSS file of your project, so that tailwind is picked up by your project. Okay? So these are some of the steps that has been given, and this is how you can make use of to check if tailwind is properly configured. Okay? Now, along with tailwind, okay, before installing tailwind, I want to tell you there are a couple of things that we also need to install. So this is just for installing tailwind, okay? Now, you'll see tabs over here. Using post CSS. Okay? So we are going to follow this approach. Okay? So we'll install tailwind and we'll also configure post CSS. Now, tailwind, of course, we know it's like a utility force framework for CSS, okay? Now, what is post CSS, okay? So post CSS is a tool for transforming CSS with Ja Script plugin. Okay so it basically does the job of processing your CSS and applying transformations like modification, adding support for future CSS features, CSS releases, and so on. Okay? That is what it's going to do, and then we are also going to make use of auto prefixor you can see over here. So this command, it says, Install hyphen D, tailwind CSS, post CSS, and auto prefixor. So Autoprefixor is a plugin that automatically adds any sort of browser specific prefixes into your CSS. For example, some browsers need hyphen webkit to be added, okay? And adding hyphen webkit in that particular browser will ensure compatibility. Mozilla Firefox browsers, Mozilla Firefox. They want hyphen moose to be added. Wherever there is necessary, right? And that is basically to have a better compatibility with the browser. The apps can have better compatibility. So all of that is added automatically, you don't need to manually add that. Okay? And this makes your CSS much more compatible and production ready. Okay? So I recommend adding these two things, okay. And I would that is the way we are going to configure tailwind with react. Okay? So I'm going to follow this approach. I'll just copy these commands. I'll come over here, okay? And I'll say CD. React tailwind, I'll navigate to the project directory. I'll pase this command, and I'll press Ender. Okay? Now, this will run. Okay, you can see it added packages. And if you go to packages in, you are going to see over here. You can see react. I'll just collapse this and I'll just minimize this so that there's a better view. Now here, I'm not closing Command line because we are going to need it, but you can see over here tailwind post CSS and you'll also have AutoPrefixor. Okay This is done. All right? Now, the packages have been added, which means dependencies exist. Okay? So now we need to do the next steps like initialize tailwind, okay. And we also need to initialize post CSS. So that is something that also I'm going to do. Okay. And that is going to create a init file like this, okay? And then, these are the content over here. So this is post CSS config JS, you can see, and this is tailwind config. Okay? And then we'll add this into our root CSS. This is what we are going to do. And then we are going to test things, okay? What I will do is, I'll come over here. So you can manually create post css conflict dot gs. You can see over here. You can manually create this or what I will do is I'll get this auto generated. So there is a command that we need to know. So I'm going to say N PX, tail wind CSS. In it, oops, hyphen P. Okay? Right now, if you open the project structure, there is no tailwind conflict file defined, let me run this and let us see what gets added. So you can see tailwind config got added and post CSS config got added. Okay? You can see over here the output as well. Created tailwind config file and created post CSS config file. So this is a command NP x, tailwind CSS in it, hyphen P. Okay? So if you open these files, you can see this is post CSS, okay? And this is the file for tailwind config. You can see both the files, okay? And post CSS is over here, basically. So this is making use of tailwind and auto prefixor as well. And this is tailwind config file. Now, if you're still confused as to why we've added post CSS in first place, okay, I would like to reiterate that post CSS is a tool, okay, that allows you to leverage the plugins that exist. Okay? So like the name says post CSS. So basically, it does the job of post processing the CSS, okay? Like improving it for browser specific compatibility and all of that. So basically, if you want to add plugins, into your application, you need to make use of post CSS. You can see over here in the post CSS config, we've added tailwind CSS, we've configured tailwind CSS, and we also saying that makes use of autoprefixor. Okay. Auto prefixor what it does is it will add browser specific CSS tags into your CSS. Okay? That is what it's going to do. Okay? So yeah, that is what we have done, and all the dependencies have been added over here. Okay. So post CSS is just a just a tool that allows you to leverage plug ins that exist. That is what it is. So you cannot add autoprefixor without making use of post CSS, ok? So that is something that we are doing over here. Okay? And I hope this is making sense now as to why we are doing what we are doing. So this is just one time configuration that you have to do, and later on then we are not touching this, okay? So but you need to know why we are doing. Okay? So that's important. Now, these are things you need to add over here. Okay? So you need to make sure that all the parts in all the template files, basically, so it says over here. Add the parts to all the template files, like all the HTML files, JavaScript files, JSX files. So if you come over here. Okay. Okay, so it's not added. Okay, so we need to add that. So what I'm going to do is I'm going to copy this over here. Okay. And I'm going to paste it over here, okay? And a t. Okay. Now what I'm going to do is I'm going to follow this fourth step. I'm going to copy this, ok. And let's come over here and over here in the main CSS. So where is the main CSS. Okay? So we'll go into the SRC folder. Here we have app dot CSS, which has some CSS, and then we have index dot CSS, which also has some CSS. So I'll get rid of both because we don't need both. So app dot CSS also. Okay. So we've got rid of everything. Now in index dot CSS in the root CSS file, and so this is being used index dot CSS over here in main dot GSX. So what I will do is in Index dot CSS, I'll add this, okay? Now, this is added, okay? And then what we need to do is basically, we need to test tailwind, okay? So I'll copy this. And I'll be adding into my project. Okay? But before adding into the project, just see one thing. Here we remove the CSS, but even after configuring tailwind, okay, it's not bringing in the tailwind effect, okay? And that is something that I can sense. Okay? And I know what the issue is. What I will do is, I'll just stop the server. Okay, stop the server and I'll restart so that the new configuration files are picked up. Okay. Let's see if Okay, so now you can see tailwind has been taken into effect, o the UI changed. The problem was due to the restart. So we created new configuration files which are picked up during restart. Okay. Also, one more thing I'll do over here is I have HTML GS. Okay. I'll also add GSX over here. Okay? So I'll also add GSX, okay. And TSX, which is for typescript. Okay. And I'll see if this. Okay, so this will be taken care of. Okay? What I will do is, this is done. Now I'll copy this piece. Okay. Let us come over here. And over here, I'll just go in, maybe let us go to mean dot Aix or app dot GSX. App.j6 is having this code that is being rendered to you. Okay. I'll just minimize this. What I would do is I will get out of this entire TIF over here until here, and I'll just piece this. And I'll press Tab twice, save this and you can see. It says text of three Excel and font of bold. And underline this, okay? And you can see a decent looking UI coming in over here, okay? And this is style using tailwind. Okay? Like, there is not much that we have done over here. Okay, we have just copied the code, but we have also written very simple CSS. It's it's not that tough. Okay? We can even write some CSS on our own. So what I can do over here is I can get rid of this. Okay. And I can write my own CSS. I can say TiVo, over here, and I'll say class. I'll create a class. Okay, and I'll say class name is BG hyphen White. Now, you can see all the tailwind classes suggestions over here. So Visual Studio code is suggesting me all the tailwind classes. These are all the tailwind classes. So instead of typing, I have to just say BG gray, and it will give me suggestion and I can just select it. Okay. And it will also show me the color which I'm selecting. So this is for background gray over here. If you're not sure what a particular class is, you can simply copy this and come over here and you can even search over here. If you search, you'll see it's for background color. You can see over here, background black, slate. So instead of slate and black, we are making use of gray. You can see over here. If you say BG Indigo, 500, it is going to give you colors like that, what is the CSS that it generates in the hindsight? Let me show that to you as well. So here, it says BG gray 100. If I hover on this, you'll see in the hover pop up, this is the CSS that is generated. Background color. This is the RGB value and opacity of one. You can see this is CSS that this class translates to. Now, how am I getting this feature of Auto suggest, first of all, for classes, the preview over here, and also what CSS is being picked up. So I'll tell you, there is one interesting plug in that you can install on Visual Studio code whenever you are working with tail went. I highly recommend that plug in. So here I've installed quite a few plugins, okay. So let me just expand this. Okay? The plug ins part. So you can see, there are quite a few plug ins for angular. Auto rename tag is one, bracket pair colorization is one I'm using. ES seven. This is for generating snippets. So if you want to generate any sort of snippets like components code, boilerplate code, all that you can do with this plugin. If you scroll down, there is intellisens plugin called Intellisence for tailwind. Okay? Where is it? I don't see. Preteer is also helpful here. Okay. I'm not able to find it over here. Live Server is also pretty good. Okay. Oh, here, tailwind CSS intellisence. So this is something that you need to install, so you need to search for tailwind CSS over here. Or on the plug ins marketplace, and you will come across this plug in tailwind CSS. Okay. I highly encourage you all to install this, because this is going to you can see over here in the screenshot itself, in the screenshot here. It is showing you the auto suggest. So it's helpful. It's really helpful. It is giving you auto suggestions, and basically, there are so many class names. It is also going to help you with preview. So it's really helpful plug in when you're working with tailwind. Because there are so many classes. Of course, class names you'll learn eventually over a period of time, but this helps accelerate. Now if I want to add padding, I can say P hyphen eight. And you can see it is generating this CSS for me, padding of two RM, right? So I know, okay, this is being applied. If I don't want padding of two REM, I can make four over here. I can make five. Okay. So I can make six. You can see padding of 1.5 became padding of eight. Okay. So based on that, you can do things, okay, rounded hyphen LG, and you can say shadow Shadow of G over here, you can see this is the CSS that is being generated. Okay? So all of this, you can absolutely do. Okay? So I'm adding PG. Instead of BG gray, I'll keep this to BG white over here. We'll see what it looks like BG white. Adding eight, rounded LG, shadow LG. Okay, I'll add one more div at the top, at the top, basically. So here, I'll cut this div and I'll come over here. Okay. And I'll just indent this. Okay? So this is done. And I'll say over here instead of BG white, I'll say gray. Okay, gree of 100. I'll say flex. Okay, justify center. Okay, and items center as well, something like this. And horizontal screen. Okay. So this is done, okay? I have a couple of tips. Now what I will do is, let me add H one over here. I'll add H one. Okay. And inside H one, I'll say hello. And tail wind CSS in react, something like that. Okay. And you can basically add the classes over here, so you can say Oops, so I can say class name. And you can say text hyphen to Excel, and font of bold. Okay. And you can say text grey gray of let's keep it 800. Okay. And yeah, this is done. So we should have some decent looking interface over here, if you see. So you can see, Hello tailwind CSS in react. Fair enough. You can also add subtext, so we'll add a subtext over here. I'll say Ptag over here, something like this. And I'll say this is a simple example using tail wind, CSS in react project. Something like this. If I save this, you'll see the output up here over here, but this is not styled, so I'll add a few class names over here so that it looks pretty decent. I'll say text grey. Okay? Text grey of let me make it lighter of 600 and you can see it's now lighter. Okay. So you can see this is what it is. If you make it full screen, you'll see this in the center. And I'm zoomed in a bit by 200. So this is the actual view in the hundred percent, like in the normal view. Okay. If I zoom in, I'll see this much quicker. Okay? So this is how you can configure, you know, tailwind CSS into your project. And this makes life, much more efficient, easy, as you can imagine, right? So I hope you enjoyed this and found this useful. I shall see all so. 5. Beyond Basics: Mastering Responsive Design and Custom Themes in React with Tailwind: Today, whenever you are building any sort of web application, responsive design is really, really important. With a lot of people moving to smaller screen sizes like tablets and mobile phones, it's likely that your application will be used on smaller screen sizes as well. And it's really important that you know how you can build your application for different screen sizes. Luckily with tailwind, this is really, really simple if you understand what you need to do. So I'm going to give you an overview of how tailwind allows you to build mobile friendly components and not only mobile friendly but also friendly for different screen sizes like tablets. So we'll go to Get Started, and here in Get Started on the left hand side, you will see this responsive design. And you can even search for responsive design over here, okay? So I'll just head over to responsive design over here, okay? And this is where we get to know about how tailwind allows you to write components or build components that are compatible with different screen sizes, okay? Now, when we talk about responsive designs in tailwind, every class that exist in tailwind has or can be applied conditionally for different breakpoints. Okay? Now, what is a breakpoint? Okay? Now, breakpoints are specific screen wides where the layout or the styling of the web page changes to ensure that the content looks good on different screen sizes or on different devices. Okay? So they are like a rule that decide how your design will adapt to different screen size. Let me give you an example. So here you can see, these are all the breakpoints, okay? These are all the default breakpoints. And these are five that exist by default tailwind. So when you say SM, you are basically saying that the minimum width of the screen should be 640 pixel. Okay? When you are saying MD, you are saying the minimum width should be 768 pixel. For LG, the minimum width is 1024. For Excel is 1280. For two Excel, it's 1536 pixels. And this is the corresponding CSS, okay? So this is defined Y default. Now, if you want to add a class or if you want to add a specific sort of design element or some sort of CSS to certain screen sizes, what you need to do is you need to use these breakpoints as prefix. So you can see over here. Here, there is an example of image image tag, and you're saying image width of 16. Okay? So width of 16 is the width by default. Now, when you say MD colon width 32, like W 32, 32 will be the width on medium screens, o and 48 on the larger screens. Okay. So larger screens means 1024 pixels and above. Medium screens means 768 pixels and above. Okay, so that is how this is handled. So this MD and LG prefix makes sure that depending on the breakpoint definition that exist, okay, these CSS are applied conditionally depending on the device size. And yeah, before this, before making use of all of this, you have to make sure that you have added a view pot meta tag in the head document. Okay? In the head of your document, I'm sorry. So basically, if you come over here in our application, okay? And if you go to index dot HTML, you need to have this viewpot over here, which is present by default. Okay? But if something is not working, you can cross check it, okay? But this needs to be present. And this is how it works. So I hope this is making sense, okay? And this works for every utility class in the framework. So there are classes defined right in tailwind. These are all the classes. Right. And you can use this prefix or these breakpoints with any sort of classes. You can see. That is what it means. Okay? So you can change literally anything at a given breakpoint, even things like letter spacing or cursor styles. Okay? Now, here's an example basically that they have given. Okay, you can change the screen size, you can see how this changes. So this is completely using tailwind, you can see how this changes. And here you basically have the CSS as well. You can see. So by default, the outer tif is displays block, but by adding MD flex, it becomes display flex on medium screens and larger. So if the screen size becomes medium or larger, it becomes flex, you can see, right? So this is how it controls. You can see the shrink is also being added. Okay. So to prevent shrink on medium screens and larger, you have made use of MD shrink of zero. Okay. So yeah, this is the thing over here. Now here you can see, okay, tailwind uses mobile first breakpoint system, meaning you can, similar to what might be used to other frameworks like Bootstrap. Okay. What this means like unprefixed utilities. So if you are making use of uppercase. Okay, this will take effect on all the screen sizes while prefixed ones. So if you are prefixing the uppercase with MD, it will only take place at a specified breakpoint and above. Now for MD, what is a breakpoint? For MD, the breakpoint is 768 pixels and above. Okay? So it'll take place or it'll be applied. If you use MD MD colon per case, it will be applied only above those screen sizes and above, okay? So here you can see, you can see over here, div class SM text center. So this will only center on the screens above 640 pixels and wider, not on small screen sizes. Okay? Now, text center, this will center text on mobile and left align it on screens like 640 pixels and wider. Okay, so this is how you can make use of, you can go through this entire thing. Okay? Now, one amazing thing is you can also customize your breakpoints. Okay, so I told you, this is what Tailwind provides by default. What tailwind provides by default. Now, let's say for my application, I'm going to define a different size for MD, LG, and I want to have my own customization. So you can customize, if you scroll down here, you can customize it, so you can have under theme in tailwind conflict has. You can have screens, and you can define your own screen definitions over here. Okay. You can define it the way you want. So tablet is 640 pixels. Laptop is 1024 pixels, desktop is 1280 pixels. Okay? And there is an additional document for customizing the breakpoints. So here you can see how you can customize the screens. Okay. You can even customize the defaults. You can add these are the default. These are default breakpoints that are added. You can customize them if you need. Okay? You can override a single screen. So for example, if you want to override LG, the breakpoint for large screens, you can do that like this just by specifying LG. You can add new breakpoints like three Excel. So it goes into two Excel. But if you want to add three Excel, you can do that. Okay? All of this is customizable. It's totally up to you and you can make use of it this way then. Whatever name you've given over your tablet, you can use it this way. So it's that amazing. Okay? Just go through this go through this arbitrary sorry, not arbitrary. Just go through this documentation over here, and you will learn a bit about this. We'll also take this into action. So what I will do is I'll switch over to my code base. Okay here what we are going to do is we are actually going to see how we can actually customize or how we can actually build responsive designs. That is what we are going to learn over here. Okay. So first thing first, what I'm going to do is I'm going to close this. I'm going to come into app dot Jex. Here I don't have anything. I'm going to add Dev over here, something like this. Okay. So DV is added. I'm going to say class name. Oops, class name. I'm going to say PG of cra of 100. Okay? And I'm going to say P hyphen four. Okay. So this is something I'll do, and I'll add a list over here. So let us add a list and let us see how you can make these list list items responsive. Okay? So I'll say class name. Oops, class name as list none. Okay, so I'll say list. None over here, you can see. Okay. And I'll add the list items, so I'll say LI over here. I'll say item one. Okay, item one. I'll copy this. Okay. I'll say copy item one, item two, and item three, basically, I'll add. Okay, so this will be two, and this will be three. Now if I save this, you'll see item one, two, three. If I get rid of this class, you'll see item one, two, three being added. You're seeing a light background color because of the CSS that I have applied at the top. Okay. So these are list items. If you add class name list none, it will be converted into something without list. Now what I will do is I'll add some CSS over here. I'll say class name. I'll say BG blue over here. Okay. I can say BG blue of 500. I can say text white. And I can say P two, padding two, and I'll say rounded LG, something like this. Okay, you can see this first one got converted into button style thing. Okay. I'll copy the CSS, and I'll apply to all three over here. So I'll add it over here, and I'll add it over here. Okay. Now let me show you a problem. So if I go on bigger screen size like this, it is unnecessarily wasting the right hand side, right? It's unnecessarily wasting the right hand side of the screen because this button is just getting stretched like this. It's not good. So on larger screen, I want to have them horizontally stacked. Okay. And on smaller screen, this looks good. On smaller screen, it has to be vertical. That is fine. Okay. So there is I can also add margin over here. Okay? I can say margin of two, like so. Okay. Margin of two is better, I feel. Let me add that. Okay. Yeah, margin of two. Now this is vertically stacked. This is vertically stacked again on a bigger or a larger screen size. This layout is fine, but it's fine for mobile, I would say, but waste is a horizontal space on larger screens, and it's not making efficient use of screen real estate, right? That's a problem you understand. So what I'm going to do is I'm going to add some CSS over here. Okay? So first thing, what I would do is I would come over here and I'd add a few classes. I'll say MD. Okay? So for medium devices, Okay, medium devices and larger, I'll say colon, pix Px of four. Okay. And yeah, this one thing I'll add. And at the top over here, when we are specifying the list type of none, what I will do is, I'll say MD, ClinOopsFlex. I'll change it to flex. Basically, the flex box or a horizontal flex box on medium sized screen or a larger screen. Okay? And I'll say MD of cap of four. Basically these two classes are applied on larger screen sizes. So you can see on small screen size, nothing happens to change, right? But let us drag this. Okay, you can see now changed from small to large. You can see earlier this was not happening. Okay? So you're seeing gap over here, the gap between buttons because I've added this gap of four. If I get rid of this, you can see the gap is reduced. If you add MD gap four, this is going to come over. Okay? So for a certain screen size, this appears. And it's pretty you can see this and on larger screen size, it is. So if you're viewing the website, the same application on desktop, it appears horizontally stacked. But on a smaller screen size, it becomes vertically stacked. That's the beat over here. Okay? So to summarize, what we are doing over here is we are converting the unordered list over here into a horizontal fleck box on medium screen size, okay, or larger. And this we are doing with the help of MD colon. Okay? This is a breakpoint that is defined in tailwind CSS, and we are making use of it, okay? So I hope you have been able to follow along, and I hope you have some good clarity as to how this works. Now, I'll show you one more thing. I'll show you how you can configure or add some sort of custom theme into your tailwind. So let's say I have I am working for a big company, and there is a predefined color scheme that I want my application to reflect. Okay, so I can make use of that. Okay, and there's no harm in customizing this. So I can go to color palette, okay, online. Okay, and you can see over here, these are the color palette. Let's say, I'll pick this kind of blue over here. Okay? And I'll come over here to tailwind confit CSS. What I can do here in extend, I'll have colors, like so. Okay. I'll say Colin, something like this. Okay, a la comma over here. And here, I'll say, uh, Custom blue. This is my blue. Okay. That I'm specifying, I'll say Colin and I'll add this something like this. This is a custom blue. And now instead of blue over here, I'm making use of blue, normal blue, right? So what I will do is I'll come over here. Instead of BG blue, 500, I can make use of custom blue over here. I'll say custom blue. You can see BG custom blue has come into suggestion. I can see if this. Okay, this is not looking that cool. Okay. I probably need to do a restart because I believe I changed the configuration and it's not being picked up. So let me restart and let me refresh, okay. So one problem that I see over here, the reason why this is not being applied is I have missed hash over here. Okay, so color codes should start with hash. And the moment you save this, you'll see it up here. Okay? So there's no need to restart. The moment you change any sort of configuration over here, it applies pita fad. And you can see this is a different blue than what we had initially. So I can add my own custom theme over here, o Without any issues. And I can make use of it over here the way I want. You can see the color is also coming in. It's also auto suggesting me from this plug in that I'm making use of the intellisense. It's so amazing that it's picking it up from the configuration file and it is showing it to me. It knows that I've configured a custom color over here. If I save this, you can see the color being changed. Now, this is a custom blue that I have and not what was pre existing. This way you can customize literally a lot of stuff over here. You can build your own theme over here, okay? And you can define your own fonts, your own theme, and you can make use of it everywhere in the application without hesitation. Of course, there is a very good default library that exists. But when you're working on production grade application, this is a common scenario that there are a certain set of colors that companies would want to use, and they would want to reflect their brand colors into the application. And those brand colors might not be there by default, and you might want to add them over here. So this is how you would add and it can be used across the entire project. I hope this has been valuable and I hope you love this. 6. PROJECT: Building a Dynamic Card Grid with Filters Using React and Tailwind CSS: Now, implementing dark mode, light mode is one of the common features that modern web applications have today. If you're working on a production create setup, it's very likely that your boss might ask you to add this feature into the existing application that the users are using. This is an amazing feature wherein the user can toggle the theme based on his or her preferences. That is what exactly I'm going to show you in this video wherein we are going to build a small project that you're seeing on the screen, which is going to help us toggle between dark and light mode. So here, this is the application. There is not much of a design. It's pretty simple. I've added some text over here purposely so that you can see how the color of text changes depending on the theme, and I have a pattern element. Now you can disable dark mode over here. You can see light mode and the text color changes to black and the background is white. You can enable dark mode. So disable nm you can toggle between these two modes. And this is basically stored locally, this preference. You can refresh this and you will still be on dark mode. If you enable dark mode, or if you disable dark mode, and if you refresh, you will still be on light mode, because that's a preference that you've selected. Okay. So the preferences are also stored in the user's browser using local storage, and that exactly how to do this exactly is what I'm going to show you. Now to implement the same head over to tail wind CSS documentation and do a quick search over here and search for dark mode. Okay? Now, how to come to documentation, I'll show you. So on the website, you can come over here and say get started or you can also search over here. You can say dark mode over here, and you'll come over here. Okay. So you'll be amazed to see it has a default support for dark mode. Okay? So it says, uh, tailwind allows you to make use of this feature, and how you can do is you can enable like this. You can say dark mode light mode. So what it does is it basically allows you to include a dark variant. So it says tailwind includes a dark variant that lets you style your sight differently when enabled. So you can add dark colon and the color scheme or the style that you want to have when dark mode is enabled. So you can do this over here. You can say dark. So in dark mode, I want to have background as slate. Okay. And in dark mode, I want to have text as white. The text color should be this as well. Okay? This is something that you can define. And then in tailwind CSS, what you can do is, sorry, not tailwind CSS. In the configuration file, what you can do is you have to make a little tweak to the config file. So in the conflict file, you have to just add this dark mode, cooling and selector. Now selector will be class over here in our case. I'll show you how you can implement this. Okay. And whenever you say class, okay, it basically toggles on the basis of this CSS that you have applied. So let me implement this and show it to you, but this is a documentation that I wanted to highlight. Okay? You can see over here. The entire code is given over here, okay? You can just take a look at this. Okay. I'll just like switch over here to IDE. There's literally no code being added right now. So we'll be starting to write some code that will help us implement. Okay? So what I will do is here, first of all, in Dev, I'll say class name. Okay. I'll add a few classes. I'll say padding of four. Okay, BG of white. So this is a default background. Okay. And I'll add minimum H screen. Okay. Oops. Something like this. Okay. And over here, I'm going to say each one, okay? And here I'll say, welcome to Talk. Mode. App something like this. Okay. And here I can say class name is text, Iphone to Excel. Okay? You can see welcome to dark Mode app. Okay. And I'll do I add of PTAC, and I'll say this is an example of implementing dark mode using tailwind. CSS. Okay. So you can see this has come in. Okay? Now, what we'll be doing is we'll be adding a component that will allow us to toggle over here. Okay. So I'll say here I'll call this as tar mode toggle. This component does not exist, but we can create the component first. That is something that I can do. I can say dark mode, toggle, sex over here, and I can say const. Basically, this component will have all the logic. So I can say const function, and dark mode, toggle, something like this, and I'm going to have. I'm going to make use of arrow functions over here. Now, okay. I'll just Okay, yeah, I think, okay, I made a syntax error here. I'll just get rid of this. Okay. So yeah, this is okay. And now I'll say export, default, talk more toggle, something like this. Okay, and I'll get this imported over here. I'll say t, more toggle. Like so. Okay. Now I'll start adding some code over here. So what we are going to do is here, I'll add a button. Okay. So first of all, I'll say return, okay? Return over here and here. I'll say return a button. So we need a button that is going to control the toggle for this. Okay? So the button is going to have dark. So this is a text. I'll change this text, but for now, let us have this text. Okay. I'm first going to see class name. Okay, class name. I'll take this new line. Okay. Now, what is the class name that I want to specify? I'll say P two, PT of grey 200. Okay, gray of 200, and I'll say text of grey text scree is of 800 letter C, and I think this is it, I believe, round wt. I'll add round right over here. Okay, so this is the button that we have. Okay, nothing happens on the click yet, but I'll add on click Lesner. So on click, what we need to do is we need to set theta mode, enable and disable, basically. Okay. And for that, I'm going to make use of E state. I'm going to need a state over here inside the function. Okay, so I'm going to say const, o and I'm going to say is TAC mode, and I'm going to say set is TAC mode. So this is the Okay, this is the function, sorry, not the function. This is state. I'm going to say use state. And I'll say over here. So we are going to make use of local storage, okay? So I'm saying over here. Or something like this. Okay. So let us say within us state, I'll add arrow function. And here, I'll say return. Okay, local storage, dot, Get item. So I'm making use of local storage, and this is the key over here. So what theme user has applied, that is what I'm getting from the local storage. Okay And I'll say it's equal to dark. So if this is dark, this will be true, else, this will be false and I can actually like, have this a string. Okay? And I'll have strict comparison. Okay. So this is done, okay? We have a state now, and what I'm going to do over here is on click, I can say, so when the user clicks, I'm going to say over here, like so. Okay. And here, let me I'll remove this. I'll say set is dark mode. And I'll reverse whatever is there in Stark mode. Okay? So this is going to make sure that the value always reverses when you click. So it always toggles when you click on this. That is what this is going to make sure. Now what I will do is I'll have E use effect hook over here. Okay? Now, this entire thing, like I said, is being controlled by this select over here. This dark variant. What I mean is. So I need to add the dark variant everywhere. Okay? So what I will do is first thing first. I will add this to the button itself. So I'll come over here. And here in the button, I'll say over here, dark is dark, Colin, BG, gray, and I'll have G gray of let's say 900, pretty dark. And then I can have dark. I need to have text also. Text is white white text, something like this. This is done. Now on click, if this changes, what we need to do is we need to make use of use effect. So I'll make use of use effect hook over here. Let me expand this a bit, use effect. Now what do we do in use effect? I am going to flip this on the basis of the value change in is dark mode. So what is the syntax for use effect? We are going to have something like this. We have a function, syntax, and we have a dependency array. Now, independency array, what we need is dark mode. So when this value changes, you will run this use effect. Now inside this, we need to have the logic. Okay? So I'll say document, dot, document element, dot class list. Okay. So I'll add this class called TAC. I'll say tot, add because dark is the variant, right? So I'll say over here, TAC something like this. So what it will do is it will add the dark variant everywhere. Okay. And I'll update the local storage as well. I'll say local storage, dot set item. Okay. I'll say team So I'll reverse the them value. I'll say Tak something like this. Okay? Get rid of this. Okay? So this is done. This is okay, we need to do this we need to run conditionally, so we need to say if dark mode. I is dark mode, something like this. So let me. If I dark mode is true, we do this. I need to run the else block. I'll copy this. I'll see else over here and I'll piece this. Now if this is there, I'll say class list, dot, remove document element class list dot remove dark over here. Okay, so this will add dark and this will remove dark. And here, I'll say light. I hope this is making sense. Now let us test this. Let's see how this works. Let me collapse this you see. Oops, this won't work. So this won't work because I have not added this to my config. I need to go over here. I'll come over here. I'll say dark mode, colon glass. Okay. Let me see. Okay, invalid scope, it says, Okay, there is a problem and the problem is likely in the syntax. Okay, so this would be in a single code. And now if you see, you can see, it's changing. So what is happening is depending on the value of is dark mode, the class is being applied and removed. Yeah, you can see this class from all the class list, dark is being applied and removed. Depending on what the value is there over here. And what is dark? Dark is this. Okay? Now, what we can do is we can apply this everywhere. We can also apply this in app dot JSX. Okay. What I will do is in app.j6, I'll add background and all. Okay. So here in DIV here in Dev I can say dark, okay, dark of Colin. I can say PG gray BG gray of let's say 900, a little bit dark. I'll say dark is text of white. Text of white, something. Okay. I did this and now let us see dark mode, you can see, it's toggling now, right? So this is what we built out. And if you come over here, if you see it in full screen, this is what the application is. You can see. Even if you refresh, because we are making use of local storage. Now I'll show you how it's being stored in local storage. Good inspect, right click inspect, go to application and go over here in local storage. So if I zoom out a bit here in local storage, you have this local host 1573. So you will see the value of them over here. So this is where we are storing. So this will change. You can see. So it's being stored over here. And if you clear cookies and all so this will get removed. We're making use of local storage basically to implement dark mode. Okay. I hope this is making sense. So to summarize, tailwind has this in built support for dark mode, okay? And it includes a dark variant which you can make use of this way. So you can implement what all styles you want to have using the dark variant, okay? And then here in the dark mode, you can say selector. So selector is class over here, okay? So you can see the selector strategy replaced this class strategy. Okay, so this is the selector strategy right now. This is the latest latest update over here. So if I make use of selector over here, let us see if this works. Okay, so I can update this with selector. You can see Okay, so actually, it's in the latest version, selector is supposed to be used. Okay? I was using class, but class is also fine, okay? But selector is something that you can use. That's perfectly okay. All right? Because I believe select class won't be valid in the upcoming version. So be sure to make use of selector, okay? Class is also the same. It means the same. And you can see this will be white. Okay, if the dark mode is not enabled, and if dark mode is enabled, then what will happen is this will happen. So what happens is when you enable dark mode, okay, there is this class added to HTML, which is called dark. Now, when this is applied, everything in dark is being applicable, and this is not valid anymore, okay? So this thing is added, this attribute is added, and that is why you see the entire application turning dark because you have dark selectors everywhere. You're making use of these selectors everywhere, right? So wherever you have defined anything using dark, it showcases that. Okay? So yeah, this is how things work, and I hope you enjoyed building this small dark mode application. All right. So I hope this was useful. 7. Course Conclusion: Well, congratulations on completing this course. You have come a long way mastering the integration of tailwind CSS and react to build responsive, customizable and visually stunning applications. From setting up your project to implementing advanced features like dark mode, you now have the skills to design modern web applications that look great on any screen size. Your final project, a fully functional react application with dark mode is a testament to the practical knowledge that you have gained in this course. Remember, tailwind CSS isn't just about saving time, it's about giving you creative freedom and simplifying complex designs as well. I encourage you to continue experimenting with tailwinds features and apply them in your future projects. Also, share the work with the community and don't hesitate to revisit the lessons if you need a refresher. With this course, you will find a class project that you can take a look at and share it with the entire class for the feedback. Thank you for taking this journey with us. I am so happy to be a part of this particular journey, and I can't wait to see the applications that you will build with React and Tailwind CSS. Best of luck and happy coding.