Latest cli version hangs when trying to build

[luizkowalski]

Hey 👋🏻

I have an app using 4.0.15 and it is working just fine. I'm building the final CSS using this command:

"build:css": "bun x @tailwindcss/cli -i ./app/assets/stylesheets/application.css -o ./app/assets/builds/application.css -m"

Since 4.0.16, the building has stopped working; it just hangs:

❯ bun run build:css
$ bun x @tailwindcss/cli@ -i ./app/assets/stylesheets/application.css -o ./app/assets/builds/application.css -m

Activity monitor shows the process using 100% of the CPU:

The thing is, I have tried to remove everything from the application.css, leaving just @import "tailwindcss"; line and I still the same issue. What's more strange is that if I copy all my CSSs to another folder and run the same command, it works just fine:

❯ bun run build:css
$ bunx @tailwindcss/cli  -i ./app/assets/stylesheets/app.css -o ./app/assets/builds/output.css -m
≈ tailwindcss v4.0.16

Done in 592ms

These are the exact same CSS files under the exact same structure and package.json. Things I have also tried:

• Nuke node_modules
• Clear bun cache
• add @tailwindcss/cli": "^4.0.16", to my package.json and run tailwindcss -i ./app/assets...

Absolutely nothing works.

Does this ring any bell to anyone?

Edit: my CSS file

@import "tailwindcss";
@import "./buttons";
@import "./body";
@import "./tag";
@import "./select";
@import "./combobox";
@import "./circuit";
@import "./confirmation_button";
@import "./account";

@source "../../views/**/*.erb";

@plugin "@tailwindcss/typography";

/* @variant dark (&:where(.dark, .dark *)); */

@theme {
  --font-*: initial;
  --font-sans:
    Noto Sans, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

  --color-google-text-gray: #3c4043;
  --color-google-button-blue: #1a73e8;
  --color-google-button-blue-hover: #5195ee;
  --color-google-button-dark: #202124;
  --color-google-button-dark-hover: #555658;
  --color-google-button-border-light: #dadce0;
  --color-google-logo-blue: #4285f4;
  --color-google-logo-green: #34a853;
  --color-google-logo-yellow: #fbbc05;
  --color-google-logo-red: #ea4335;

  --animate-appear-then-fade: appear_then_fade 4s both;
  --animate-move: move 2s ease-in-out infinite;
  --animate-fade-in: fade_in 2s ease-in-out both;
  --animate-vibrate: vibrate 0.1s ease-in-out infinite;
  --animate-vibrate-cycle: vibrate-cycle 1.4s infinite;

  --spacing-golden-xs: 0.128rem;
  --spacing-golden-sm: 0.272rem;
  --spacing-golden-md: 0.618rem;
  --spacing-golden-lg: 1rem;
  --spacing-golden-xl: 1.618rem;
  --spacing-golden-2xl: 2.618rem;
  --spacing-golden-3xl: 4.236rem;
  --spacing-golden-4xl: 6.854rem;

  @keyframes fade_in {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
 ...
}

@layer base {
  *,
  ::after,
  ::before,
  ::backdrop,
  ::file-selector-button {
    border-color: var(--color-gray-200, currentColor);
  }
}

[philipp-spiess]

Hey! Someone else also reported this just now, do you mind trying to run the command with DEBUG=1 and see if that gives anything and then post your output here? #17379 (comment) Thanks!

[luizkowalski]

hey! I get nothing- no output whatsoever. also, should we concentrate the conversation on the issue?

[erimicel]

Got the same issue, and downgrading 4.0.15 fixed it after I read comments, thank you!