Styles aren't generated when building a Docker image for ARM64 on a 2019 Intel MacBook Pro #17728
Comments
|
Hey! Do you have any debug logs from the build step? There are a lot of components in your repro (rails/tailwind gem/docker) so it's hard to know what's going on. Perhaps you can try to run only the Tailwind CSS standalone build in isolation in the Dockerfile for a repro? |
|
Hey everyone, having similar issue as it used to work before. Building a web app with ruby on rails 8. I tried to narrow it down as far as I could. My setup:
Dev: Prod: During the build within the standard dockerfile, which is generated when you create a new project, the line below compiles the assets: Underneath It seems that tailwind is not parsing all the files like mentioned in the doc when architecture is not the same as the host machine What I tried so far:
As mentioned before in rails there are two gems for tailwind:
Question: Thanks for any further infos / suggestions |
|
Hi, I'm the maintainer of tailwindcss-rails and tailwindcss-ruby, and I've received a few bug reports about this issue. I've been unable to reproduce this on my hardware, and so I have been asking affected users to report this upstream (here). Here's what I think is happening: on some x86_64 hardware (but maybe not all chips? I certainly can't repro), running the arm64 tailwindcss CLI while building an arm64 docker image fails in a mysterious way. In an attempt to try to simplify this, I'm going to guess at a simple repro, and I have to ask @kyrylo and @xhayoz and others to tell me if this reproduces the issue. Here is a self-contained script that should repro on some hardware if I'm guessing correctly: #!/usr/bin/env bash
# download binaries
wget -q -c https://github.com/tailwindlabs/tailwindcss/releases/download/v4.1.4/tailwindcss-linux-arm64
wget -q -c https://github.com/tailwindlabs/tailwindcss/releases/download/v4.1.4/tailwindcss-linux-x64
# set up target html
cat > test.html <<EOF
<html>
<h1 class="py-2 px-3 text-green-500">Hello</h1>
</html>
EOF
# set up the script we'll run in the container
cat > test.sh <<EOF
#!/usr/bin/env bash
uname -a
if uname -m | fgrep aarch64 ; then
bin=./tailwindcss-linux-arm64
else
bin=./tailwindcss-linux-x64
fi
rm -f test.css
set -x
DEBUG=1 \$bin -o test.css
cat test.css | fgrep -C3 text-green-500
EOF
# run tailwind in the container
chmod +x tailwindcss-linux-* test.sh
docker run --mount=type=bind,source=$(pwd),target=/repro -w /repro --platform=linux/x86_64 ruby:3.4 ./test.sh
docker run --mount=type=bind,source=$(pwd),target=/repro -w /repro --platform=linux/arm64 ruby:3.4 ./test.shWhen I run this on my x86_64 development machine, here's what I see as output: What do y'all get as output when you run this? |
|
@flavorjones Thanks a lot for your help! Really appreciate it! The script was run on a Mac M2. Output: As far as I can tell the issue is not building the image on the same architecture (using docker build) but generating an image for an other architecture with buildx (in my case linux/amd64). I'm generating the image locally which later on is pushed on a server with an x86_64 architecture. My Mac book specs are: BTW I found a workaround for my issue:
It's maybe not the best way but it works. |
|
Thank you @flavorjones for your efforts in debugging this! For extensive testing, I ran it on my laptop with 2 Docker engines and a Hetzner Arm64 box. Here are my results. Host: MacBook 2019 (Intel) (OrbStack Engine)docker run --mount=type=bind,source=$(pwd),target=/repro -w /repro --platform=linux/x86_64 ruby:3.4 ./test.sh% docker run --mount=type=bind,source=$(pwd),target=/repro -w /repro --platform=linux/x86_64 ruby:3.4 ./test.sh
Linux de42dde4ad02 6.12.10-orbstack-00297-gf8f6e015b993 #14 SMP Sun Jan 19 03:00:07 UTC 2025 x86_64 GNU/Linux
+ DEBUG=1
+ ./tailwindcss-linux-x64 -o test.css
≈ tailwindcss v4.1.4
Done in 1s
[1423.26ms] [@tailwindcss/cli] (initial build)
[ 22.20ms] ↳ Setup compiler
[1265.06ms] ↳ Scan for candidates
[ 120.37ms] ↳ Build CSS
[ 14.38ms] ↳ Write output
+ cat test.css
+ fgrep -C3 text-green-500
.text-\[rgba\(255\,255\,255\,0\.87\)\] {
color: rgba(255,255,255,0.87);
}
.text-green-500 {
color: var(--color-green-500);
}
.capitalize {docker run --mount=type=bind,source=$(pwd),target=/repro -w /repro --platform=linux/arm64 ruby:3.4 ./test.shLinux ec1a56cf4f26 6.12.10-orbstack-00297-gf8f6e015b993 #14 SMP Sun Jan 19 03:00:07 UTC 2025 aarch64 GNU/Linux
aarch64
+ DEBUG=1
+ ./tailwindcss-linux-arm64 -o test.css
error: Invalid Argument '-o'
Bun is a fast JavaScript runtime, package manager, bundler, and test runner. (1.2.8+adab0f64f)
Usage: bun <command> [...flags] [...args]
Commands:
run ./my-script.ts Execute a file with Bun
lint Run a package.json script
test Run unit tests with Bun
x eslint Execute a package binary (CLI), installing if needed (bunx)
repl Start a REPL session with Bun
exec Run a shell script directly with Bun
install Install dependencies for a package.json (bun i)
add lyra Add a dependency to package.json (bun a)
remove browserify Remove a dependency from package.json (bun rm)
update @remix-run/dev Update outdated dependencies
outdated Display latest versions of outdated dependencies
link [<package>] Register or link a local npm package
unlink Unregister a local npm package
publish Publish a package to the npm registry
patch <pkg> Prepare a package for patching
pm <subcommand> Additional package management utilities
build ./a.ts ./b.jsx Bundle TypeScript & JavaScript into a single file
init Start an empty Bun project from a built-in template
create vite Create a new project from a template (bun c)
upgrade Upgrade to latest version of Bun.
<command> --help Print help text for command.
Learn more about Bun: https://bun.sh/docs
Join our Discord community: https://bun.sh/discord
+ cat test.css
+ fgrep -C3 text-green-500
cat: test.css: No such file or directoryHost: MacBook 2019 (Intel) (Docker Engine)docker run --mount=type=bind,source=$(pwd),target=/repro -w /repro --platform=linux/x86_64 ruby:3.4 ./test.shLinux cdb21f62c1d0 6.10.14-linuxkit #1 SMP PREEMPT_DYNAMIC Fri Nov 29 17:24:06 UTC 2024 x86_64 GNU/Linux
+ DEBUG=1
+ ./tailwindcss-linux-x64 -o test.css
≈ tailwindcss v4.1.4
Done in 1s
[1642.04ms] [@tailwindcss/cli] (initial build)
[ 36.34ms] ↳ Setup compiler
[1347.15ms] ↳ Scan for candidates
[ 181.75ms] ↳ Build CSS
[ 74.39ms] ↳ Write output
+ cat test.css
+ fgrep -C3 text-green-500
.text-\[rgba\(255\,255\,255\,0\.87\)\] {
color: rgba(255,255,255,0.87);
}
.text-green-500 {
color: var(--color-green-500);
}
.capitalize {docker run --mount=type=bind,source=$(pwd),target=/repro -w /repro --platform=linux/arm64 ruby:3.4 ./test.shLinux c9d9543f6df0 6.10.14-linuxkit #1 SMP PREEMPT_DYNAMIC Fri Nov 29 17:24:06 UTC 2024 aarch64 GNU/Linux
aarch64
+ DEBUG=1
+ ./tailwindcss-linux-arm64 -o test.css
≈ tailwindcss v4.1.4
Done in 22s
[22571.68ms] [@tailwindcss/cli] (initial build)
[ 924.29ms] ↳ Setup compiler
[16247.18ms] ↳ Scan for candidates
[ 5064.50ms] ↳ Build CSS
[ 270.20ms] ↳ Write output
+ cat test.css
+ fgrep -C3 text-green-500
.text-\[rgba\(255\,255\,255\,0\.87\)\] {
color: rgba(255,255,255,0.87);
}
.text-green-500 {
color: var(--color-green-500);
}
.capitalize {Hetzner CAX11 Arm64 (Docker Engine)# uname -a
Linux ubuntu-4gb-hel1-1 6.8.0-58-generic #60-Ubuntu SMP PREEMPT_DYNAMIC Fri Mar 14 18:09:50 UTC 2025 aarch64 aarch64 aarch64 GNU/Linuxdocker run --mount=type=bind,source=$(pwd),target=/repro -w /repro --platform=linux/x86_64 ruby:3.4 ./test.sh```diff exec ./test.sh: exec format error ```docker run --mount=type=bind,source=$(pwd),target=/repro -w /repro --platform=linux/arm64 ruby:3.4 ./test.sh```diff Linux 9fbea846e38e 6.8.0-58-generic #60-Ubuntu SMP PREEMPT_DYNAMIC Fri Mar 14 18:09:50 UTC 2025 aarch64 GNU/Linux aarch64 + DEBUG=1 + ./tailwindcss-linux-arm64 -o test.css ≈ tailwindcss v4.1.4Done in 3s [3059.73ms] [@tailwindcss/cli] (initial build)
|
|
My comment above was intended to demonstrate how to simplify a reproduction of this kind of problem without rails or ruby. Can someone who is having this problem on their dev machine please use this framework to reproduce what's happening? |
What version of Tailwind CSS are you using?
v4.1.3
What build tool (or framework if it abstracts the build tool) are you using?
Rails 8.0.2
What version of Node.js are you using?
What browser are you using?
Chrome
What operating system are you using?
macOS -> ARM64
Describe your issue
I've prepared detailed steps you can follow.
I'm on a MacBook Pro 2019 (Intel):
Generate a new Rails 8 app with Tailwind enabled (zip attached):
Scaffold a resource that uses Tailwind classes:
Start the dev server and check that Tailwind styling is applied (https://localhost:3000/posts):
Build and push a Docker image for ARM64:
On an ARM server (I use Hetzner CAX11), install Docker, then run the image:
Check the result at
http://<IP-ADDRESS>/postsand notice that Tailwind styling is not applied:I'm happy to help debug this further. You can pull my image from Docker Hub so you don't have to build it yourself.
The text was updated successfully, but these errors were encountered: