The process to setup a react app with vite and tailwind css (with jit enabled.)

React Vite Tailwind

React Vite Tailwind setup

Setup.md

Setup ReactJS+Vite+Tailwind(Jit)

Note: Text in bold in important.

You can follow along if you want to set it up yourself, and if you are in a hurry, you can use this template. All you have to do is clone it, and run yarn or npm i in the root of the project to install all the dependencies and you can start right away!

---

Setting up the react app.

Start with this to get the template.

yarn create vite app_name --template react

Then install the dependencies as the template just gives the files, not download the dependencies.

cd app_name
yarn

At this stage, you can also do git init as it isn't a git repository by default.

After installing the dependencies, you have a working react app. You can remove the files and boilerplate code which you don't need accordingly. Just use yarn dev for the dev server and yarn build to build the production build.

Remember that in vite, any file containing jsx has to end with the .jsx extension.

---

Adding TailwindCSS.

Install the tailwind css' dependencies with the command below.

yarn add -D tailwindcss@latest postcss@latest autoprefixer@latest

Then add the config files for postcss and tailwindcss with this command.

npx tailwindcss init -p

Go inside the tailwind.config.js file, in the purge array, add the following: ["./index.html", "./src/**/*.jsx"].

Now replace everything in src/index.css file with the lines below.

@tailwind base;
@tailwind components;
@tailwind utilities;

To activate JIT, just add the mode: "jit" in the tailwind.config.js.

Now you can use ReactJs with Tailwind css.