Gatsby V3 and tailwindcss

[olivier-lacroix]

Hello there,

Upgrading to gatsby V3 appears to go relatively smoothly. One problem I am facing is that tailwind does not appear to be working 100% anymore: the CSS generated in the header includes raw tailwind @apply directives.

Any idea of why these directives would not be processed anymore? of the changes required to get it working?

postcss.config.js:

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

gatsby-browser.js:

import "./src/styles/base.css";

and ./src/styles/base.css includes @tailwind directives as well as custom js imports.

Thanks!

[nibtime]

@olivier-lacroix

I also just updated a project to Gatsby v3 that has a Tailwind setup. I normally don't use the PostCSS setup, I just have it present in case I need something that is not supported with twin.macro. But I just activated it and tested it with one @apply directive.

Tailwind and PostCSS deps

"gatsby-plugin-postcss": "4.0.0",
"postcss": "8.2.4",
"postcss-flexbugs-fixes": "5.0.2",
"postcss-import": "14.0.0",
"postcss-preset-env": "6.7.0",
"tailwindcss": "2.0.2",

postcss.config.js

module.exports = {
  plugins: [
    require("tailwindcss")("./tailwind.config.js"),
    require("postcss-flexbugs-fixes"),
    require("postcss-import"),
    require("postcss-preset-env")({
      autoprefixer: {
        flexbox: "no-2009"
      },
      stage: 3,
      features: {
        "custom-properties": false
      },
      browsers: ["> 1%", "last 2 versions", "Firefox ESR"]
    })
  ]
}

globals.css

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  .btn-blue {
    @apply py-2 px-4 bg-blue-500 text-white font-semibold rounded-lg shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75;
  }
}

The generated output on my side doesn't contain any directives. Maybe it works if you upgrade some dependencies (if this is possible for you - or just to see if this would fix it)? However, this is a very minimal setup I don't actually use, but I can observe, that generated CSS for it looks all right with Gatsby v3.

[olivier-lacroix]

@nibtime , I did not. I'll give it a go and let you know how that goes.

[olivier-lacroix]

@nibtime , looking a bit more into this, it appears the @apply directives work OK as long as they are in the main base.css file, but fail if they are in another CSS file, called with an @import directive in the base.css file.

Any idea of what is going on?

Installing postcss-import and adding it to postcss.config.js does not help.

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
    "postcss-import": {},
  },
};

[nibtime]

@olivier-lacroix
This seems to be an ordering problem. postcss-import should always come as the first PostCSS plugin. (official docs). I have this wrong in my own postcss.config.js and never noticed because I never used CSS imports. According to the docs, all CSS imports also need to come first on the top of every file.

Another new thing I can really recommend you to try with Gatsby is tailwind-jit. You simply introduce it in your existing PostCSS by replacing tailwindcss with @tailwindcss/jit.

If I use Gatsby with classic Tailwind and PostCSS it takes the dev server like 80-100 seconds to start and like 20 seconds to hot reload changes in tailwind.config.js. The more variants I use, the longer. With tailwind-jit it's just ~20 seconds to start and 1-2 seconds for hot reloading tailwind.config.js of Tailwind, with all variants.

With a bottom-up approach like tailwind-jit you don't even need to configure variants, everything will just magically be there as you use it and your dev experience should be much better also.

@wardpeet
I think tailwind-jit should be mentioned in official Gatsby docs, as dev experience with Gatsby + classic Tailwind can become very bad. This is a great and easy way to improve it drastically. What do you think about this?

[olivier-lacroix]

@nibtime, thanks for your answer. Unfortunately, putting postcss-import first does not help. I will try to put together a small reproduction

tailwind-jit does look quite cool!

[nibtime]

@olivier-lacroix you're welcome. At this point a reproduction makes a lot of sense, guessing into the wild doesn't seem to help.

As far as I could tell from the Tailwind docs, there are more things to consider with CSS imports than just the PostCSS plugin order. Do you follow all the recommendations there and refactored your css accordingly?

[wardpeet]

Thanks for creating the issue, any chance you can cook up a quick reproduction for us? Or share your site?

[olivier-lacroix]

@wardpeet , no worries. I'll explore if the problem persists with a minimal CSS file. If not, yes, I think I could share the code base.