vite+tailwincss is not working for me

[dipakdeshmukh9]

**What version of Tailwind CSS are you using?**v4.2.4

What build tool (or framework if it abstracts the build tool) are you using? = vite 8.0.10

What version of Node.js are you using?
24.12.0

What browser are you using?
Chrome

What operating system are you using?
Windows

Reproduction URL

i just created using vite and configure tailwind in that

Describe your issue

Describe the problem you're seeing, any important steps to reproduce and what behavior you expect instead.

this is error is occuring just validating taiwind

PS C:\Users\dipak\Desktop\devTinder-web> npm run dev

devtinder-web@0.0.0 dev
vite

failed to load config from C:\Users\dipak\Desktop\devTinder-web\vite.config.js
error when starting dev server:
Error: Cannot find native binding. npm has a bug related to optional dependencies (npm/cli#4828). Please try npm i again after removing both package-lock.json and node_modules directory.
at Object. (C:\Users\dipak\Desktop\devTinder-web\node_modules@tailwindcss\oxide\index.js:559:11)
at Module._compile (node:internal/modules/cjs/loader:1761:14)
at Object..js (node:internal/modules/cjs/loader:1893:10)
at Module.load (node:internal/modules/cjs/loader:1481:32)
... 2 lines matching cause stack trace ...
at wrapModuleLoad (node:internal/modules/cjs/loader:245:24)
at loadCJSModuleWithModuleLoad (node:internal/modules/esm/translators:339:3)
at ModuleWrap. (node:internal/modules/esm/translators:242:7)
at ModuleJob.run (node:internal/modules/esm/module_job:413:25) {
[cause]: Error: An Application Control policy has blocked this file.
\?\C:\Users\dipak\Desktop\devTinder-web\node_modules@tailwindcss\oxide-win32-x64-msvc\tailwindcss-oxide.win32-x64-msvc.node
at Object..node (node:internal/modules/cjs/loader:1920:18)
at Module.load (node:internal/modules/cjs/loader:1481:32)
at Module._load (node:internal/modules/cjs/loader:1300:12)
at TracingChannel.traceSync (node:diagnostics_channel:328:14)
... 2 lines matching cause stack trace ...
at require (node:internal/modules/helpers:152:16)
at requireNative (C:\Users\dipak\Desktop\devTinder-web\node_modules@tailwindcss\oxide\index.js:131:25)
at Object. (C:\Users\dipak\Desktop\devTinder-web\node_modules@tailwindcss\oxide\index.js:526:17)
at Module._compile (node:internal/modules/cjs/loader:1761:14) {
code: 'ERR_DLOPEN_FAILED',
cause: Error: Cannot find module './tailwindcss-oxide.win32-x64-msvc.node'
Require stack:
- C:\Users\dipak\Desktop\devTinder-web\node_modules@tailwindcss\oxide\index.js
at Module._resolveFilename (node:internal/modules/cjs/loader:1421:15)
at defaultResolveImpl (node:internal/modules/cjs/loader:1059:19)
at resolveForCJSWithHooks (node:internal/modules/cjs/loader:1064:22)
at Module._load (node:internal/modules/cjs/loader:1227:37)
at TracingChannel.traceSync (node:diagnostics_channel:328:14)
at wrapModuleLoad (node:internal/modules/cjs/loader:245:24)
at Module.require (node:internal/modules/cjs/loader:1504:12)
at require (node:internal/modules/helpers:152:16)
at requireNative (C:\Users\dipak\Desktop\devTinder-web\node_modules@tailwindcss\oxide\index.js:126:16)
at Object. (C:\Users\dipak\Desktop\devTinder-web\node_modules@tailwindcss\oxide\index.js:526:17) {
code: 'MODULE_NOT_FOUND',
requireStack: [Array]
}
}
}

[wongjn]

This line in the error stack could be significant:

[cause]: Error: An Application Control policy has blocked this file.

Searching the internet, this could be due to Window's Smart App Control. You may need to configure it to allow Tailwind code to run.

[Teuuzim]

As @wongjn mentioned, the key part of the error is the [cause], not the npm message on top:

Error: An Application Control policy has blocked this file.
...\@tailwindcss\oxide-win32-x64-msvc\tailwindcss-oxide.win32-x64-msvc.node

Windows (Smart App Control / App Control policy) is blocking Tailwind v4's native engine (Oxide), so reinstalling node_modules won't help — the binary is installed, it's just not allowed to run.

If you don't want to turn Smart App Control off, a practical way around it is to develop inside WSL, where that policy doesn't apply:

1. In PowerShell as Administrator, install WSL and restart:

   wsl --install

2. Open Ubuntu from the Start menu and install Node (via nvm):

   curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.3/install.sh | bash
   source ~/.bashrc
   nvm install --lts

3. Keep the project inside the Linux file system (e.g. ~/projects), not under /mnt/c/... — it's much faster and Vite's file watching works reliably there:

   mkdir -p ~/projects && cd ~/projects
   npm create vite@latest devTinder-web
   cd devTinder-web
   npm install
   npm install tailwindcss @tailwindcss/vite

   If you copy your existing project andpackage-lock.jsonfirst andrunnpm install` inside WSL, so npm fetches the Linux binaries.
4. Run npm run dev and open http://localhost:5173 in Chrome on Windows as usual.

With VS Code, install the WSL extension and run code . from the project folder in Ubuntu to edit it with the full editor.

[rozsazoltan]

The workaround is a good idea, though you have to keep in mind that, for instance, a basic Ubuntu installation consumes at least 2GB of RAM. (Debian, however, could be an excellent choice; it requires only about 0.5 GB of memory by default.) It might not be worth diving into this just for that workaround alone. As a developer, I think most of Windows' "smart" features are just noise; you're either knowledgeable enough not to run random EXEs on your machine - or at least to run them in an isolated environment - or you aren't.

[Icaro0310]

The details got cut off, but since you're on v4 the most common breakage is mixing v3 setup with v4. In v4 the PostCSS config and @tailwind directives are gone.

Minimal working Vite + Tailwind v4 setup:

// vite.config.ts
import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  plugins: [tailwindcss()],
})

/* src/style.css */
@import "tailwindcss";

Then make sure the CSS is imported in your entry (import './style.css').

Checklist for your exact "not working" symptom:

• Delete postcss.config.js / tailwind.config.js leftovers from v3 — they're not needed (config is CSS-first now via @theme).
• If you still see v3 directives, replace @tailwind base; @tailwind components; @tailwind utilities; with the single @import "tailwindcss";.
• Run rm -rf node_modules/.vite && npm run dev to bust the cache.

If that still fails, post the actual error message — "not working" alone isn't enough to diagnose further.

—
More of my work lives here: github.com/Icaro0310 · Website: icaro0310.github.io

[rozsazoltan]

cause: Error: Cannot find module './tailwindcss-oxide.win32-x64-msvc.node'

The error message is clear. It has nothing to do with the configuration, since it cannot even start.

[Icaro0310]

My bad.