How to add tailwind css

[nivekithan]

I am unable to add tailwind to my react-ts project.

file: package.json

{
  "name": "notion-clone",
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "serve": "vite preview",
    "storybook": "start-storybook -p 6006",
    "build-storybook": "build-storybook"
  },
  "dependencies": {
    "react": "^17.0.0",
    "react-dom": "^17.0.0"
  },
  "devDependencies": {
    "@babel/core": "^7.12.10",
    "postcss": "^7.0.35",
    "autoprefixer": "^9.8.6",
    "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.0.2",
    "@storybook/addon-actions": "^6.1.15",
    "@storybook/addon-essentials": "^6.1.15",
    "@storybook/addon-links": "^6.1.15",
    "@storybook/react": "^6.1.15",
    "@types/react": "^17.0.0",
    "@types/react-dom": "^17.0.0",
    "@vitejs/plugin-react-refresh": "^1.1.0",
    "babel-loader": "^8.2.2",
    "typescript": "^4.1.2",
    "vite": "^2.0.0-beta.50"
  }
}

file: postcss.config.js

module.exports = {
  plugins: {
    tailwindcss : {},
    autoprefixer : {}
  }
};

file: tailwind.config.js

module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
};

file : src/index.css

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

file : src/main.tsx

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import { App } from "./App";

ReactDOM.render(
  <React.StrictMode>
    <App label="This is vite server" />
  </React.StrictMode>,
  document.getElementById("root")
);

[nivekithan]

Today I run the server again and tailwind just worked. I think we should manually restart the server. I may be wrong