Properly installed tailwind dosn't work in React app - reactjs

Question

I initialized React application using Vite, and know I'm trying to add tailwind to this app.
I follewed the steps straight from documentation, and simply the classes are not applied to my components.
https://tailwindcss.com/docs/guides/create-react-app
Couple of days ago I was initializing React app the same way, followed the same instructions, and tailwind was working just fine. Now it does not and I really can't find any difference.
Here is my tailwind.config.js:
module.exports = {
content: [
"./src/**/*.{js,jsx,ts,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
Here is package.json:
{
"name": "megak-group-project-frontend",
"private": true,
"version": "0.0.0",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},
"dependencies": {
"react": "^17.0.2",
"react-dom": "^17.0.2"
},
"devDependencies": {
"#vitejs/plugin-react": "^1.0.7",
"autoprefixer": "^10.4.2",
"postcss": "^8.4.6",
"tailwindcss": "^3.0.22",
"vite": "^2.8.0"
}
}
Here is index.css:
#tailwind base;
#tailwind components;
#tailwind utilities;
Here is component that doesn't work:
function App() {
return (
<div className="App">
<h1 className="text-3xl font-bold underline">
Hello world!
</h1>
</div>
)
}
export default App

Answer 1

After some time I find out that npx tailwindcss init did not initialize postcss.config.js.
The reason it was not warking was this file missing with content:
const tailwindcss = require("tailwindcss");
module.exports = {
plugins: [tailwindcss("./tailwind.config.js"), require("autoprefixer")],
};