Create a Time-Saving Template 🧩 with React, Vite, and Tailwind CSS

Why You Should Create a Template

Creating new React projects can be both time-consuming and redundant. In this guide, I’ll show you how to set up a reusable React template with Vite and Tailwind CSS. This approach allows you to skip the initial set-up process and jump straight into development for future projects.

If you’re looking for a quick start, I’ve created a ready-to-use template on GitLab here. Just clone it to your machine, and you’ll be up and running.

Now, let’s get started by setting up a remote repository.

---

Setting Up a Remote Repository

1. Sign In to the Version Control Platform of Your Choice - I’ll be using GitLab, but any other choice works
2. Create a New Project - In GitLab, this can be done by clicking the “+” icon on the upper left corner by your profile picture
   • Select “Create blank project”
   • Choose a project name, slug, + privacy level
3. Hit the “Create Project” Button
4. Under the Blue “Code” Button, copy the “Clone with HTTPS” link - We’ll need this soon, so just hold onto it

And you’re all set! Now your template will be automatically linked to this remote repo when you clone it.

---

Initializing the Template

Let’s explore the first steps to creating your template

1. Navigate to the Folder Where You Want to Store the Template:

   • Open your terminal

   • Change into your desired directory

     e.g. cd my-projects

2. Clone Your Template:

   • Replace with the one you copied in the previous section
   • Change into your new template’s directory

   git clone <Remote-Clone-Link>
   cd <new-template-name>
   

3. Initialize a Vite Project:

• Use “.” after vite@latest to prevent Vite from creating an extra folder inside the cloned git repo
  

  npm create vite@latest .
  

• Select “React” and “TypeScript” when Vite prompts you for project options

💡 Note: At this point, I like to remove a lot of the default Vite files + assets

---

Installing Packages

Feel free to customize this section. Here’s my preferred package combination:

• tailwindcss - a utility-first CSS framework
• postcss - process and optimizes CSS files
• autoprefixer - adds prefixes to ensure CSS compatibility across all browsers
• prettier - auto formats your code to improve readability
• prettier-plugin-tailwindcss - ensures consisten Tailwind class formatting (personal favorite)

npm install -D tailwindcss postcss autoprefixer prettier prettier-plugin-tailwindcss

---

Configuring Tailwind and Prettier

• tailwind.config.js
  • content: specifies which file types should use Tailwind classes
  • theme.extend: allows you to create custom classes

// -- tailwind.config.js --

export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

• index.css - imports Tailwind’s base styles, components, and utility classes

// -- index.css --
@tailwind base;
@tailwind components;
@tailwind utilities;

• .prettierrc - allows Prettier to format Tailwind classes

// -- .prettierrc
{
  "plugins": ["prettier-plugin-tailwindcss"]
}

---

Committing and Pushing to the Remote Repo

You’re almost finished! To make this truly reusable, we need to save our changes to our remote repo

git add .
git commit -m"Finish react template"
git push

---

Final Notes

• Update Packages Regularly - Always check in on your project to ensure packages aren’t deprecated and that updates don’t break your project
• Remove the .git File When Cloning - This ensures that your changes to your new project don’t affect the template’s remote repo

---

Conclusion

Congratulations, by creating a React project template, you’ve significantly streamlined the setup process, saving yourself valuable time. Now, you can focus on actually building out your application and bringing your idea to life.

What did you think? I’m always open to feedback and suggestions, so feel free to share your thoughts or ask questions!