next/image having specificity issues with Tailwind Typography

Bug report

Describe the bug

When using Tailwind Typography and the prose element, it automatically adds margin-top and bottom to the img element. This messes up the responsive-ness of the next/image component.

To Reproduce

I’ve set a width and height

But it’s displayed wrong

Toggling these styles fixes it.

Expected behavior

I’d be great if we can build this into next/image to prevent users from hitting issues with Tailwind Typography.

Screenshots

See repo.

System information

• OS: Mac
• Browser: Chrome
• Version of Next.js: 10.0.3
• Deployment: next start and Vercel

[erhankaradeniz]

Hi Lee, since tailwind 2.0 and the update on the typography plugin you are able to update styles that are applied via prose through your tailwind.config.js. I can imagine it being something like this:

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      typography: {
        DEFAULT: {
          css: {
            img: {
              marginTop: 0,
              marginBottom: 0
            },
          },
        },
      }
    },
  },
  plugins: [
    require('@tailwindcss/typography'),
  ],
}

But still it would be nice for people who don’t know about this feature that next/image fixes it.

[balazsorban44]

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.