Weird atomic CSS class generating issues depending on render mode

Description

I’m testing out VPS with 2 atomic CSS frameworks: Tailwind CSS, and UnoCSS. Neither of them work 100%. Behavior depends on the rendering mode of the page. Follow the reproduction steps below along with the linked minimal reproduction to see the issues.

Minimal Reproduction

https://github.com/AaronBeaudoin/vps-issue-atomic-css

First, The Setup

npm install postcss autoprefixer tailwindcss unocss

Tailwind CSS Files

// postcss.config.js

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {}
  }
};

// tailwind.config.js

module.exports = {
  mode: "jit",
  content: [
    "./pages/**/*.{vue,js}",
    "./renderer/_default.page.server.js"
  ]
};

/* pages/index.css */

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

UnoCSS Plugin Config

// vite.config.js

import { defineConfig } from "vite";
import VitePluginUnoCSS from "unocss/vite";

export default defineConfig({
  plugins: [
    ...
    VitePluginUnoCSS({
      presets: [],
      rules: [
        [
          // Lets you do `bg-red`, `bg-blue`, etc...
          /^bg-([a-z]+)$/,
          match => ({ "background-color": match[1] })
        ]
      ]
    })
  ]
});

_default.page

// _default.page.server.js

import "/pages/index.css";
import "uno.css";
...

// _default.page.client.js

import "/pages/index.css";
import "uno.css";
...

I import in both, because I wanted to try and make sure that my issue isn’t coming from the stylesheet no being available on one side or the other (server vs client).

The Actual Page

<!-- pages/index.page.vue -->

<template>
  <div class="bg-blue-500">tailwind</div>
  <div class="bg-blue">unocss</div>
</template>

Reproduction Steps

SSR Mode

No issues! Everything works fine. 🎉

SPA Mode

Change index.page.vue to index.page.client.vue and restart the dev server. (Any CSS that was generated so far seems to be cached, so you need to do a full server restart to clear things out.)

_Now, first of all, HMR doesn’t work in SPA mode, but we already know that from https://github.com/vitejs/vite/issues/9341._

But aside from that, this is what I’m seeing:

1. On the initial server start, both elements get a blue background color no problem.
2. Change blue for both elements to red and save. Refresh the page in the browser (since HMR is broken right now).
3. Only UnoCSS updates properly. Tailwind CSS doesn’t seem to be able to update for some reason. The element class updated, but Tailwind CSS doesn’t seem to be able to recognize the change and create CSS for the new class.
4. Restart the dev server. Now both elements have a red background color as expected.

HTML-Only Mode

Change index.page.vue to index.page.server.vue and restart the dev server again.

1. On the initial server start, both elements get a red background color no problem.
2. Change red for both elements to green and save.
3. Only Tailwind CSS updates properly this time. UnoCSS doesn’t seem to be able to update for some reason. The element class updated, but UnoCSS doesn’t seem to be able to recognize the change and create CSS for the new class.
4. Refresh the page in the browser. Notice that didn’t change anything.
5. Restart the dev server. Now both elements have a green background color as expected.

Error Stack

No response

[AaronBeaudoin]

Made an issue for UnoCSS: https://github.com/unocss/unocss/issues/1351

Still have yet to make one for Tailwind CSS. I think I might just wait till the client HMR thing is figured out so that issue can be demonstrated in isolation a little bit better.

[brillout]

I guess we can close this in the meantime.

Let’s re-open if it turns out to be a vps problem.