Gatsby StaticImage does not respect TailwindCSS responsive modifiers in the production build. #33565

kaushalyap · 2021-10-18T07:28:27Z

kaushalyap
Oct 18, 2021

Preliminary Checks

This issue is not a duplicate. Before opening a new issue, please search existing issues: https://github.com/gatsbyjs/gatsby/issues
This issue is not a question, feature request, RFC, or anything other than a bug report directly related to Gatsby. Please post those things in GitHub Discussions: https://github.com/gatsbyjs/gatsby/discussions

Description

Following code work as expected in dev mode but Gatsby StaticImage do not respect TailwindCSS responsive modifiers in the production build.

import { StaticImage } from "gatsby-plugin-image";
import * as React from "react";

const IndexPage = () => {
  return (
    <main>
      <title>Home Page</title>
      <h1>Should be visible on mobile</h1>
      <StaticImage
        src="../images/icon.png"
        alt="logo"
        className="md:hidden"
        width={100}
      />
      <h1>Should be visible on tablet</h1>
      <StaticImage
        src="../images/icon.png"
        alt="logo"
        width={100}
        className="hidden md:block"
      />
    </main>
  );
};

export default IndexPage;

Reproduction Link

https://github.com/kaushalyap/gatsby-tailwind-bug

Steps to Reproduce

1.Clone the repo & yarn install
2. gatsby develop and go to localhost:8000
3. Stop the dev server and gatsby build && gatsby serve
...

Expected Result

Production build UI should be consistent with the dev build UI, which means production build should respond to tailwindcss responsive modifiers as in the dev build

Actual Result

In production build, both images are shown regardless of screen size

Environment

System:
    OS: Linux 5.14 Fedora Linux 35 (Workstation Edition)
    CPU: (8) x64 Intel(R) Core(TM) i5-8250U CPU @ 1.60GHz
    Shell: 5.8 - /usr/bin/zsh
  Binaries:
    Node: 14.17.2 - /tmp/fnm_multishells/49671_1634538470105/bin/node
    Yarn: 1.22.15 - /usr/bin/yarn
    npm: 7.20.3 - /tmp/fnm_multishells/49671_1634538470105/bin/npm
  Languages:
    Python: 3.10.0 - /usr/bin/python
  Browsers:
    Firefox: 93.0
  npmPackages:
    gatsby: ^3.14.2 => 3.14.3
    gatsby-plugin-image: ^1.14.1 => 1.14.1
    gatsby-plugin-postcss: ^4.14.0 => 4.14.0
    gatsby-plugin-sharp: ^3.14.1 => 3.14.1
    gatsby-source-filesystem: ^3.14.0 => 3.14.0
    gatsby-transformer-sharp: ^3.14.0 => 3.14.0

Config Flags

Nothing

Answered by LekoArts

Oct 18, 2021

This happens due to CSS specificity. The style for .gatsby-image-wrapper-constrained is for performance reasons in a <style> tag in the <head> and thus has a higher specificity than the CSS from another file (Tailwind). So it overwrites Tailwind for the display property.

Use !important and it'll work.

View full answer

LekoArts · 2021-10-18T07:49:22Z

LekoArts
Oct 18, 2021

This happens due to CSS specificity. The style for .gatsby-image-wrapper-constrained is for performance reasons in a <style> tag in the <head> and thus has a higher specificity than the CSS from another file (Tailwind). So it overwrites Tailwind for the display property.

Use !important and it'll work.

6 replies

wardpeet Oct 21, 2021

What about adding another wrapper div with the necessary CSS? I don't think there is any other way to fix this than bumping specificity like @LekoArts said.

kaushalyap Oct 22, 2021
Author

@wardpeet I'll try it, My question is why use two classes? Why not put all CSS attributes in gatsby-image-wrapper class? This way it will allow us to pass classes through classNames prop? While by default layout prop set to constrained, why not add class to existing wrapper depending on the layout prop value?

wardpeet Oct 29, 2021

It's difficult cause you get different css styling based on the the layout you choose.

hisnameisjimmy Nov 12, 2021

I'm running into the same issue here: #33960, which is not resolved by setting important on the Tailwind config because Tailwind doesn't bring important to the aspect-ratio plugin.

hisnameisjimmy Nov 12, 2021

Update, if you add mode: 'jit' to your Tailwind config, you can add !important to specific classes, as specified here. This solved the issue for me, although I still think there should be differences between develop and build versions of the site that cause these surprise headaches :)

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Gatsby StaticImage does not respect TailwindCSS responsive modifiers in the production build. #33565

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 1 comment 6 replies

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{title}}

Select a reply

Gatsby StaticImage does not respect TailwindCSS responsive modifiers in the production build. #33565

kaushalyap Oct 18, 2021

Preliminary Checks

Description

Reproduction Link

Steps to Reproduce

Expected Result

Actual Result

Environment

Config Flags

Replies: 1 comment · 6 replies

LekoArts Oct 18, 2021

wardpeet Oct 21, 2021

kaushalyap Oct 22, 2021 Author

wardpeet Oct 29, 2021

hisnameisjimmy Nov 12, 2021

hisnameisjimmy Nov 12, 2021

kaushalyap
Oct 18, 2021

Replies: 1 comment 6 replies

LekoArts
Oct 18, 2021

kaushalyap Oct 22, 2021
Author