cli hangs on version 4.0.16

[neontuna]

What version of Tailwind CSS are you using?

v4.0.16

What build tool (or framework if it abstracts the build tool) are you using?

tailwind-cli

What version of Node.js are you using?

21.7.3

What browser are you using?

N/A

What operating system are you using?

macOS

Describe your issue

Just noticed this on a deploy to Heroku, our normal build step for Tailwind is hanging. No issues locally until I force it to install 4.0.16 and then it just hangs. No errors. I don't see a debug or verbose output option for the cli so I'm not sure what to do to further troubleshoot. Adding "@tailwindcss/cli": "4.0.15" to package.json, to force a downgrade to 15, and all is well again.

npx @tailwindcss/cli -i ./app/assets/stylesheets/application.tailwind.css -o ./app/assets/builds/application.css --minify
Need to install the following packages:
@tailwindcss/cli@4.0.16
Ok to proceed? (y)
*hangs* here, no output

[philipp-spiess]

Heya! Just tried the cli on the tailwindcss.com website and it seems fine:

α dev/tailwindcss.com 🐙(main)✗ npx @tailwindcss/cli -i src/app/globals.css -o out.css
Need to install the following packages:
@tailwindcss/cli@4.0.16
Ok to proceed? (y) y

≈ tailwindcss v4.0.16

Done in 143ms

Do you have a repro that you can share? It might also help to append DEBUG=1 before the command so that you get debug logs:

α dev/tailwindcss.com 🐙(main)✗ DEBUG=1 npx @tailwindcss/cli -i src/app/globals.css -o out.css
≈ tailwindcss v4.0.16

Done in 118ms

[119.17ms] [@tailwindcss/cli] (initial build)
[ 25.57ms]   ↳ Setup compiler
[ 35.00ms]   ↳ Scan for candidates
[ 55.61ms]   ↳ Build CSS
[  1.77ms]   ↳ Write output

[philipp-spiess]

@neontuna @luizkowalski are you both scanning Ruby template files? If so, can you do a grep for _template << in your projects? My suspicion is that this might be a recursion caused by #17336 that we haven't guarded against. cc @RobinMalfait

[luizkowalski]

it returned nothing in my case.

I noticed I had some heredocs on my views like this:

<%= button_to account_path(account),
                  method: :delete,
                  class: "account--disconnect-button",
                  data: {
                    turbo_confirm: "Are you sure you want to unlink this account?",
                    confirm_details: <<~CONFIRM.html_safe,
                      Any circuits and calendars from this account will be deleted.
                      <br/>
                      <br/>
                      <small>Note: This account can always be reconnected later. (if you still have access to it)</small>
                    CONFIRM
                    confirm_button: "Disconnect",
                  } do %>

which I tried to remove just in case, but it had no effect, cli still hanging

[philipp-spiess]

@luizkowalski Thanks for checking! Yeah that theory also doesn't check out when I tried to set up a reproduction locally. I wonder if it's possible that you can share your setup so we can run it? If not, maybe you could:

• Try it in a new repo that contains only one index.html and one index.css file and see if this still reproduces
• If not, we can try to bisect and remove half of your template files until it finally does complete and try to see from there?

You're experiencing this issue on macOS running bun (no Docker etc.), correct?

[lenart]

I've had the same issue on a ruby project, using 4.0.16. Downgrading to 4.0.15 solved the issue. I'll see if I can catch the view (html.erb, html.slim or html.haml) file that would be causing this issue and get a docker image for you to work on.

[outerim]

Same issue for me. Downgrading to 4.0.15 fixed for now. Grepped my templates for the string mentioned and didn't come up with anything.

[philipp-spiess]

We still haven't been able to reproduce this issue so any more information would be helpful, maybe someone can share a repo that experiences this issue?

@outerim Are you using the CLI with a Rails site as well? Are you running the command on macOS, Windows, or Linux and with or without a Dockerfile?

[outerim]

Unfortunately can't share the proprietary repo where this occurs. We're using Rails with Phlex for templating. This is happening in a docker container, base image is the public docker ruby:3.4-slim image.

Is there a patch I could apply to get tailwind cli to print out the file it's processing when the infinite loop occurs?

[thecrypticace]

No, there is not a patch for that. I think the problem might be happening in native code which would then require recompiling, replacing the .node file, etc…

[thecrypticace]

@outerim Do you have any @source directives in your CSS file? If so, and you comment them out, does the problem disappear?

[neontuna]

Trying to see if I can get you a reproduction now. prepending DEBUG=1 doesn't give me any more output unfortunately. Nothing in the files like _template <<

This is a fairly large Rails project but on a test branch I've essentially deleted everything except a single html file with <div class="bg-white"></div> in it and changed application.css so its just @import 'tailwindcss'; but it still hangs.

macOS 15.3 (24D60)
ruby 3.3.1 (2024-04-23 revision c56cd86388) [arm64-darwin23]
Rails 7.1.3.2

Should note that this is also happening on Heroku deploy, which is a container of some sort, but we're not running Docker or anything locally.

[neontuna]

I don't know if this helps but this is the output of build on 4.0.15 using my stripped down app

/*! tailwindcss v4.0.15 | MIT License | https://tailwindcss.com */
@layer theme{:root,:host{--font-sans:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--color-red-50:oklch(.971 .013 17.38);--color-red-100:oklch(.936 .032 17.717);--color-red-500:oklch(.637 .237 25.331);--color-red-600:oklch(.577 .245 27.325);--color-amber-500:oklch(.769 .188 70.08);--color-yellow-50:oklch(.987 .026 102.212);--color-yellow-100:oklch(.973 .071 103.193);--color-yellow-400:oklch(.852 .199 91.936);--color-green-50:oklch(.982 .018 155.826);--color-green-100:oklch(.962 .044 156.743);--color-green-500:oklch(.723 .219 149.579);--color-emerald-600:oklch(.596 .145 163.225);--color-blue-50:oklch(.97 .014 254.604);--color-blue-100:oklch(.932 .032 255.585);--color-indigo-50:oklch(.962 .018 272.314);--color-indigo-100:oklch(.93 .034 272.788);--color-purple-50:oklch(.977 .014 308.299);--color-purple-100:oklch(.946 .033 307.174);--color-pink-50:oklch(.971 .014 343.198);--color-pink-100:oklch(.948 .028 342.258);--color-gray-300:oklch(.872 .01 258.338);--color-gray-400:oklch(.707 .022 261.325);--color-white:#fff;--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:color-mix(in oklab,currentColor 50%,transparent)}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.relative{position:relative}.static{position:static}.sticky{position:sticky}.container{width:100%}@media (width>=40rem){.container{max-width:40rem}}@media (width>=48rem){.container{max-width:48rem}}@media (width>=64rem){.container{max-width:64rem}}@media (width>=80rem){.container{max-width:80rem}}@media (width>=96rem){.container{max-width:96rem}}.block{display:block}.inline{display:inline}.table{display:table}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.border{border-style:var(--tw-border-style);border-width:1px}.border-gray-400{border-color:var(--color-gray-400)}.border-green-500{border-color:var(--color-green-500)}.border-yellow-400{border-color:var(--color-yellow-400)}.bg-blue-50{background-color:var(--color-blue-50)}.bg-blue-100{background-color:var(--color-blue-100)}.bg-gray-400{background-color:var(--color-gray-400)}.bg-green-50{background-color:var(--color-green-50)}.bg-green-100{background-color:var(--color-green-100)}.bg-green-500{background-color:var(--color-green-500)}.bg-indigo-50{background-color:var(--color-indigo-50)}.bg-indigo-100{background-color:var(--color-indigo-100)}.bg-pink-50{background-color:var(--color-pink-50)}.bg-pink-100{background-color:var(--color-pink-100)}.bg-purple-50{background-color:var(--color-purple-50)}.bg-purple-100{background-color:var(--color-purple-100)}.bg-red-50{background-color:var(--color-red-50)}.bg-red-100{background-color:var(--color-red-100)}.bg-red-500{background-color:var(--color-red-500)}.bg-white{background-color:var(--color-white)}.bg-yellow-50{background-color:var(--color-yellow-50)}.bg-yellow-100{background-color:var(--color-yellow-100)}.bg-yellow-400{background-color:var(--color-yellow-400)}.text-\[\#333333\]{color:#333}.text-amber-500{color:var(--color-amber-500)}.text-emerald-600{color:var(--color-emerald-600)}.text-gray-300{color:var(--color-gray-300)}.text-red-600{color:var(--color-red-600)}.text-white{color:var(--color-white)}.capitalize{text-transform:capitalize}.blur{--tw-blur:blur(8px);filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}.filter{filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}

and debug output

DEBUG=1 npx @tailwindcss/cli -i ./app/assets/stylesheets/application.tailwind.css -o ./app/assets/builds/application.css --minify
≈ tailwindcss v4.0.15

Done in 97ms

[98.00ms] [@tailwindcss/cli] (initial build)
[12.91ms]   ↳ Setup compiler
[53.21ms]   ↳ Scan for candidates
[14.52ms]   ↳ Build CSS
[12.53ms]   ↳ Optimize CSS

[luizkowalski]

I'm trying to copy everything I can to another folder so I can create a reproducible project but so far, it is working...just doesn't work on the real project.

I also tried to remove everything from application.css so it is just @import "tailwindcss" and it still hangs

[thecrypticace]

@luizkowalski oh I wonder if there are hidden folders from builds or something that are getting scanned maybe?

Another thing to try is this:

@import "tailwindcss" source(none);

Which completely disables automatic source detection — would be a pretty definitive answer to "is it our file scanning or something else"