[Bug?]: yarn rw setup ui tailwindcss seems broken

[QuinnsCode]

What's not working?

I am trying to setup a new project with tailwind and it is struggling with the setup command.
It looks like it is installing tailwind v4 which might need some dependency/setup changes noted here:
https://tailwindcss.com/docs/upgrade-guide

I tried it with a 7.7.4 app as well as latest version, but they both are installing v4 and messing with the normal setup flow.

After running the setup, it breaks the app until you make the v4 updates and even then I could only get the app to load the dev server, but tailwind styles were not showing up.

This is the error I get with both a 7.7.4 and 8.4.4 app

yarn rw setup ui tailwindcss --force
✔ Installing project-wide packages...
  ✔ Install [email protected]
✔ Installing web side packages...
  ✔ Install postcss, postcss-loader, tailwindcss, autoprefixer
✔ Configuring PostCSS...
✖ Command failed with exit code 1: yarn tailwindcss init
  /Users/ryanquinn/Documents/projects/shippycloud/shippycloudjs/web/config/tailwind.config.js
  Usage Error: Couldn't find a script named "tailwindcss".
  $ yarn run [--inspect] [--inspect-brk] [-T,--top-level] [-B,--binaries-only] [--require #0] <scriptName> ...
◼ Adding directives to index.css...
◼ Updating 'scaffold.css' to use tailwind classes...
◼ Adding recommended VS Code extensions to project settings...
◼ Adding tailwind intellisense plugin configuration to VS Code settings...
◼ Adding tailwind config entry in prettier...
◼ Adding tailwind prettier plugin...
Command failed with exit code 1: yarn tailwindcss init /Users/ryanquinn/Documents/projects/shippycloud/shippycloudjs/web/config/tailwind.config.js
Usage Error: Couldn't find a script named "tailwindcss"

How do we reproduce the bug?

yarn create redwood-app tailwindtest
yarn rw setup ui tailwindcss

What's your environment? (If it applies)

System:
    OS: macOS 14.4
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.17.0 - /private/var/folders/nz/kdly_zd578lgrf3s773j_d8c0000gn/T/xfs-3f6941e3/node
    Yarn: 4.3.0 - /private/var/folders/nz/kdly_zd578lgrf3s773j_d8c0000gn/T/xfs-3f6941e3/yarn
  Databases:
    SQLite: 3.43.2 - /usr/bin/sqlite3
  Browsers:
    Chrome: 131.0.6778.265
    Safari: 17.4
  npmPackages:
    @redwoodjs/core: 7.7.4 => 7.7.4 
    @redwoodjs/project-config: 7.7.4 => 7.7.4 
  redwood.toml:
    [web]
      title = "Redwood App"
      port = 8910
      apiUrl = "/.redwood/functions" # You can customize graphql and dbauth urls individually too: see https://redwoodjs.com/docs/app-configuration-redwood-toml#api-paths
      includeEnvironmentVariables = [
        # Add any ENV vars that should be available to the web side to this array
        # See https://redwoodjs.com/docs/environment-variables#web
      ]
    [api]
      port = 8911
    [browser]
      open = true
    [notifications]
      versionUpdates = ["latest"]

Are you interested in working on this?

• I'm interested in working on this

[marcofaggian]

Temporary fix is to stick to v3 of TailwindCSS, by changing webWorkspacePackages list entry to tailwindcss@3 at node_modules/@redwoodjs/cli/dist/commands/setup/ui/libraries/tailwindcss.js

[Tobbe]

This was fixed by #11920, included in the latest release, v8.5.0 (release notes still to be written)