Why Vitejs?

Unlike traditional build-tools vitejs doesn't re-bundle the whole project, meaning Vitejs is blazingly fast no matter how much larger your application gets.

Now follow the following super easy steps to create React Vitejs⚡ project with TailwindCSS.

Creating a new Vitejs project

Run the following npm command in order to initialise a new Vitejs project.

npm init @vitejs/app

Enter your project name

Select React

Choose your flavour

Now open the project directory and install all the packages

cd <project name>
npm i

Dont worry it won't take long to install everything

Installing TailwindCSS

Install TailwindCSS and create TailwindCSS config file by running:

npm -D tailwindcss@latest postcss@latest autoprefixer@latest
npx tailwindcss init -p

Setting up TailwindCSS config file

Configure Tailwind to remove unused styles in production

Add ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'] in purge section of the config file.

// tailwind.config.js
  module.exports = {
   purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
    darkMode: false, // or 'media' or 'class'
    theme: {
      extend: {},
    },
    variants: {
      extend: {},
    },
    plugins: [],
  }

Now enble TailwindCSS JIT engine

Add mode: 'jit', in your TailwindCSS config file.

// tailwind.config.js
  module.exports = {
   mode: 'jit',
   purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
    darkMode: false, // or 'media' or 'class'
    theme: {
      extend: {},
    },
    variants: {
      extend: {},
    },
    plugins: [],
  }

Now run npm run dev to start the development server

---

Enjoy!

I hope this helped you, now enjoy the blazing fast Vitejs⚡ and comment down if you need help in anything