How to Set Up Tailwind CSS in Vite React Projects

First of all, we will create a Vite project

Inside the terminal, type the following commands:

1. npm create vite@latest my-project

2. cd my-project

Now use the following commands to incorporate Tailwind into your project:

1. npm install -D tailwindcss postcss autoprefixer

2. npx tailwindcss init -p

Now we will get a tailwind.config.js file inside our project directory. Inside this file, replace the empty array of content as shown below.

/** @type {import('tailwindcss').Config} */

export default {

content: [

"./index.html",

"./src/*/*.{js,ts,jsx,tsx}",

],

theme:

{ extend: {},

},

plugins: [],

}

Inside our index.css file, we have to add these three lines:

@tailwind base;

@tailwind components;

@tailwind utilities;

Now, we are done with the process. At last, we can run the command

npm run dev

Congrats! Now we can use Tailwind CSS inside our project.

References

1. https://tailwindcss.com/docs/guides/vite

2. https://www.youtube.com/watch?v=bB6707XzCNc&list=PLu71SKxNbfoDqgPchmvIsL4hTnJIrtige&index=7