Styles not loading properly.

[Jaydiah-dev]

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:

• the puma plugin option
• using the [always] flag with the css watch command, using foreman.
• added tty:true to the docker-compose config.
• added config.assets.debug = true to the development.rb file.

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:

rails: 8.0.2
ruby: 3.3.0
tailwindcss-rails: 4.2.1
tailwindcss-ruby: 4.0.17

Thanks.

---

local

---

tailwind payground

[rullopat]

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).

[flavorjones]

@Jaydiah-dev Sorry you're having a problem. Help me reproduce what you're seeing, please.

[Jaydiah-dev]

@flavorjones this is all of the steps I took:

• started a new rails app with the command: rails new myapp --skip-test --force --database=postgresql --devcontainer --css tailwind
• created a controller and a view.
• added html markup to the page with tailwind classes.
• reloaded the view and styles didn't render properly (as shown in the screenshot above).
• tried the markup on the tailwind playground to confirm the markup was correct...which it is from the screenshot.
• went through the docs, tried the steps I listed in the description, and none worked.

Since creating this issue, I noticed that after running rake assets:precompile and restarting the server, the page renders correctly. When I update the page markup, the new styles aren't rendered properly on the page.

The only detail missing is that I'm on an ARM Mac.

[flavorjones]

@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.

[Jaydiah-dev]

@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
OK

So I'm guessing its the "executable + ARM" issue?

[flavorjones]

@Jaydiah-dev Let's keep digging. That script creates a directory, ./My Workspace/test-app, which is the generated rails app used in the tests. My advice would be to use that script (or the app) to do some debugging.

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.

[Jaydiah-dev]

@flavorjones I'll do that and share updates. Thanks

[Jaydiah-dev]

@flavorjones so I set a homepage with the app in ./My Workspace/test-install directory generated by the script, added the same markdown and it worked fine (running the app with bin/dev). I generated some other random markup with an AI tool, replaced it, and it worked fine.

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 Gemfile.lock and ran bundle again. Tried running my app again (with bin/dev) and the css styles don't render properly.

This is a diff of the Gemfile.lock for the test app and mine, respectively (I've omitted other gems):

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.

[flavorjones]

@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 app/assets/builds/tailwind.css file in between runs?

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?

[Jaydiah-dev]

@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:

• rails new tailwind-test --skip-test --force --database=postgresql --devcontainer --css tailwind
• rails db:prepare
• rails g controller public index
• added dummy markup to the page and this is what it looks like:

• ran rake assets:precompile
• restarted the server, and this is what it looks like

• updated the page with new random markup and this is what it looks like

Thanks.

[flavorjones]

@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!

[Jaydiah-dev]

@flavorjones the markup can be found in the app/views/public/index.html.erb file in the repo I linked in my last response.
I used the term "random markup" because, regardless of the markup I put on the page, it is never rendered correctly.

[flavorjones]

@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.

[Jaydiah-dev]

@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>

[flavorjones]

And what is it supposed to look like when it renders?

[Jaydiah-dev]

@flavorjones On Tailwind playground, it looks like this

[Jaydiah-dev]

Also, if it works well on your computer, is there any machine-specific requirement that would prevent tailwind from rendering properly?