How to only show element when screen is sm or smaller (TailwindCSS)

June 9, 2023

I am trying to have a div only appear once the screen is below sm and hidden once above sm size. In the example below, I want the first motion.div to appear at all sized except for small. I want the second div to only appear once screen is sm or smaller.

    <>
      <motion.div className="hidden sm:inline cursor-default w-8/12 bg-primary-bg overflow-auto h-3/4 rounded-2xl relative pt-5 items-center ">
        <button className="absolute top-0 right-10 m-5 p-2 cursor-pointer" onClick={onClose}>
          <XMarkIcon className='fixed h-10 w-10 text-primary-green' />
        </button>
        <div className="p-10">
          <h2 className='text-lg sm:text-2xl pt-2 font-bold font-source-sans-pro uppercase cursor-text'>{essay.title}</h2>
          <p className='pb-2 font-source-sans-pro capitalize cursor-text'>{essay.author}</p>
          <p className='text-sm sm:text-lg font-source-serif-pro cursor-text' dangerouslySetInnerHTML={{ __html: essay.content.replace(/\n/g, '<br/>')}}></p>
        </div>
      </motion.div>
      <motion.div className='min-sm:hidden fixed top-0 left-0 w-screen h-screen bg-primary-bg overflow-auto'>
        <button className='absolute top-0 left-0 p-5 cursor-pointer' onClick={onClose}>
          <ArrowLeftIcon className='fixed h-8 w-8'/>
        </button>
        <div className='p-5 mt-12'>
          <h2 className='text-2xl uppercase font-source-sans-pro font-bold'>{essay.title}</h2>
          <p className='text-md font-source-serif-pro'>{essay.author}</p>
          <p className='mt-4 text-sm sm:text-lg font-source-serif-pro cursor-text' dangerouslySetInnerHTML={{ __html: essay.content.replace(/\n/g, '<br/>')}}></p>
        </div>
      </motion.div>  
    </>

>Solution :

To have the second div to only appear once screen is sm or smaller, have it be visible "by default" and then apply display: none for sm: breakpoint with the sm:hidden class:

<script src="https://cdn.tailwindcss.com"></script>

<div class='sm:hidden fixed top-0 left-0 w-screen h-screen bg-primary-bg overflow-auto'>
  <button class='absolute top-0 left-0 p-5 cursor-pointer'>
    <ArrowLeftIcon class='fixed h-8 w-8'>ArrowLeftIcon</ArrowLeftIcon>
  </button>
  <div class='p-5 mt-12'>
    <h2 class='text-2xl uppercase font-source-sans-pro font-bold'>{essay.title}</h2>
    <p class='text-md font-source-serif-pro'>{essay.author}</p>
    <p class='mt-4 text-sm sm:text-lg font-source-serif-pro cursor-text'>essay.content</p>
  </div>
</div>