Quickly creating a React app with Vite and Tailwind

A few months back I wrote about creating a React application with Vite. At the time, I was just starting out with using Vite after learning about it on freeCodeCamp. Since then, I've created several small practice projects with Vite and am using it to currently create an Office Day Selector application for work, for my team to sign up on which days they plan to come into the office.

I've been spending some time on Scrimba as well, while I wait on more content to come out from freeCodeCamp. They have a wonderful React course where Bob (the teacher) has you immediately working out of a Vite-like React application. Early on I learned how to connect components, import files and pictures, and use props in my code to pass in values to my JSX. This course excels at getting you comfortable in a much larger file structure, compared to just a few files when you use HTML, CSS, and JavaScript. Prior to the Scrimba course, I was getting lost frequently in all these folders and files wondering where the right place to start was!

This all brings me to write sort of a sequel post to my Vite blog post linked above - adding Tailwind. Tailwind is a popular CSS framework used by small and large projects. It's utility based, and you add styles to your code by adding classes to your HTML or JSX in my case. 

Here is what I did to spin up a Vite React application with Tailwind in under 10 minutes or so (as a note, the time it takes me is much shorter than it used to be due to practice - if you're doing this for the first time, it may take longer and that's perfectly okay):

1. Created a React Vite application, using the directions in my previous post.
2. Opened the project folder in VS Code and removed all the default code in the Vite project that I didn't want - the Vite and React SVG files, the index.css file, the CSS code in app.css (but I kept the file), and the favicon code in my index.html file. I learned here that leaving the favicon code in will cause the code to error since it references one of the SVG files I removed. While in the HTML, I also update the <title> of the page to my application name.
3. Once my file has some default values removed, I add Tailwind to the project. I follow the steps listed on the TailwindCSS documentation page and pretty much just use this page for it. I found a few blog posts first that gave directions but found they were out of date and using terminal commands that were no longer valid. Lesson learned here: always use the documentation pages!
• I nagivated into my project folder in the terminal, then ran npm install tailwindcss @tailwindcss/vite to install Tailwind into my project.
• I added Tailwind into my project's configuration file, following the directions on the documentation page.
• Lastly, on my app.css file, I added @import "tailwindcss"; to bring in all the Tailwind styles.

And that's it! After doing this a few times, I've found that I've started to build a little muscle memory with creating Vite projects and adding Tailwind. And it's certainly not as intimidating as it used to feel.