TailwindCSS Image border

Question

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 Portriat'
  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.

Answer 1

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 (eg 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, eg border-[5px] .