CODEWITHSUNDEEP
cssresponsive-designnext.jstailwind-css
M.Argumedo
M.Argumedo

Reputation: 311

Set radius just in large screens with tailwind css

I want to make an image have border radius only when the screen is large, otherwise I want it to have straight edges, how can I do that?

I am using Nextjs and Tailwind CSS

Upvotes: 1

Views: 798

Answers (1)

Syakhisk Al-azmi
Syakhisk Al-azmi

Reputation: 80

You just need to add the lg: or xl: prefix on whatever class you want to conditionally apply according to screen size, take a look at the docs

Here's an example code: 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>
  );
}

You can check the sandbox

Upvotes: 1

Related Questions