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:
https://drive.google.com/open?id=1S-avtXM_evSxi9gjrEpiXErOioL-QZQ7
https://drive.google.com/open?id=13nWnTcdTgQYqOlv9-AgreqYyHKDOruA9

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

<!DOCTYPE html>
<html>
  <head>
    <%= 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:
https://drive.google.com/open?id=1SA2wXdVuM8xLoinPXnbD4bj_VI4BL-9n

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