One trick for easier responsive work with Tailwind CSS

Chris Sev's twitter: https://twitter.com/chris__sev

[00:01] So i wanted to make this short video to share one amazing, and simple trick that will greatly improve your experience when working on the responsive part of your web application. I found this trick on twitter just a few weeks ago and it's basically a fixed div that stays on the bottom right corner of your page and shows you the current screen size.

[00:16] It's super helpful when you're dragging your window, see something going wrong, and you want to know what responsive variant you use; so you'll drag it, here we have no responsive variant, here we have sm, md, lg, xl and so on.

[00:35] Here's how you can make one for your Laravel application. Go to resources/views, and create a components directory if it doesn't already exist. In here create a new file called responsive-helper.blade.php.

[00:56] Now, every file in this components directory is automatically registered as a blade component; meaning that i can open my app.blade.php file, scroll down, and start using my new component by typing in x- dash and then the name of the file. Now if i refresh the page, here it is right here.

[01:20] Now let's close the sidebar, and go inside our component and replace this text with a div that will be fixed in the bottom right corner of our page. So we'll do fixed bottom-2 right-2, set index 50, because we want to place it on top of anything else. Let's continue by adding a background bg-blue-200 text-blue-900 text-sm text-center font-bold rounded-full py-2 for vertical padding, and let's say w-40.

[02:02] Now inside of this div we'll have spans for each of our screen sizes. Let's start with sm, save, and refresh to see it. Let's continue adding the rest of the screen sizes; we have md, lg, xl, and then 2xl. These are the default screen sizes. Refresh, and here they are.

[02:23] Now, only one of these elements should be visible at a time, so we'll use the variants themselves to show the correct breakpoint while hiding all the other ones. First thing first, none of the elements should be visible if the screen size is smaller than sm, so we'll start with hidden and then on sm we'll add block. So if i refresh, and start dragging the window, the responsive helper disappears as soon as the screen gets smaller than sm.

[03:00] Let's continue. Now every element should start as hidden, the sm element should become visible when we reach the sm breakpoint, so sm:block, but then it should be hidden once we reach the md breakpoint, so md:hidden. Md should become visible once we reach md and become hidden once we reach lg. Lg is visible when we reach lg, and is hidden when we reach xl. And same here; and finally, our last element should only appear on 2xl screens.

[03:41] If i go into browser and refresh, currently the screen is smaller than sm so no helper is displayed. Then as it gets bigger we get sm, md, lg, xl, and finally, 2xl. Now, to prevent this helper from showing up in production we can go to our app.blade.php file and use the env blade directive to only show it on local and staging environments. So we'll do env and then an array with local and staging, endenv; and then here we paste in our responsive helper.

[04:25] So now the responsive helper will only be shown when we are on local and staging environments. Apart from this small responsive helper, what i also highly recommend, especially when you are in the finishing touches stage of the project, is using a tool like ResponsivelyApp. ResponsivelyApp allows you to view your website in multiple screen sizes at once. It's open source and you can download it for free here: https://responsively.app/.