![Blog Cover](https://media.dev.to/cdn-cgi/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F5guotlinp0guvfnyn4b9.png)
A Simple Component to Find Your Active Screen in Tailwind CSS
![Pranav Birajdar](https://media.dev.to/cdn-cgi/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F588257%2F05f6b652-102e-4914-b734-c783211c37f6.jpg)
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.
Hope you find it useful!