Tailwind CSS에서 활성 화면을 찾는 간단한 구성 요소

나는 최근 개발 모드에서 현재 활성 화면을 결정하는 a tool을 발견했습니다. 편리하긴 하지만 번들에 또 다른 패키지를 설치하고 싶지는 않았습니다.

따라서 나는 NPM 소란 없이 기본적으로 동일한 결과를 달성하는 몇 줄의 코드를 작성했습니다!

<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>

현재 활성 화면을 표시하고 다른 화면 옵션을 숨깁니다.



유용하게 사용하시길 바랍니다!