Vite: React & Tailwind

This project will provide a template to work with React and Tailwind using Vite.

Github Page

https://jengrik.github.io/vite-react-tailwind-basic-setup/

Designed by: Jengrik

Screenshot

Getting Started

In a Vite project, you can work in two different modes: development and production. Each mode serves a specific purpose and has its own configuration settings.

Understanding how to switch between these modes is essential for efficient development and deployment of your Vite project.

Development

1. To start your Vite project in development mode, open a terminal and navigate to the project's root directory.

2. Run the following command to install the project dependencies:

   bash npm install

   This will ensure that all required dependencies are installed.

3. Once the installation is complete, run the following command to start the development server:

   bash npm run dev

4. As you make changes to your project's source code, Vite will automatically update the browser with the latest changes without requiring a full page reload. This hot module replacement feature helps in faster development iterations.

Production

1. When you are ready to build your Vite project for production, open a terminal and navigate to the project's root directory.

   Run the following command to create a production-ready build:

   bash npm run build

   This command will generate an optimized bundle of your project in the dist directory.

2. Once the build process completes, you can deploy the contents of the dist directory to a static file hosting service or a web server of your choice.

3. The production build will have minimized and optimized code, ensuring faster loading times and better performance in a production environment.

References

This document is only a guide that aims to present the basic configuration of a simple project. The information was taken from the following sources:

• Vite
  https://vitejs.dev/

• React
  https://react.dev/

• Tailwind
  https://tailwindcss.com/