如何在TailwindCSS中仅在sm及更小屏幕下显示元素

结合Tailwind CSS的mobile-first断点规则，只需调整两个motion.div的className就能实现你要的效果：

第一个元素（仅在大于sm的屏幕显示） #

把原有的hidden sm:inline改为hidden sm:block：

• hidden：让元素在小屏幕（<=sm）下隐藏
• sm:block：当屏幕尺寸达到sm及以上时，将元素设为块级显示（如果需要行内布局可保留inline，但block更适合这类容器元素）

第二个元素（仅在sm及更小屏幕显示） #

把原有的min-sm:hidden改为block sm:hidden：

• block：让元素在小屏幕（<=sm）下以块级形式展示
• sm:hidden：当屏幕尺寸超过sm时隐藏元素

修改后的完整代码 #

<>
  <motion.div className="hidden sm:block 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='block 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>  
</>

注：Tailwind采用mobile-first设计逻辑，不带断点前缀的类默认作用于最小屏幕，带前缀的类会覆盖默认样式，作用于对应断点及更大的屏幕，通过这种类组合就能精准控制元素在不同尺寸下的显示状态。

内容的提问来源于stack exchange，提问作者Nikolajs