Tailwind basic responsive screen

នេះគឺជា model របស់ tailwind

sm 640px @media (min-width: 600px) {...}

md 768px @media (min-width: 768px) {...}

lg 1024px @media (min-width: 1024px) {...}

xl 1280px @media (min-width: 1280px) {...}

2xl 1536px @media (min-width: 1536px) {...}

<body class="bg-emerald-100 sm:bg-emerald-400 md:bg-pink-300 lg:bg-yellow-200 xl:bg-red-200">
    <h1 class="md:text-lg lg:text-xl"></h1>
    <script>
        function sizeOfwidth(){
            const width = window.innerWidth
            document.querySelector('h1').innerText = `width: ${width}`
        }
        window.onload = sizeOfwidth
        window.onresize = sizeOfwidth
    </script>
</body>