Setting Up a Vite React Tailwind CSS Project | goodbye Create React App!

and one welcome the Italian de via in this video I'll show you how to easily set up a react Tailwind CSS web application using wheat I'm quite sure that this video will make you never use create react app again you'll be surprised on now with JS makes your development experience faster and leaner before we start with the tutorial let me spend just few words on wheat Latin said Norman Omen the name speaks for itself and this is totally true for wheat wheat is a French word that means quick it was born to be quick and it is very quick wheat is a JavaScript build tool for modern front-end web application it leverages the availability of es modules in the browser serving the source code over native esm with offers instant observical start pre-bundling dependencies using ES build which is 10 to 100 times faster than javascript-based bundles it offers a build command to bundle production code using roller it offers also template presets for almost all the modern JS front-end framework like react views wealth and more enough said now let's go straight into the code and please remember to hit like button comment in the comment section down below and subscribe to the channel foreign well we can now open our terminal so to start creating our brand new react.js application using the createvit tool but before to start typing any npm commands we need to perform a simple check we need to check which npm version we have installed in our local machine so simply type npm minus V and the version number will be printed out in your terminal but why we need to perform this check well simply because in base of the npm version we have installed the npm commands we need to write related to the create with tool are slightly different now let's see the two scenario cases if you have an npm version from six point something till to 7 the create tool command you need to run is npm space create space wheat at latest then the name we want to give to our project so in this case let's just type example then we need to pass the template flag so minus minus template and here we need to specify which front end we want for our web application so we may choose react view as well and many many others in this case for this tutorial since I want to show how to set up a react application with telwyn CSS using the vid tool we need to Simply type react well as I said this is the npm command related to an npm version from six point something till to 7. if you are in the case like mine right now in which you have an npm version greater than 7 point something you need to move your cursor between example and template flag add the space and then simply add minus minus so this is the right command for an npm version greater than 7. so let's press enter and this will initially let's say initially set up a brand new react JS application but why am I saying initially because if you are used to create react app create react app will let's say completely set up a brand new react.js application with all the dependents installed so you just CD into the newly created folder and then you can simply type npm run Dev and that command will fire up a new development server which will serve your application under localhost Port 3000 but in this case as I said wheat will create an initial setup because we need to install all the dependency needed by ourselves just running the command npm install inside the newly created folder so let's simply CD inside the newly created folder and run the npm install command so now let's wait for all the dependency to be installed and so we can then open this brand new react.js application in our IDE of choice well I'm gonna use Visual Studio code so for me simply code Dot so far so good well now to Simply test this bare bone react.js application created using the create with tool let's simply open the integrated terminal and run the command npm run Dev this will serve our application not at localhost Port 3000 like we are used with create react app but at local sport 5173 and here we are this is the simple react application setup using Create with tool well let's now think how we can install telwyn CSS in our react.js application so let's go back to our code editor let's simply stop the running process and type the command npm install minus capital D so it means we are installing these dependency as Dev dependency and then they'll win CSS then pause CSS and then Auto prefix press enter and let's wait for this dependency to be installed well now that these three dependencies are installed we can init a new telwyn CSS project inside our react.js application so let's type npx Tailwind CSS init minus P press enter and this will create a Tailwind CSS config file that namely stillwin.config.c.js and then a POS CSS config file namely is boss css.comvic.c.js well we can now move inside tailwind.config.c.js and here we have this module.exports object in which is defined the content property that expects an array in this array we will add all the parts of our templates file now if we are using again to create react app and sorry if I make this continuous comparison between create react app and create with but I hope it could be how to say interesting to you as you remember for create react app we just need to add aspart Dot SRC slash star star slash again star dot then we have curly braces and inside JS comma yes comma jsx comma TSX now what does this line mean simply means listen Tailwind all the templates file you need are located inside the source fold and also all the sub directories inside the source folder and you have to take into account all the file with this extension and so it's simply this line we were able to communicate to Tailwind CSS if our project was created using the create react tab tool but for width is slightly different because as you can see from the navigation bar here on the left the index.html file that we were using to see inside the source folder now it's outside so if with this simple line we were able to cover all the templates needed inside the source folder or create react tab for vid what we need to do is to also add dot slash so root directory index dot HTML and the comma we can now save and move to index dot CSS and this file is inside the source folder and here you have the index.css file let's remove all this bowler plate CSS code and then here we need to add the Tailwind directive for each style wins layers so it means simply type add tilewind and we have the base layer then again a tile wind and we have the components layer and then we have at tile wind and there we are the last utilities layer so the three Tailwind directives for each Tailwinds lace are correctly added and what we can do now is to move inside app.jsx file delete all the three Imports at the top Also let's delete this use state than older boilerplate code return it from that function and let's simply return div and let's pass some class name and some Tailwind utility classes so we can check if tile win this correctly set up and added to our react.js application and let's simply say with screen h screen and then let's give a background color of red 300. we can now save and what we expect to see now if we run our react JS application is to see a simple div component that is taking the 100 percent of the viewport width the 100 percent of the viewport height with the background color of red 300 so let's move to the terminal and run npm run Dev foreign CSS correctly integrated into it well we can close this tutorial for this video and if you like this type of content please hit the like button comment in the comment section down below and subscribe to my channel goodbye thank you the Italian Dev see you foreign

Channel: theItalianDev

Views: 24,611

Keywords: vitejs, vite js react, vite react, vite react tailwind, vite react tailwind css, vite react app, vite react js, vite js react tailwind, vite tailwind, vite tailwind react, tailwind css, reactjs, vite js tutorial, react tailwind, react js tailwind css, react js tailwind css project, react js tailwind

Id: 3YNijcxYvPk

Length: 12min 29sec (749 seconds)

Published: Wed Oct 26 2022