Set up a React project with Vite along with Tailwind CSS

Here is the step by step guide to create a React project with Vite.

• Run the command npm create vite in the command prompt.
• Afer the script you will be prompted to enter a project name.
• After entering the project name, Vite will prompt you to select a framework. Select the framework as React.
• After selecting framework, Vite will prompt you to select language type.
• After selecting the language type, Vite will show the message as Scaffolding the project in the location.
• After that you can go to the folder and instruct to install the dependencies with the command npm install.

And here is the step to install Tailwind CSS as a Vite plugin.

• Run the command npm install tailwindcss @tailwindcss/vite to Install tailwindcss and @tailwindcss/vite via npm.

• Add the @tailwindcss/vite plugin to your Vite configuration.

  Copy

  import { defineConfig } from 'vite'
  import tailwindcss from '@tailwindcss/vite'
  export default defineConfig({
  plugins: [
      tailwindcss(),
  ],
  })
  

• Add an @import "tailwindcss"; to your CSS file that imports Tailwind CSS.

• After that you can run the project with command npm run dev or whatever command is configured in your package.json file..

References

DigitalOcean, TailwindCSS