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.