Skip to main content

Page blinking when using tailwindcss

CSS • Asked by edouard

Hello guys,

I am trying to use tailwindcss on a 5.2 ruby on rails application with webpack. Everything is set up and works well according to the video How to use Tailwind CSS with Rails. Except a tiny problem that prevent me from putting the app on production.

When pages are loaded, I first see the page without css during less than half a second and then the css is applied and everything goes back to normal.

Here are some captures:

I thought it was because the tags in the layout where too low so I moved them to the top like that:

<!DOCTYPE html>
    <%= javascript_pack_tag 'application' %>
    <%= stylesheet_pack_tag 'application', media: 'all' %> <!-- Uncomment if you import CSS in app/javascript/packs/application.js -->
    <%= stylesheet_link_tag 'application', media: 'all' %>
    <meta charset="UTF-8">

It reduces a little the blinking but I can still see it.

NB: The app is light (only 3 pages more or less, nothing fancy with big video/img...)
NB: I am a really big fan of tailwindcss that's why I want it to work!

And I just looked at the new video for tailwincss 1 beta with rails 6 and I have the impression, that Chris has the same thing:

@Chris, is it true?

I don't understand why. Any help is more than welcome: I am really stucked!
Tell me if you need any other information.

Thank you for your help!

In fact, if you go to production assets are compiled and you won't noticed this blinking.


Login or Create An Account to join the conversation.

Subscribe to the newsletter

Join 24,647+ developers who get early access to new screencasts, articles, guides, updates, and more.

    By clicking this button, you agree to the GoRails Terms of Service and Privacy Policy.

    More of a social being? We're also on Twitter and YouTube.