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!

Login or Create An Account to join the conversation.

Subscribe to the newsletter

Join 22,346+ 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.