Styles not loading properly. #534
Comments
|
I probably have a similar problem, I run the app locally and Tailwind works fine, but when I deploy in production with Kamal the Tailwind classes seems to be missing (for example w-20 doesn't work). |
|
@Jaydiah-dev Sorry you're having a problem. Help me reproduce what you're seeing, please. |
|
@flavorjones this is all of the steps I took:
Since creating this issue, I noticed that after running The only detail missing is that I'm on an ARM Mac. |
|
@Jaydiah-dev This is not sufficient to reproduce what you're seeing. This repo contains a test script, https://github.com/rails/tailwindcss-rails/blob/main/test/integration/user_install_test.sh, which does essentially what you've described and does not reproduce this issue. Please let me know if that script reproduces on your machine -- in which case the root cause is likely to be the tailwind executable itself, which has had issues on ARM hardware. If that script does not reproduce the issue on your machine, then perhaps it's a good starting point for you to provide an executable reproduction for me. |
|
@flavorjones Running the test on my machine ends with the output below: ≈ tailwindcss v4.1.4
Done in 53ms
[54.08ms] [@tailwindcss/cli] (initial build)
[23.32ms] ↳ Setup compiler
[10.29ms] ↳ Scan for candidates
[ 8.88ms] ↳ Build CSS
[ 3.68ms] ↳ Optimize CSS
[ 4.48ms] ↳ Write output
+ grep -q py-2 app/assets/builds/tailwind.css
+ grep -q '#abc12399' app/assets/builds/tailwind.css
+ echo OK
OKSo I'm guessing its the "executable + ARM" issue? |
|
@Jaydiah-dev Let's keep digging. That script creates a directory, Either modify the script, or modify the app generated by the script, to more closely resemble your application -- with the exact markdown and tailwind classes if necessary. At some point, you'll take a step that introduces the issue, and then we'll know more. |
|
@flavorjones I'll do that and share updates. Thanks |
|
@flavorjones so I set a homepage with the app in I compared the gem versions in the test app and mine, and updated mine to match that of the test app: previously gem "tailwindcss-rails"updated to gem "tailwindcss-rails", "~> 4.2"
gem "tailwindcss-ruby", "~> 4.1"I deleted my This is a diff of the PATH
remote: ../..
specs:
tailwindcss-rails (4.2.2)
railties (>= 7.0.0)
tailwindcss-ruby (~> 4.0)
tailwindcss-ruby (4.1.4)
tailwindcss-ruby (4.1.4-aarch64-linux-gnu)
tailwindcss-ruby (4.1.4-aarch64-linux-musl)
tailwindcss-ruby (4.1.4-arm64-darwin)
tailwindcss-ruby (4.1.4-x86_64-darwin)
tailwindcss-ruby (4.1.4-x86_64-linux-gnu)
tailwindcss-ruby (4.1.4-x86_64-linux-musl)
tailwindcss-rails (~> 4.2)!
tailwindcss-ruby (~> 4.1)Mine GEM
remote: https://rubygems.org/
specs:
tailwindcss-rails (4.2.2)
railties (>= 7.0.0)
tailwindcss-ruby (~> 4.0)
tailwindcss-ruby (4.1.4)
tailwindcss-ruby (4.1.4-aarch64-linux-gnu)
tailwindcss-ruby (4.1.4-aarch64-linux-musl)
tailwindcss-ruby (4.1.4-arm64-darwin)
tailwindcss-ruby (4.1.4-x86_64-darwin)
tailwindcss-ruby (4.1.4-x86_64-linux-gnu)
tailwindcss-ruby (4.1.4-x86_64-linux-musl)
tailwindcss-rails (~> 4.2)
tailwindcss-ruby (~> 4.1)I should reiterate that I haven't made any other changes to the app. It's a fresh install. Hope this helps narrow things down. Thanks. |
|
@Jaydiah-dev Thanks for doing that and sharing the results. Unfortunately I still don't understand, there doesn't appear to be any difference between the lockfiles you noted above? Am I missing something? Question: are you removing the generated Question: what other differences are there between your production app (which tailwind is failing on) and the test app (which tailwind is running fine on)? Can you enumerate them and either add to the test app or remove from the production app until you see the behavior change? I think I could be more helpful if you were able to share a working reproduction. Are you able to do that? |
|
@flavorjones I don't make changes to any build file between runs. I just created a new rails app and pushed it here. Same issue. The steps I took include:
Thanks. |
|
@Jaydiah-dev Saying "updated the page with new random markup" does not help me reproduce what you're seeing. Please help me reproduce what you are seeing by giving me the exact markup that is causing this issue! |
|
@flavorjones the markup can be found in the |
|
@Jaydiah-dev Your repo renders fine for me, and does not contain the string "What would you like to compare" from your final screenshot. I cannot reproduce what you are seeing without more information. If you can't help me reproduce, I'm going to close this ticket. |
|
@flavorjones here's another markup and what it renders as on my machine: <nav class="bg-white shadow-sm">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between h-16">
<div class="flex items-center">
<div class="flex-shrink-0 flex items-center">
<i class="fas fa-leaf text-green-500 text-2xl mr-2"></i>
<span class="text-xl font-bold text-gray-800">ZenTask</span>
</div>
</div>
<div class="hidden md:flex items-center space-x-8">
<a href="#" class="text-gray-700 hover:text-indigo-600 font-medium">Features</a>
<a href="#" class="text-gray-700 hover:text-indigo-600 font-medium">Pricing</a>
<a href="#" class="text-gray-700 hover:text-indigo-600 font-medium">Blog</a>
<a href="#" class="text-gray-700 hover:text-indigo-600 font-medium">About</a>
</div>
<div class="flex items-center">
<button class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-md font-medium transition duration-300">
Get Started
</button>
</div>
</div>
</div>
</nav>
<section class="py-12 md:py-20">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="lg:grid lg:grid-cols-2 lg:gap-12 items-center">
<div class="mb-10 lg:mb-0">
<h1 class="text-4xl md:text-5xl font-bold text-gray-900 leading-tight mb-6">
Mindful Productivity <br>
<span class="text-indigo-600">Without the Burnout</span>
</h1>
<p class="text-lg text-gray-600 mb-8">
ZenTask helps you focus on what matters with intelligent task management, calming interfaces, and built-in mindfulness reminders.
</p>
<div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
<button class="bg-indigo-600 hover:bg-indigo-700 text-white px-6 py-3 rounded-lg font-medium text-lg transition duration-300 shadow-md">
Start Free Trial
</button>
<button class="border border-gray-300 hover:border-indigo-500 text-gray-700 hover:text-indigo-600 px-6 py-3 rounded-lg font-medium text-lg transition duration-300">
<i class="fas fa-play mr-2"></i> Watch Demo
</button>
</div>
</div>
<div class="relative">
<div class="bg-indigo-100 rounded-2xl p-4 shadow-xl">
<img src="https://placehold.co/600x400/eee/indigo?text=App+Screenshot" alt="ZenTask App Interface" class="rounded-lg w-full h-auto border-8 border-white">
</div>
<div class="absolute -bottom-6 -left-6 bg-white p-4 rounded-lg shadow-lg hidden md:block">
<div class="flex items-center">
<div class="bg-green-100 p-3 rounded-full mr-3">
<i class="fas fa-check-circle text-green-500 text-xl"></i>
</div>
<div>
<p class="font-medium text-gray-800">Daily goal completed</p>
<p class="text-sm text-gray-500">3 days streak</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="py-16 bg-white">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-16">
<h2 class="text-3xl font-bold text-gray-900 mb-4">Designed for Focus</h2>
<p class="text-lg text-gray-600 max-w-3xl mx-auto">
Features that help you stay productive while maintaining balance
</p>
</div>
<div class="grid md:grid-cols-3 gap-8">
<!-- Feature 1 -->
<div class="bg-indigo-50 p-6 rounded-xl hover:shadow-md transition duration-300">
<div class="bg-indigo-100 w-12 h-12 rounded-lg flex items-center justify-center mb-4">
<i class="fas fa-brain text-indigo-600 text-xl"></i>
</div>
<h3 class="text-xl font-semibold text-gray-900 mb-2">Focus Mode</h3>
<p class="text-gray-600">
Eliminate distractions with timed focus sessions and ambient sounds to keep you in the flow.
</p>
</div>
<!-- Feature 2 -->
<div class="bg-green-50 p-6 rounded-xl hover:shadow-md transition duration-300">
<div class="bg-green-100 w-12 h-12 rounded-lg flex items-center justify-center mb-4">
<i class="fas fa-spa text-green-600 text-xl"></i>
</div>
<h3 class="text-xl font-semibold text-gray-900 mb-2">Mindfulness Breaks</h3>
<p class="text-gray-600">
Scheduled breathing exercises and stretch reminders to prevent burnout.
</p>
</div>
<!-- Feature 3 -->
<div class="bg-purple-50 p-6 rounded-xl hover:shadow-md transition duration-300">
<div class="bg-purple-100 w-12 h-12 rounded-lg flex items-center justify-center mb-4">
<i class="fas fa-project-diagram text-purple-600 text-xl"></i>
</div>
<h3 class="text-xl font-semibold text-gray-900 mb-2">Smart Projects</h3>
<p class="text-gray-600">
Visual project boards with AI-powered task prioritization based on your energy levels.
</p>
</div>
</div>
</div>
</section>
<section class="py-16 bg-indigo-600 text-white">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-12">
<h2 class="text-3xl font-bold mb-4">Trusted by mindful teams</h2>
<p class="text-indigo-100 max-w-2xl mx-auto">
Join thousands of professionals who have transformed their productivity
</p>
</div>
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Testimonial 1 -->
<div class="bg-white bg-opacity-10 p-6 rounded-xl backdrop-blur-sm">
<div class="flex items-center mb-4">
<img src="https://placehold.co/50x50/eee/indigo?text=JS" alt="User" class="rounded-full w-10 h-10 mr-3">
<div>
<h4 class="font-medium">Jamie Smith</h4>
<p class="text-indigo-200 text-sm">UX Designer</p>
</div>
</div>
<p class="text-indigo-50">
"ZenTask completely changed how I approach my workday. The mindfulness reminders help me stay grounded even during crunch times."
</p>
</div>
<!-- Testimonial 2 -->
<div class="bg-white bg-opacity-10 p-6 rounded-xl backdrop-blur-sm">
<div class="flex items-center mb-4">
<img src="https://placehold.co/50x50/eee/indigo?text=AR" alt="User" class="rounded-full w-10 h-10 mr-3">
<div>
<h4 class="font-medium">Alex Rivera</h4>
<p class="text-indigo-200 text-sm">Software Engineer</p>
</div>
</div>
<p class="text-indigo-50">
"The focus mode is a game-changer. I get more done in 2 hours with ZenTask than I used to in a whole day with other tools."
</p>
</div>
<!-- Testimonial 3 -->
<div class="bg-white bg-opacity-10 p-6 rounded-xl backdrop-blur-sm hidden lg:block">
<div class="flex items-center mb-4">
<img src="https://placehold.co/50x50/eee/indigo?text=TP" alt="User" class="rounded-full w-10 h-10 mr-3">
<div>
<h4 class="font-medium">Taylor Park</h4>
<p class="text-indigo-200 text-sm">Product Manager</p>
</div>
</div>
<p class="text-indigo-50">
"Our team's stress levels have dropped significantly since we started using ZenTask for project management."
</p>
</div>
</div>
</div>
</section>
<section class="py-16">
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
<h2 class="text-3xl font-bold text-gray-900 mb-6">Ready to transform your productivity?</h2>
<p class="text-lg text-gray-600 mb-8 max-w-2xl mx-auto">
Join 50,000+ professionals who have found balance with ZenTask. Start your free 14-day trial today.
</p>
<button class="bg-indigo-600 hover:bg-indigo-700 text-white px-8 py-4 rounded-lg font-medium text-lg transition duration-300 shadow-lg">
Get Started - It's Free
</button>
</div>
</section>
<footer class="bg-gray-900 text-white py-12">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid grid-cols-2 md:grid-cols-4 gap-8">
<div class="col-span-2">
<div class="flex items-center mb-4">
<i class="fas fa-leaf text-green-500 text-2xl mr-2"></i>
<span class="text-xl font-bold">ZenTask</span>
</div>
<p class="text-gray-400 mb-4">
Mindful productivity tools for focused professionals.
</p>
<div class="flex space-x-4">
<a href="#" class="text-gray-400 hover:text-white">
<i class="fab fa-twitter text-xl"></i>
</a>
<a href="#" class="text-gray-400 hover:text-white">
<i class="fab fa-instagram text-xl"></i>
</a>
<a href="#" class="text-gray-400 hover:text-white">
<i class="fab fa-linkedin text-xl"></i>
</a>
</div>
</div>
<div>
<h3 class="text-lg font-semibold mb-4">Product</h3>
<ul class="space-y-2">
<li><a href="#" class="text-gray-400 hover:text-white">Features</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">Pricing</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">Integrations</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">Updates</a></li>
</ul>
</div>
<div>
<h3 class="text-lg font-semibold mb-4">Company</h3>
<ul class="space-y-2">
<li><a href="#" class="text-gray-400 hover:text-white">About</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">Careers</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">Blog</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">Contact</a></li>
</ul>
</div>
</div>
<div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
<p class="text-gray-400 mb-4 md:mb-0">
© 2023 ZenTask. All rights reserved.
</p>
<div class="flex space-x-6">
<a href="#" class="text-gray-400 hover:text-white">Privacy</a>
<a href="#" class="text-gray-400 hover:text-white">Terms</a>
<a href="#" class="text-gray-400 hover:text-white">Cookies</a>
</div>
</div>
</div>
</footer>
|
|
And what is it supposed to look like when it renders? |
|
@flavorjones On Tailwind playground, it looks like this |
|
Also, if it works well on your computer, is there any machine-specific requirement that would prevent tailwind from rendering properly? |
|
I want to chime in with the same issue. The rendering of the page is just different when deployed than locally. Some styles are applied but the page just looks different. We're deploying with Docker as well. |
|
I'm seeing something similar, deploying a rails app with kamal. Styling is correct when running local, either in development or even if I run as production locally with a rails asset:precompile (macos). I noticed that the tailwind-*.css generated through assets:precompile is different (and is the only thing different/checksum) in the docker image generated by kamal, which builds using a linux/amd64 platform, so I'm thinking a platform inconsistency may be the cause? If I copy over the tailwind css from the production image to try it locally with a production env (and edit public/assets/.manifest.json to match checksums), it breaks in a similar fashion |
|
This is the most minimal way I can demonstrate the 2 different platforms producing different tailwind.css assets when doing a |
|
@Jaydiah-dev I'm sorry, I still cannot reproduce what you are seeing. Here's what I'm doing:
I'm on x86_64 linux, running tailwindcss-rails 4.2.2 and tailwindcss-ruby 4.1.4. Can you please try to reproduce this using just the tailwind CLI? You can see the command that is run if you first run What I would like you to do is to download the tailwind CLI from https://github.com/tailwindlabs/tailwindcss/releases and run the same command that this gem is running but with that executable. If you can reproduce it this way, then you should report this problem upstream on the tailwindcss project. |
Tailwind CSS renders differently between ARM64 (development) and x86/64 (production) environments@flavorjones 👋 Thank you for investigating this issue. I'm experiencing the same cross-architecture CSS rendering problem as @Jaydiah-dev and @wr0ngway. Environment Details
Problem DescriptionTailwind styles render correctly in local development but appear broken after deployment to production servers. The issue appears to be architecture-dependent:
Compiled CSS File Comparison
The ~2.6KB difference in file size suggests the Tailwind compilation process produces different outputs depending on architecture. Troubleshooting Attempted
HypothesisI suspect the Tailwind CSS preprocessor may be using architecture-specific optimizations or has different compilation behavior on ARM vs x86, resulting in different CSS output. Questions
Potentially related issues:
ScreenshotsLocal (ARM64): <html><head><style type="text/css">.turbo-progress-bar {
position: fixed;
display: block;
top: 0;
left: 0;
height: 3px;
background: #0076ff;
z-index: 2147483647;
transition:
width 300ms ease-out,
opacity 150ms 150ms ease-in;
transform: translate3d(0, 0, 0);
}
</style>
<title>Gb</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<meta name="csrf-param" content="authenticity_token">
<meta name="csrf-token" content="yxqFRxdGfY9Oc5QWnOr8_ZoOWtLRC-4jk0QrEKYq8cx-NXCeWpnPZZlXya8G-Yie7jWCowdR5DBOXjclJZgFrQ">
<link rel="icon" href="/icon.png" type="image/png">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/icon.png">
<link rel="stylesheet" href="/assets/application-8b441ae0.css" data-turbo-track="reload">
<link rel="stylesheet" href="/assets/tailwind-df17594c.css" data-turbo-track="reload">
<script type="importmap" data-turbo-track="reload">{
"imports": {
"application": "/assets/application-bfcdf840.js",
"@hotwired/turbo-rails": "/assets/turbo.min-1262d735.js",
"@hotwired/stimulus": "/assets/stimulus.min-4b1e420e.js",
"@hotwired/stimulus-loading": "/assets/stimulus-loading-1fc53fe7.js",
"controllers/application": "/assets/controllers/application-3affb389.js",
"controllers/hello_controller": "/assets/controllers/hello_controller-708796bd.js",
"controllers": "/assets/controllers/index-ee64e1f1.js"
}
}</script>
<link rel="modulepreload" href="/assets/application-bfcdf840.js">
<link rel="modulepreload" href="/assets/turbo.min-1262d735.js">
<link rel="modulepreload" href="/assets/stimulus.min-4b1e420e.js">
<link rel="modulepreload" href="/assets/stimulus-loading-1fc53fe7.js">
<link rel="modulepreload" href="/assets/controllers/application-3affb389.js">
<link rel="modulepreload" href="/assets/controllers/hello_controller-708796bd.js">
<link rel="modulepreload" href="/assets/controllers/index-ee64e1f1.js">
<script type="module">import "application"</script>
</head>
<body>
<main class="container mx-auto mt-28 px-5 flex">
<!-- BEGIN app/views/home/index.html.erb --><div class="flex flex-col sm:px-6 lg:px-8">
<h1 class="text-4xl font-bold tracking-tight text-gray-900 sm:text-5xl md:text-6xl mb-6">
Testing, testing 1, 2, 3
</h1>
<p class="flex items-center gap-2">
Here is an svg:
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M14.25 9.75 16.5 12l-2.25 2.25m-4.5 0L7.5 12l2.25-2.25M6 20.25h12A2.25 2.25 0 0 0 20.25 18V6A2.25 2.25 0 0 0 18 3.75H6A2.25 2.25 0 0 0 3.75 6v12A2.25 2.25 0 0 0 6 20.25Z"></path>
</svg>
</p>
<div class="mt-6">
<a data-turbo-method="delete" class="inline-flex items-center justify-center gap-x-2 px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700" href="/session">
<svg class="size-5 text-white group-hover:text-blue-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.75" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 9V5.25A2.25 2.25 0 0013.5 3h-6a2.25 2.25 0 00-2.25 2.25v13.5A2.25 2.25 0 007.5 21h6a2.25 2.25 0 002.25-2.25V15M12 9l-3 3m0 0l3 3m-3-3h12.75"></path>
</svg>
<div class="relative mr-1">
<img src="https://lh3.googleusercontent.com/a/ACg8ocLMMho3M8gtpMjD_8StEt7JU6QG4AG7ises-WOypTOKzemCsvSMLQ" alt="Jesse Spevack" class="size-6 rounded-full object-cover border border-gray-200">
</div>
<span>Sign out</span>
</a></div><!-- END app/views/home/index.html.erb -->
</div></main>
</body></html>Production (x86/64): <html><head><style type="text/css">.turbo-progress-bar {
position: fixed;
display: block;
top: 0;
left: 0;
height: 3px;
background: #0076ff;
z-index: 2147483647;
transition:
width 300ms ease-out,
opacity 150ms 150ms ease-in;
transform: translate3d(0, 0, 0);
}
</style>
<title>Gb</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<meta name="csrf-param" content="authenticity_token">
<meta name="csrf-token" content="1Bp3p1BlVEmOvfDTlBCySkXWj4uuYc5nrjJqPEF0p1NDHKp9VhXI-FtpwahiEEycLJ8-cgGtC0cweqiubf49Cw">
<link rel="icon" href="/icon.png" type="image/png">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/icon.png">
<link rel="stylesheet" href="/assets/application-8b441ae0.css" data-turbo-track="reload">
<link rel="stylesheet" href="/assets/tailwind-e3093c8a.css" data-turbo-track="reload">
<script type="importmap" data-turbo-track="reload">{
"imports": {
"application": "/assets/application-bfcdf840.js",
"@hotwired/turbo-rails": "/assets/turbo.min-1262d735.js",
"@hotwired/stimulus": "/assets/stimulus.min-4b1e420e.js",
"@hotwired/stimulus-loading": "/assets/stimulus-loading-1fc53fe7.js",
"controllers/application": "/assets/controllers/application-3affb389.js",
"controllers/hello_controller": "/assets/controllers/hello_controller-708796bd.js",
"controllers": "/assets/controllers/index-ee64e1f1.js"
}
}</script>
<link rel="modulepreload" href="/assets/application-bfcdf840.js">
<link rel="modulepreload" href="/assets/turbo.min-1262d735.js">
<link rel="modulepreload" href="/assets/stimulus.min-4b1e420e.js">
<link rel="modulepreload" href="/assets/stimulus-loading-1fc53fe7.js">
<link rel="modulepreload" href="/assets/controllers/application-3affb389.js">
<link rel="modulepreload" href="/assets/controllers/hello_controller-708796bd.js">
<link rel="modulepreload" href="/assets/controllers/index-ee64e1f1.js">
<script type="module">import "application"</script>
</head>
<body>
<main class="container mx-auto mt-28 px-5 flex">
<div class="flex flex-col sm:px-6 lg:px-8">
<h1 class="text-4xl font-bold tracking-tight text-gray-900 sm:text-5xl md:text-6xl mb-6">
Testing, testing 1, 2, 3
</h1>
<p class="flex items-center gap-2">
Here is an svg:
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M14.25 9.75 16.5 12l-2.25 2.25m-4.5 0L7.5 12l2.25-2.25M6 20.25h12A2.25 2.25 0 0 0 20.25 18V6A2.25 2.25 0 0 0 18 3.75H6A2.25 2.25 0 0 0 3.75 6v12A2.25 2.25 0 0 0 6 20.25Z"></path>
</svg>
</p>
<div class="mt-6">
<a data-turbo-method="delete" class="inline-flex items-center justify-center gap-x-2 px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700" href="/session">
<svg class="size-5 text-white group-hover:text-blue-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.75" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 9V5.25A2.25 2.25 0 0013.5 3h-6a2.25 2.25 0 00-2.25 2.25v13.5A2.25 2.25 0 007.5 21h6a2.25 2.25 0 002.25-2.25V15M12 9l-3 3m0 0l3 3m-3-3h12.75"></path>
</svg>
<div class="relative mr-1">
<img src="https://lh3.googleusercontent.com/a/ACg8ocLMMho3M8gtpMjD_8StEt7JU6QG4AG7ises-WOypTOKzemCsvSMLQ" alt="Jesse Spevack" class="size-6 rounded-full object-cover border border-gray-200">
</div>
<span>Sign out</span>
</a></div>
</div></main>
</body></html> |
Update: FixI found a solution by using remote building with Kamal. This appears to be related to cross-architecture compatibility between ARM (Mac) and x86_64 (production servers). Modified configuration that fixed the issueOriginal builder:
arch: amd64Changed the builder:
arch: amd64
remote: ssh://<user>@<virtual machine ip>
cache:
type: registryThis is documented in Kamal build examples. For reference, a similar issue was documented in this discussion with a helpful solution in this comment. Special thanks to @flavorjones for the persistent troubleshooting assistance throughout this (and many other) thread. |
|
@jesse-spevack I tried your solution but I got #18 [build 6/6] RUN SECRET_KEY_BASE_DUMMY=1 ./bin/rails assets:precompile
#18 11.97 ============================================================
#18 11.97 Bun v1.2.8 (adab0f64) Linux x64 (baseline)
#18 11.97 Linux Kernel v5.15.0 | glibc v2.36
#18 11.97 Args:
#18 11.97 Features: no_avx2 no_avx
#18 11.97 Elapsed: 3ms | User: 0ms | Sys: 15ms
#18 11.97 RSS: 0B | Peak: bin/rails aborted!
#18 12.65 Command failed with SIGILL (signal 4) (core dumped): /usr/local/bundle/ruby/3.4.0/gems/tailwindcss-ruby-4.1.4-x86_64-linux-gnu/exe/x86_64-linux-gnu/tailwindcss
#18 12.67
#18 12.67 Tasks: TOP => assets:precompile => tailwindcss:build
#18 12.67 (See full trace by running task with --trace)
#18 ERROR: process "/bin/sh -c SECRET_KEY_BASE_DUMMY=1 ./bin/rails assets:precompile" did not complete successfully: exit code: 1
------
> importing cache manifest from registry.example.com/username/promptshare-staging-build-cache:
------
------
> [build 6/6] RUN SECRET_KEY_BASE_DUMMY=1 ./bin/rails assets:precompile:
11.97 ============================================================
bin/rails aborted!
12.65 Command failed with SIGILL (signal 4) (core dumped): /usr/local/bundle/ruby/3.4.0/gems/tailwindcss-ruby-4.1.4-x86_64-linux-gnu/exe/x86_64-linux-gnu/tailwindcss
12.67
12.67 Tasks: TOP => assets:precompile => tailwindcss:build
12.67 (See full trace by running task with --trace)
------
Dockerfile:49
--------------------
47 |
48 | # Precompiling assets for production without requiring secret RAILS_MASTER_KEY
49 | >>> RUN SECRET_KEY_BASE_DUMMY=1 ./bin/rails assets:precompile
50 |
51 |
--------------------
ERROR: failed to solve: process "/bin/sh -c SECRET_KEY_BASE_DUMMY=1 ./bin/rails assets:precompile" did not complete successfully: exit code: 1 |
|
I reverted to tailwindcss-rails 3.3.2 and everything is working now. |
|
Same problem here when building a container on a M2 Mac (arm) for deployment on AWS ECS (x86). Currently I can't deploy easily. Took me a while to even find out what is going wrong. |
Hello,
I'm trying to run tailwind(4.2.1) in a newly installed rails 8 app and the styles aren't rendering properly. I'm running it via the docker devcontainer that comes preinstalled with rails and it looks like some styles are applied while others aren't.
I have tried the following:
[always]flag with the css watch command, using foreman.tty:trueto the docker-compose config.config.assets.debug = trueto thedevelopment.rbfile.I generated the rails app with
rails new myapp --skip-test --force --database=postgresql --devcontainer --css tailwind.Below is a screenshot of a page in the app. When I try the same styles on the tailwind css playground, it renders correctly.
Any suggestions on what could be wrong?
Gem versions:
Thanks.
local
tailwind payground
The text was updated successfully, but these errors were encountered: