I created a new React JS with Typescript project using Webstorm's Vite generator. Then, I installed Tailwind by following the instruction for Vite from Tailwind's official website.
For step 3, I added the import in the index.css and App.css as I'm not sure which one I'm supposed to add it to.
Adding the link tag in step 5 doesn't seem to fix the problem either.
After I've done all that, I'm not seeing any Tailwind class names being suggested when typing and it doesn't seem that Tailwind is working at all.
Here is my package.json:
{
"name": "reacttest",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "tsc -b && vite build",
"lint": "eslint .",
"preview": "vite preview"
},
"dependencies": {
"@tailwindcss/vite": "^4.0.17",
"react": "^19.0.0",
"react-dom": "^19.0.0"
},
"devDependencies": {
"@eslint/js": "^9.21.0",
"@types/react": "^19.0.10",
"@types/react-dom": "^19.0.4",
"@vitejs/plugin-react": "^4.3.4",
"autoprefixer": "^10.4.21",
"eslint": "^9.21.0",
"eslint-plugin-react-hooks": "^5.1.0",
"eslint-plugin-react-refresh": "^0.4.19",
"globals": "^15.15.0",
"postcss": "^8.5.3",
"tailwindcss": "^4.0.17",
"typescript": "~5.7.2",
"typescript-eslint": "^8.24.1",
"vite": "^6.2.0"
}
}
Any idea what I'm missing?
Ok, not sure what changed but when I came back to my project and tried deleting all the generated css classes and the generated react component, the tailwind just works. It also still worked after I reverted all my changes to the state where it wasn't working before.
So, I'm closing this question.