Tailwind 4 with Vite, no JS Framework: Generating classes?

[martinschaible]

Hello

I have started a new project. Vite and Tailwind CSS are installed as described.

I created a simple footer with three columns having the class "px-4" for some space. Then i changed it to "px-8". I expected, that this class will be available.

I never worked with the Vite plugin before. Should the plugin create the standard Tailwind classes and i create eveything else?

File vite.config.ts:

import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'
export default defineConfig({
    plugins: [
        tailwindcss(),
    ],
})

File package.json

    "devDependencies": {
        "@tailwindcss/vite": "^4.1.3",
        "lightningcss": "^1.29.3",
        "tailwindcss": "^4.1.3",
        "vite": "^6.2.0"
    }

Of course the first line of my css file is the import:

@import 'tailwindcss';

Thanks!

Martin

[wongjn]

Should the plugin create the standard Tailwind classes and i create eveything else?

The plugin acts as an intermediary between the core tailwindcss package and Vite. I would see that tailwindcss would be more the one responsible for creating the CSS rules. Generally, Tailwind should create rules for class names it sees, see the documentation for details.

[martinschaible]

Okay, I'm not sure, how your answer could help me. A tailwind css class will not be created. I'm aksing myself, how the initial class "px-4" and the other classes was created. So it probably worked.

[wongjn]

What Tailwind CSS class is not working for you? Consider providing a git repo that reproduces the unexpected behavior.

[martinschaible]

As i wrote before, no Tailwind CSS classes will be generated at all. I think, that the Plugin @tailwindcss/vite does not work.

This is the repo

Thanks!

[wongjn]

Seems to be working for me:

Seems like it could be something wrong with your system?

[martinschaible]

Yes, it does render the markup. So now try to change a class as i described before and the class will not generated. It looks like, that this thing worked once.

Do you work with Vite?

[wongjn]

Yes, I added random classes here and there and they all seem to work.

[martinschaible]

In my original post i wrote,, that the Vute/Tailwind plugin does not generate Tailwind CSS classes. If i change "px-4" to "px-8" in the markup, the new class will not be generated.

It isn't about creating classes manually.

[wongjn]

Yes, that's what I mean I tested. I changed the px-4 class in index.html to px-8 and Tailwind generated the class rule in CSS and it was applied to the element in the browser.

[martinschaible]

That is odd. Did you use my config files?

[wongjn]

Yes, I used your git repo

[martinschaible]

Thank you. I am officially surprised. I have no idea where else to look right now.

[martinschaible]

More than ten years ago, we had a problem with another build tool that it couldn't handle mapped directories from Windows Servers.
Now we have the same problem again in 2025. How embarrassing. But I'm sure this is a problem with the Tailwind plugin and not Vite itself.

If I copy the project to a local drive, everything works.

[nbouayad-wincomplm]

Hello,
I am experiencing the exact same problem, only a fraction of the used classes are generated. If I include the CDN file directly, the rendering is correct, I am using latest version available with Vite (4.1.8 for tailwindcss and @tailwindcss/vite), I stricly followed the instructions from the website.Here is my vite.config.ts :

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tailwindcss from '@tailwindcss/vite'

// https://vite.dev/config/
export default defineConfig({
  plugins: [
    react(),
    tailwindcss()
  ],
})

I have the @import "tailwindcss"; in my css which is included in main.tsx.
Any idea?
Thanks,

[wongjn]

Consider providing a git repo that reproduces the issue and we can take a look for you.

[martinschaible]

It doesn't a specific project to confirm the issue.
I actually created a new project on a local drive:

npm create vite@latest my-vue-app -- --template vue
npm install tailwindcss @tailwindcss/vite

Then edit the file vite.config.js to add Tailwind support:

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import tailwindcss from '@tailwindcss/vite'

// https://vite.dev/config/
export default defineConfig({
  plugins: [vue(), tailwindcss()],
})

Then add the line @import "tailwindcss"; to the file src\style.css.

Now run npm run dev and open the project with a browser.
Add some markup with CSS classes to index.html and check it with the developer tools from your browser. The added class will be there.

Stop everything and copy the project to a network drive.
Run npm again and add again some markup with CSS classes. The added classes will not be there.

Thanks!