Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Development Class Changes Not Properly Applied After Page Reload In Nuxt >=3.1.1 #620

Closed
JacobLindelof opened this issue Feb 19, 2023 · 6 comments
Labels
bug Something isn't working

Comments

@JacobLindelof
Copy link

Version

@nuxtjs/tailwindcss: 6.4.1
nuxt: >=3.1.1

Reproduction Link

https://github.com/JacobLindelof/nuxt-tailwind-testing

Steps to reproduce

  1. Install dependencies.
  2. Run dev server.
  3. Change BG color class in app.vue.
  4. Refresh page.

What is Expected?

Changed be color correctly appears one page is refreshed.

What is actually happening?

Previous state before changes are sent to the client instead.

This issue does not re-produce on CodeSandbox, but I have duplicated it with the given repo on my desktop and laptop. Both running windows. Maybe the issue is somehow windows related? Downgrading Nuxt from 3.1.1 to 3.1.0 does fix the issue so not sure if the issue is something in Nuxt or the Tailwind module.

Code_Hqjf5SaQbr

@JacobLindelof JacobLindelof added the bug Something isn't working label Feb 19, 2023
@Skyward176
Copy link

Skyward176 commented Feb 20, 2023

Reproduction

Im getting something similar where I set a flex layout, it works. I refresh, and it breaks.

Since I think it's similar to yours, I'd like to expand upon the issue I'm having. I make a change, it updates on the page. I refresh the page, that change goes away. If I make the change again, it will appear on the dev server once more. But again it disappears after a refresh. They styles don't apply if I build the project. I'm using a mac, yarn, and node 18 lts. Using Nuxt Tailwind 6.4.1, Nuxt 3.2.2.

I haven't noticed a consistent pattern, however this doesn't happen with every element.

@JacobLindelof
Copy link
Author

JacobLindelof commented Feb 21, 2023

Your issue is basically the same as mine. I've noticed all of the same behavior as you. For what its worth downgrading to Nuxt 3.1 does fix the issue completely, and you're not missing out on too much.

I haven't fully tested it, but I think the same behavior happens if you install Tailwind without using the module as well which might indicate that it's actually an issue in the main Nuxt package instead of the module.


I can reproduce the bug using vanilla tailwind as well on this branch. https://github.com/JacobLindelof/nuxt-tailwind-testing/tree/tailwind-no-module


image

I also noticed that when trying to debug the issue on Stackblitz whenever the page refreshes I get a Vite server hmr X files console message, but on my computer I don't get any hmr messages.

Similar issue here vitejs/vite#10270

@Skyward176
Copy link

I've also noticed the issue with straight tailwindcss, installed manually. However, downgrading to Nuxt 3.1.0 has made no difference for me.

@fouteox
Copy link

fouteox commented Mar 1, 2023

Hi, I have exactly the same problem here.

@ineshbose
Copy link
Collaborator

Hi, does this issue persist with the latest versions? It seems to be very specific to some systems/browsers, so I'd ask you to restart the server and check for any cache. HMR improvements are also being investigated (#682).

@JacobLindelof
Copy link
Author

Hi, does this issue persist with the latest versions? It seems to be very specific to some systems/browsers, so I'd ask you to restart the server and check for any cache. HMR improvements are also being investigated (#682).

I don't believe it is an issue anymore in later versions. At least not with my development environment.

@ineshbose ineshbose closed this as not planned Won't fix, can't repro, duplicate, stale Jun 20, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

4 participants