Blog Cover

A Simple Component to Find Your Active Screen in Tailwind CSS

Pranav Birajdar

Pranav Birajdar

March 01, 2021

5 💖

I recently came across a tool that determines the currently active screen in development mode. Though convenient, I did not want to install yet another package to my bundle.

Thus I wrote a few lines of code that basically achieves the same result, without the NPM fuss!

<div className="text-black px-5">
        <p className="px-5 rounded py-1 bg-gray-300 block sm:hidden">Mobile</p>
        <p className="px-5 rounded py-1 bg-red-300  hidden sm:block md:hidden">Sm</p>
        <p className="px-5 rounded py-1 bg-green-300 hidden  sm:hidden md:block  lg:hidden">Md</p>
        <p className="px-5 rounded py-1 bg-blue-300 hidden sm:hidden md:hidden lg:block xl:hidden">Lg</p>
        <p className="px-5 rounded py-1 bg-yellow-300 hidden sm:hidden md:hidden lg:hidden xl:block 2xl:hidden">xl</p>
        <p className="px-5 rounded py-1 bg-purple-300 hidden sm:hidden md:hidden lg:hidden xl:hidden 2xl:block">2xl</p>
</div>

It shows the currently active screen and hides the other screen options.

Alt Text

Hope you find it useful!

Get In Touch!

Whether you have an idea for a project or just want to say hi,
feel free to shoot me an email!