Skip to content

Tailwind 4.1.8 + vite in vue not hot reloading classes #18236

Open
@Cafezinho

Description

@Cafezinho

Tailwind classes do not apply style when hot reloading classes that were not being used before. Need to restart dev server for the styles to apply. I have already tried disabling purge altogether but still did not work. Tried different tailwind v4 versions as well, neither worked. I am using tailwind classes with prefix tw.

Downgraded to v3 to test it out and hot reload works wonders. But my prefix setup to work in conflict with vuetify is wrapped along v4, so I upgraded back. Would be nice to have Hot reload.

What version of Tailwind CSS are you using?

v4.1.8

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

Vue 2.7, Vite 4.5.0, tailwindcss/vite: 4.1.8

What version of Node.js are you using?
v16.20

What browser are you using?

For example: Chrome, Safari, or N/A

What operating system are you using?

For example: macOS, Windows

Reproduction URL

A Tailwind Play link or public GitHub repo that includes a minimal reproduction of the bug. Please do not link to your actual project, what we need instead is a minimal reproduction in a fresh project without any unnecessary code. This means it doesn't matter if your real project is private/confidential, since we want a link to a separate, isolated reproduction anyways.

A reproduction is required when filing an issue — any issue opened without a reproduction will be closed and you'll be asked to create a new issue that includes a reproduction. We're a small team and we can't keep up with the volume of issues we receive if we need to reproduce each issue from scratch ourselves.

Describe your issue

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

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions