react tailwind css setup | react tailwind css | tailwind react webpack #tailwindcss #reactapp

hi friends welcome back to my channel my name is fva and today I'm going to integrate Tailwind CSS to my react application project I'm going to use the official documentation from Tailwind CSS and let's see if that works for us okay I already have one react application project setup for me uh I have very basic app. TSX with one route uh called home. TSX and if you want to see how it looks uh when I run it nothing just two labels welcome to react app and home like I said I will create Tailwind CSS we'll solve all the problems that we'll cross I also happen to have the web Pack set up for the compilation final Bild configuration so we'll also resolve all the problems that we face while we integrate this like you can see in the warning above create react app does not support custom post CSS configurations and is incompatible with many important tools in post CSS ecosystem like post CSS import the recommendation from Tailwind CSS is to use white parcel next CH or remix instead of Crea react app nevertheless we are still going to do that because I have my app built with create react application let's see what happens so first it asks me to create a react application I already have that we should install the Tailwind CSS and then we should create some configuration files tailin doc config.js index.css should have these three um Tailwind configuration set tail they should call Tailwind directives and then ideally it should work let's see so go back to the terminal we install the Tailwind CSS this is done let's try in CSS in it that means it creates tail. config.js for us uh let's go back to vs code and open this Tailwind config.js this is a default configuration for Tailwind like you can see next thing that the documentation asks is to add the content so I'm going to just call copy this from here and replace the current content in our Tailwind config.js file that simply means that you this should take into consideration all the JS jsx TS or TSX files that are in my SRC folder if you have your file scattered somewhere else you need to add the file paths over over here okay next this asks us to add these uh tailin directives to index or CSS file uh let's copy it and open index. CSS we just add this to the top once you copy these directives into your index. CSS file and this is your first time installing Tailwind or any post CSS loader in the vs code you will see the warnings like this unknown at rule at tailin CSS to resolve this in vs code you will need a extension which is called post CSS language support I've already installed it earlier disabled it just to show you that warning I'm going to enable it and then we'll see these warnings are gone thing is to check if the installation the configuration everything else is working fine so go back to your terminal restart your mpm once this has done successfully go back to your local host and we're going to just reload let's see if there are any errors in console no errors everything is just work working fine okay now we will go back to the documentation and we'll try some um styling I'm going to Simply copy this and paste it in my home TS6 let's see if this works there's nothing but just a header hello world with these styling so there should be font which is fold and underline with this size I saved it I'm going to restart my um server just to make sure everything is fine and we go back to our react application this works perfect okay let's try a couple of other things and see if that works I am going to Simply add a button and we are going to use some styling in that button let's say we want to add a color Ino 500 and yeah that's it um and the button will call clicking okay I saved it let's go back we see a button click P but there is no color background color why is that so because like it said previously it doesn't work very uh appropriately with create react app we need to install some post CSS loader for this to work for tailin to work we need few other dependencies in our project one of which is post CSS then we need post CSS loader this is something where that we need for web pack and uh last but not the least we also need Auto prefixer let's quickly install first thing that you're going to do is create a post CSS file uh which will be called post css. config do THS in my case if you don't have typescript you can U you should use JavaScript sojs here I'm going to import the Tailwind CSS quickly uh you know the syntax call C CSS then we require this Library here we will export some plugins very quickly so mod. exports and then let's add the plugins over here which is called D CSS that's it for um this one just got imported um as a side effect but we don't need it so I remove that just require T CSS add T CSS as plugin over here and we have exported this last change we are going to make is in our weback config file here in addition to style loader CSS loader we will need post CSS loader okay I think that's it um let's go back to our website and see if it works so you can see click me is very ugly just adding a background color to the button but meanwhile also added a click me click Works log event when you click on the button and this definitely works just a quick recap what all we do need for configuring Tailwind CSS with a react application and with P pack as the compilation bundle compilation Tool uh you will need certain um dependencies first of which is of course Tailwind CSS so we install that we need Auto prefixer as St dependency we need post CSS and we need posts loader once all these four dependencies are installed we we will need to create a post CSS config dots where we export tailin CSS plugin in the module. exports code last we go to weback config file and we add post CSS loader as a rule in the CSS now you might have noticed that we installed Auto prefixer but we didn't really use it it is not actually needed if you want to skip it that's completely fine however this is a post CSS plugin to past CSS and add vendor prefixes to CSS rules so basically if you write your CSS rules like this without vendor prefixes it automatically will use the data based on your current process popularity and then apply the prefixes for you this is recommended by Google and used in Twitter and Alibaba so I will also recommend that uh let's add this we will not see a change over here in this video because we are not going to actually use um very typical example of CSS in this video but you will see it when you use in the real project so just for the sake of clarity that this is something that you might need I'm going to use Auto prefixer over here I've already installed it and we are we what we need to do is just add it as a plugin in post CSS conf. TSS ts5 so let's go back restart our server and see so like I said you won't see any change today in this video but just to show you that it works and nothing breaks because you add Auto prefixer in the plugin SP that's it for the today's video I'll come back with something else in the next one keep watching and uh don't forget to like share and subscribe to my channel

Channel: Poorva

Views: 91

Keywords: tailwind css react, tailwind react, tailwind react project, tailwind react install, tailwind with react, tailwind warning vscode, vscode tailwind extension, vscode tailwind, how to set up tailwind in vscode, visual studio code tailwind, postcss-loader, postcss webpack, tailwind webpack, tailwind react webpack, react tailwind, react tailwind tutorial, react tailwind css setup, react tailwind setup, react typescript tailwind setup, how to set up tailwind in react js

Id: ooM5A0oSbyE

Length: 9min 55sec (595 seconds)

Published: Thu Mar 14 2024