CODEWITHSUNDEEP
gatsbygatsby-image
TridentKing
TridentKing

Reputation: 61

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

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" />

Wrapper Styles

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?

Upvotes: 6

Views: 3262

Answers (3)

sgarcia.dev
sgarcia.dev

Reputation: 6190

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

Upvotes: 4

Ivan Popov
Ivan Popov

Reputation: 696

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

Upvotes: 0

andrewkepson
andrewkepson

Reputation: 9

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"

Upvotes: 0

Related Questions