A Simple Component to Find Your Active Screen in Tailwind CSS
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!