[BUG] Saving index.server.jsx reloads the page and removes Tailwind styles

[sethxd]

Describe the bug

When I save the file, vite reloads it in the browser and Tailwind styles are gone. I can fix the bug by saving index.css, which will force an hmr update and restore the styles. Just using a barebones install of the Hello World template.

To Reproduce

1. Change any content in index.server.js, then save.
2. Vite will reload the page missing Tailwind styles.
3. Open index.css and save.
4. Vite will hmr the page and restore Tailwind styles.

Expected behaviour Tailwind styles will not disappear on page reload.

Additional context Add any other context about the problem here. eg.

package.json:

{
  "name": "hydro-hello-test",
  "description": "An example using JavaScript in Hydrogen",
  "version": "0.0.0",
  "license": "MIT",
  "private": true,
  "scripts": {
    "dev": "shopify hydrogen dev",
    "build": "shopify hydrogen build",
    "preview": "shopify hydrogen preview"
  },
  "devDependencies": {
    "@shopify/cli": "3.0.25",
    "@shopify/cli-hydrogen": "3.0.25",
    "@tailwindcss/typography": "^0.5.2",
    "autoprefixer": "^10.4.7",
    "postcss": "^8.4.14",
    "tailwindcss": "^3.1.4",
    "vite": "^2.9.0"
  },
  "dependencies": {
    "@shopify/hydrogen": "^1.0.2",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "author": "sdehaan"
}

tailwind.config.js:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./index.html', './src/**/*.{js,jsx,ts,tsx}'],
  theme: {
    extend: {},
  },
  plugins: [
    require('@tailwindcss/typography')
  ],
}

index.css:

@tailwind base;
@tailwind components;
@tailwind utilities;

[blittle]

Hi @sethxd , I just tried to reproduce the problem, and wasn't successful. Could you please put together something on https://hydrogen.new ?

[sethxd]

Hi @sethxd , I just tried to reproduce the problem, and wasn't successful. Could you please put together something on https://hydrogen.new ?

Sure thing, I cloned it to stackblitz here (https://stackblitz.com/edit/shopify-hydrogen-xaipwq?file=src/components/FeaturedCollections.server.jsx) but I'm not experiencing the same issue there. Must be an issue with my machine / VS code setup? I'm on a Macbook with version 1.68.1 of Visual Studio code.

[blittle]

@sethxd are you on the latest hydrogen release? What version of Node are you using?