Ask A Question

Notifications

You’re not receiving notifications from this thread.

Page blinking when using tailwindcss

edouard asked in CSS

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!

Reply

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

Solved!

Reply
Join the discussion
Create an account Log in

Want to stay up-to-date with Ruby on Rails?

Join 85,376+ developers who get early access to new tutorials, screencasts, articles, and more.

    We care about the protection of your data. Read our Privacy Policy.