Video Thumbnail

Sign up for a plan to instantly unlock all premium lessons.


Premium Features

Download Video

Maintain Canvas Size on Refresh

Published 2 years ago

Some of you may have noticed, even though a hard refresh always gives our canvas the correct dimensions, a normal refresh sometimes shoves our canvas towards the top right-hand corner of the screen, shrinking it in the process.

Although not a deal breaker, it is quite an annoying effect to develop with, so before we go any further we'll go ahead and fix it.

This issue is caused by loading tailwind.css directly within our Vite's index.html file. When developing with Vite, the bundler performs some caching magic behind the scenes, running our JavaScript before completely loading a big file like Tailwind.css. Although this is useful for instant JavaScript updates, it obviously provides the issue of shrinking our canvas when it is reliant on some Tailwind classes meant to maintain its width and height.

We can fix this by simply commenting out the <link> tag importing Tailwind within index.html, and importing ./tailwind.css within main.js.


Want to participate?

Create a free Chris Courses account to begin

andy posted 2 years ago
chris posted 2 years ago

Providing the lift to launch your development career

© 2023 Chris Courses. All rights reserved.