In Dasher we do a lot of web front-end. We use Vue, Nuxt and Tailwind CSS for it. We really love fast prototyping and quality outputs. We wanted to make our development experience even more enjoyable and effective ⚡.
Further, I will write why we created our small and really simple module Nuxt Tailwind breakpoint helper.
Once upon a time
Our front-end developer, while testing responsive Vue component in a browser, said that he would like to see current screen size, which is defined in Tailwind config file.
As you know, when you change screen size in an inspect mode in a browser you see real viewport size in pixels. But when you write responsive styles in Tailwind it looks something like this:
<div class="max-w-full sm:max-w-md md:max-w-2xl">
<p>paragraph...</p>
</div>
Here you see sm (min-width: 640px) and md (min-width: 768px) screen sizes, which are defaults in Tailwind config. But you can re-write them or extend to have your own values such as super-extra-big-screen-size and it could have value min-width: 4000px .
Lot of us have some issues with a memory (now I mean human memory 🧠). There are times when we can't quite remember if md screen size starts from 768px or some other value, but we want to see which Tailwind screen size is applied right now. Also, we don't want to open inspect mode everytime.
How we helped ourselves
We created our own NuxtJS module, which embeds a small "widget" to the left bottom corner of a browser's viewport and shows current Tailwind screen size (sm, md,...) and actual viewport height and width in pixels. Module is injected only in development mode. You can also style it as you need using module options in nuxt.config.js.
Now, we can debug and tune up our components even faster and have an actual Tailwind screen size everytime!
In the end
We would appreciate any comments, feedback or contribution to the module if you want to use it, but missing something ✌.
Thanks for reading! The Dasher Team ⚡
Top comments (0)