gatsby-image-plugin, StaticImage cannot override the default wrapper style (gatsby-image-wrapper & gatsby-image-wrapper-constrained style)

Question

I'm using GatsbyJS with TailwindCSS, When i tried passing tailwind styles into the wrapper of StaticImage from gatsby-image-plugin, the existing styles are not getting overridden (ie. gatsby-image-wrapper and gatsby-image-wrapper-constrained style).

<StaticImage src="https://images.pexels.com/photos/189349/pexels-photo-189349.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="just an image" placeholder="blurred" className="absolute z-0" objectFit="cover" />

The position for the wrapper remains the same (gatsby-image-wrapper & gatsby-image-wrapper-constrained), while some of the classes passed into the component are ignored.

Is there any way to remove the default styles, or any other method to get the classes passed to work?

Airliah

How are you using TailwindCSS? (just to check the style importation) – Sickle

@FerranBuireu Hey, Thank you for responding! I have followed the similar process given by tailwind's official site on how to configure it with GatsbyJS https://tailwindcss.com/docs/guides/gatsby 1.installing the dependencies 2. Generating the config files 3. Importing the files into global.css tailwind base; tailwind components; tailwind utilities; – Airliah

Bit of a sledgehammer, but have you considered setting !important in your tailwind config? tailwindcss.com/docs/configuration#important – Fascism

@Fascism haha, I'm sure that would work with ease, Im checking if there is a better way to override the default styles ? – Airliah

Update: Tried using !important as per the tailwind config, it doesn't override the StaticImage wrapper classes, also it breaks the entire design. Tried the important: "#id" on tailwind.config approach, and passed the ID into the StaticImage component. – Airliah

This is a gatsby bug encountered by a few people, see github.com/gatsbyjs/gatsby/issues/34457. Only solution for now is prefixing tailwind classes with !important, sorry. – Subzero

Answer 1

This is a bug caused by gatsby-plugin-image outputting it's styles after user CSS (including Tailwind), which will override all classes of equal CSS specificity as those are declared later in the DOM. If you inspect the page on a gatsby build, you'll notice this order as well:

<style>
.absolute {
    position: absolute
}

.test-class-dont-override {
    display: "block"
}
</style>
<meta name="generator" content="Gatsby 4.4.0"/>
<style>
.gatsby-image-wrapper {
    position: relative;
    overflow: hidden
}

.gatsby-image-wrapper picture.object-fit-polyfill {
    position: static!important
}

.gatsby-image-wrapper img {
    bottom: 0;
    height: 100%;
    left: 0;
    margin: 0;
    max-width: none;
    padding: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
    object-fit: cover
}

.gatsby-image-wrapper [data-main-image] {
    opacity: 0;
    transform: translateZ(0);
    transition: opacity .25s linear;
    will-change: opacity
}

.gatsby-image-wrapper-constrained {
    display: inline-block;
    vertical-align: top
}
</style>

The only fix for now (until Gatsby does something about it) is to prefix tailwind classes with !important like others say. I've already filed a bug on Gatsby's issue page, hopefully it will receive some attention soon. https://github.com/gatsbyjs/gatsby/issues/34457

Edit: Apparently the maintainer behind gatsby-plugin-image has no intention of fixing this bug as he would like to keep users from easily overriding these styles for "performance and lighthouse" reasons. Response Link: https://github.com/gatsbyjs/gatsby/issues/34457#issuecomment-1025689173

Subzero

Thanks for the detailed issue you opened on GitHub! I think it's worth mentioning that this is "not a bug" though, quoting a gatsby dev: "This is not something we'll fix as the styles for the image component are there for a reason (best performance, best lighthouse scores) and thus we don't want people to easily overwrite them. You should create a wrapper to do your layouting or directly use the gatsbyImageData API to serve the correct images." – Caston

Answer 2

I ran into this problem on a site I'm building. The solution I landed on is annoying because it is inconsistent with the rest of the project, but I am using JSS to override the styles rather than the tailwind className:

<StaticImage
        src="../images/image.jpg"
        style={{
          position: 'absolute',
          height: '100%',
          width: '100%',
          inset: 0,
          objectFit: 'cover',
        }}
        placeholder="dominantColor"
        alt="Hero image"
        width="1080"
        height="720"
        quality={90}
      />

The className I abandoned (which did work fine on my local builds, just not in depoloyment) was:

className="absolute h-full inset-0 object-center object-cover w-full"

Turboelectric

Good work around, but this does not answer OP's question of how to remove default styles, or force classes passed to be accepted. – Subzero

Answer 3

I use !Important to override this. I currently don't see any options for gatsby-plugin-image to disable these styles by default.

Aggrandize