使用顺风 css 在大屏幕中设置半径

Posted 2023-03-07

【中文标题】使用顺风 css 在大屏幕中设置半径

【英文标题】：Set radius just in large screens with tailwind css

【发布时间】：2021-08-16 04:43:29

【问题描述】：

我想让图像只有在屏幕很大时才具有边框半径，否则我希望它具有直边，我该怎么做？

我正在使用 Nextjs 和 Tailwind CSS

【参考方案1】：

你只需要在你想根据屏幕大小有条件地应用的任何类上添加lg:或xl:前缀，看看docs

这是一个示例代码： pages/index.js

export default function Home() 
  return (
    <div className="h-full w-full grid place-items-center">
      <div className="w-32 h-32 bg-red-500 lg:rounded-xl"></div>
    </div>
  );

您可以查看sandbox