GatsbyImage specificity issue with Tailwind aspect-ratio

[hisnameisjimmy]

What version of @tailwindcss/aspect-ratio are you using?

v0.3.0

What version of Node.js are you using?

v16.9.1

What browser are you using?

Chrome

What operating system are you using?

macOS

Reproduction repository

https://github.com/hisnameisjimmy/gatsby-plugin-image-tailwind-specificity

Describe your issue

GatsbyImage css classes are overriding Tailwind aspect-ratio classes when deployed/built for prod. It works as expected in development. I'm not sure if this is the right place to post this, but it doesn't get fixed by setting important: true in tailwind config because aspect-ratio doesn't take on that directive. Would love some advice!

You can see the issue in the following screenshots or by visiting this example site: https://inspiring-hamilton-bd685d.netlify.app/

[hisnameisjimmy]

As is traditional in software, I figured out a workaround after spending a huge amount of time documenting the core issue.

If you enable jit in your tailwind config:

module.exports = {
    mode: 'jit',
    purge: [
      './public/**/*.html',
      './src/**/*.{js,jsx,ts,tsx,vue}',
    ],
    darkMode: false,
    theme: {},
    variants: {
      extend: {},
    },
    plugins: [
      require("@tailwindcss/aspect-ratio"),
      require("@tailwindcss/typography"),
      require("@tailwindcss/forms"),
    ],
  }

You can then add a ! in front of the utility, as specified here: https://tailwindcss.com/docs/just-in-time-mode#built-in-important-modifier

In my case, I put it in front of the aspect ratio classes, like so:
<div className="!aspect-w-3 aspect-h-2 sm:!aspect-w-4 sm:aspect-h-3">

I still think this is a bit kludgey, but it works! Hopefully this will benefit future internet travelers.

[adamwathan]

It sounds to me like Gatsby is including the CSS in a different order in production than it is in development, which is definitely an issue since CSS order impacts which styles "win".

Glad you found a workaround that works for you — unfortunately I don't think there's anything we can do to change the behavior of Gatsby here and the real fix would be fixing what is causing Gatsby to include the CSS in a different order in different environments.