Tailwind recipe is broken, stuck on "generating file diff"

[bdlowery]

What is the problem?

I run the command blitz install tailwind, which generates this output:

Loaded env from /Users/brianlowery/webdev/everyday-photos/.env.local
Loaded env from /Users/brianlowery/webdev/everyday-photos/.env
✅ Installed 3 dependencies
✅ Installed 3 dependencies
✅ Successfully created postcss.config.js, tailwind.config.js
✅ Successfully created src/core/styles/index.css

+––––––––––––––––––––––––+
⎪   Import stylesheets   ⎪
+––––––––––––––––––––––––+
Imports the stylesheet we just added into your app

Then, it just gets stuck on ⠸Generating file diff... for over an hour. Nothing happens, it just sits there.

Paste all your error logs here:

✖ Select the target file › 
2023-08-06 15:57:30.453 ERROR   []
 Error  You aborted installation
error stack:
  • installer.cjs
        /recipe-install/node_modules/blitz/dist/installer.cjs:1092
  • use-input.ts        ReadStream.handleData
        /recipe-install/node_modules/ink/src/hooks/use-input.ts:185
  • events      ReadStream.emit
        events:526
  • domain      ReadStream.emit
        domain:489
  • readable    addChunk
        internal/streams/readable:343
  • readable    readableAddChunk
        internal/streams/readable:312
  • readable    ReadStream.Readable.push
        internal/streams/readable:253
  • stream_base_commons TTY.onStreamRead
        internal/stream_base_commons:190
Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.
    at Propose (/Users/brianlowery/webdev/everyday-photos/recipe-install/node_modules/blitz/dist/installer.cjs:459:20)
    at ink-box
    at /Users/brianlowery/webdev/everyday-photos/recipe-install/node_modules/ink/build/components/Box.js:39:11
    at StepExecutor (/Users/brianlowery/webdev/everyday-photos/recipe-install/node_modules/blitz/dist/installer.cjs:996:3)
    at RecipeRendererWithInput (/Users/brianlowery/webdev/everyday-photos/recipe-install/node_modules/blitz/dist/installer.cjs:1081:3)
    at RecipeRenderer (/Users/brianlowery/webdev/everyday-photos/recipe-install/node_modules/blitz/dist/installer.cjs:1045:27)
    at App (/Users/brianlowery/webdev/everyday-photos/recipe-install/node_modules/ink/build/components/App.js:42:9)

What are detailed steps to reproduce this?

1. start a new blitz project.
2. type blitz install tailwind
3. say yes to everything
4. see ⠸Generating file diff... - with nothing happening for over an hour.

Run blitz -v and paste the output here:

Blitz version: 2.0.0-beta.31 (global)
Blitz version: 2.0.0-beta.31 (local)
macOS Ventura | darwin-arm64 | Node: v20.5.0


 Package manager: npm

  System:
    OS: macOS 13.4.1
    CPU: (8) arm64 Apple M2
    Memory: 327.67 MB / 24.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.5.0 - /opt/homebrew/bin/node
    Yarn: Not Found
    npm: 9.8.0 - /opt/homebrew/bin/npm
  npmPackages:
    @blitzjs/auth: 2.0.0-beta.31 => 2.0.0-beta.31 
    @blitzjs/next: 2.0.0-beta.31 => 2.0.0-beta.31 
    @blitzjs/rpc: 2.0.0-beta.31 => 2.0.0-beta.31 
    @prisma/client: 4.6.1 => 4.6.1 
    blitz: 2.0.0-beta.31 => 2.0.0-beta.31 
    next: 13.4.5 => 13.4.5 
    prisma: 4.6.1 => 4.6.1 
    react: 18.2.0 => 18.2.0 
    react-dom: 18.2.0 => 18.2.0 
    typescript: ^4.8.4 => 4.9.5 

[Vandivier]

this didn't happen to me on the same blitz version (m2 OS)

[Vandivier]

even tho my install didn't get stuck like this, the install was misconfigured when done. I updated my .eslintrc.js as follows to solve (error was like "can't find next/babel" or smth):

const blitzConfig = require("@blitzjs/next/eslint")

module.exports = {
  ...blitzConfig,
  extends: [...blitzConfig.extends, "plugin:tailwindcss/recommended"],
  rules: {
    ...blitzConfig.rules,
    ...{
      "tailwindcss/no-custom-classname": ["off"],
    },
  },
}