CODEWITHSUNDEEP
htmlcssreactjstailwind-css
CleverOscar
CleverOscar

Reputation: 135

TailwindCSS Image border

I am trying to style an image element with a border style. But for some reason when I try to add more width to the border it does not get picked up by the browser on the the image element. It works fine on any thing else but when I add a bigger width size to the border I get an error.

Can anyone help out? This is my code below.

<img src={'https://i.ibb.co/SnDDJ99/45219372-2219308534767966-7383583342043594752-n.jpg'}
  alt='Oscar Self Portrait'
  className="
    border-4
    w-1/2
    rounded-full  
    my-4
    md:w-4/12   
    md:p-4"
/>

If anyone has a solution that they can lead me too that would be great.

Upvotes: 1

Views: 11726

Answers (1)

Ed Lucas
Ed Lucas

Reputation: 7335

Your code seems to be working fine (see sandbox: https://play.tailwindcss.com/wTAwcVx1CH).

If you check the Tailwind docs, you can see that the only widths that are supported out of the box are 0, 1, 2, 4, & 8 (e.g. border-8). If you need other widths you can customize Tailwind by adding them to your tailwind.config.js file (https://tailwindcss.com/docs/border-width#customizing-your-theme) or, if you are using Tailwind 3.0, using the new arbitrary values format, e.g. border-[5px].

Upvotes: 2

Related Questions