How to create a Reactjs Project with Vitejs and TailwindCSS?

1. The first thing we shoud do is create our react project with vite:

With NPM:

$ npm init vite@latest

With Yarn:

$ yarn create vite

2. After that, we need to install the dependencies:

With NPM:

$ npm i

With Yarn:

$ yarn

3. After that, we need to install TailwindCSS:

With NPM:

$ npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

With Yarn:

$ yarn add -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

4. We need to create a config file about TailwindCSS and PostCSS

We need to run this in our project:

$ npx tailwindcss init -p

In the generated file, we add these lines:
Purge is crucial for us if we want to use JIT (The new just in time compiler of TailwindCSS).

module.exports = {
  purge: ["./src/**/*.{js,jsx,ts,tsx}", "./index.html"],
  mode: "jit", // Just in time compiler
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
};

5. After that, we'll add the directives in the index.css of our project.

/* src/index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

6. Make sure you have the index.css imported in the index.js, if you don't have it, you have to add it.

// src/index.js
  import React from 'react';
  import ReactDOM from 'react-dom';
    import './index.css';
  import App from './App';
  import reportWebVitals from './reportWebVitals';

  ReactDOM.render(
    <React.StrictMode>
      <App />
    </React.StrictMode>,
    document.getElementById('root')
  );

  // ...

¡And that's all!, enjoy Tailwind CSS now 😀.