6

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?

TridentKing
  • 61
  • 1
  • 5
  • How are you using TailwindCSS? (just to check the style importation) – Ferran Buireu Mar 23 '21 at 13:10
  • @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](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;` – TridentKing Mar 23 '21 at 15:49
  • Bit of a sledgehammer, but have you considered setting `!important` in your tailwind config? https://tailwindcss.com/docs/configuration#important – rubie Mar 23 '21 at 16:39
  • @rubie haha, I'm sure that would work with ease, Im checking if there is a better way to override the default styles ? – TridentKing Mar 23 '21 at 20:05
  • 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. – TridentKing Mar 26 '21 at 08:21
  • This is a gatsby bug encountered by a few people, see https://github.com/gatsbyjs/gatsby/issues/34457. Only solution for now is prefixing tailwind classes with `!important`, sorry. – sgarcia.dev Jan 12 '22 at 09:26

3 Answers3

4

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

sgarcia.dev
  • 5,671
  • 14
  • 46
  • 80
  • 1
    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](https://github.com/gatsbyjs/gatsby/issues/34457#issuecomment-1025689173): "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." – Félix Paradis Mar 07 '22 at 05:17
0

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"
andrewkepson
  • 9
  • 1
  • Good work around, but this does not answer OP's question of how to remove default styles, or force classes passed to be accepted. – sgarcia.dev Jan 12 '22 at 09:28
0

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

Ivan Popov
  • 656
  • 2
  • 10