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.