Why my CSS is broken?

[KingTimer12]

Basically, when I run the dev, the entire site breaks—in other words, all of its CSS is broken. When I make a change to force an autoreload, everything works fine again. And this only happens when I run it.

I'm using tailwind and reactjs.

Using dev:

After some change:

My farm.config.js:

import path from "node:path";
import { defineConfig } from '@farmfe/core'
import react from '@farmfe/plugin-react'
import tailwindcss from '@farmfe/js-plugin-tailwindcss'
import autoimport from "@farmfe/plugin-auto-import"
import strip from '@farmfe/plugin-strip'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react({
    runtime: 'automatic',
    refresh: true,
  }), 
  tailwindcss(), 
  autoimport(), 
  strip({
    functions: ['console.*']
  })],
  server: {
    port: 5173,
    hmr: true
  },
  clearScreen: false,
  compilation: {
    lazyCompilation: false,
    persistentCache: false,
    minify: false,
    treeShaking: false,
    resolve: { alias: { "src": path.resolve(process.cwd(), "./src") } }
  }
})

[fu050409]

@KingTimer12 Could you please provide the version of tailwindcss?

[KingTimer12]

"tailwindcss": "^4.1.10"

[KingTimer12]

@fu050409 bump

[fu050409]

"tailwindcss": "^4.1.10"

Sorry for late response. Could you please try with tailwindcss@~3 instead?

@ErKeLost Take a look?

[KingTimer12]

"tailwindcss": "3.4.17" => its work fine @fu050409

It's strange because v4 also works well, but only after it's recharged... v3 doesn't need this recharge to work. Unfortunately, I can't do this downgrade, I'll wait for the fix!