Tailwind CSS v4 Vite plugin through npm:vite Can't resolve 'tailwindcss' error

Question

I have trouble on implementing TailwindCSS v4 on Deno. This is my structure:

deno.json

{
  "tasks": {
    "dev": "deno run -A --watch main.ts",
    "vite": "deno run -A vite"
  },
  "imports": {
    "@std/assert": "jsr:@std/assert@1",
    "edge.js": "npm:edge.js@^6.3.0",
    "hono": "npm:hono@^4.10.5",
    "vite": "npm:vite@^7.2.2",
    "@tailwindcss/vite": "npm:@tailwindcss/vite"
  }
}

vite.config.ts

import { defineConfig } from "vite";
import tailwind from "@tailwindcss/vite";

export default defineConfig({
  plugins: [tailwind()],
  server: {
    port: 5173, // dev server port
  },
  build: {
    outDir: "public/build",
    manifest: true,
    rollupOptions: {
      input: {
        app: "resources/css/app.css", // this is main CSS file with "@import "tailwindcss";"
      },
    },
  },
});

resources/css/app.css

@import "tailwindcss";

Now in my .edge file I tried to import the CSS link.

<link rel="stylesheet" href="http://localhost:5173/resources/css/app.css">

This is what I receive:

[vite] Internal server error: Can't resolve 'tailwindcss' in '/path/to/project/resources/css'
  Plugin: @tailwindcss/vite:generate:serve
  File: /path/to/project/resources/css/app.css?direct
    at finishWithoutResolve (...)
    [...]

I tried enabling this node_modules directory in deno.json

"nodeModulesDir":"auto"

But I still receive the same error.

Any solution for this?

rozsazoltan · Accepted Answer · 2025-11-14 10:35:49Z

1

The issue is that you didn't properly install the tailwindcss dependency - you only installed @tailwindcss/vite, but you need both.

https://tailwindcss.com/docs/installation/using-vite

@tailwindcss/vite, as you used it, is correctly responsible for loading the Vite plugin, while tailwindcss - which you're missing - is required for importing it inside your CSS file:

@import "tailwindcss";

Carefully reading the error message, it's clear that the issue does not refer to Vite but to your main CSS file.

{
  "tasks": {
    "dev": "deno run -A --watch main.ts",
    "vite": "deno run -A vite"
  },
  "imports": {
    "@tailwindcss/vite": "npm:@tailwindcss/vite",
    "tailwindcss": "npm:tailwindcss@^4.0.0"
  }
}

answered Nov 14 at 10:35

rozsazoltan

18.2k8 gold badges49 silver badges145 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Tailwind CSS v4 Vite plugin through npm:vite Can't resolve 'tailwindcss' error

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related