Gridsome Tailwind Just-In-Time

[KarolisAntanas]

Description

Can't get Tailwind JIT properly working using gridsome-plugin-tailwindcss
I know this isn't the plugins repo, but the plugin repo has issues tab disabled so I don't know where else to ask.

I've installed the plugin as described (using compatibility build) and it works fine until I try to add mode: "jit" in tailwind.config.js.

JIT itself does work, classes like pt-[20px] are being applied, but only after I manually save tailwind.config.js file. If I don't - add classes, save .vue file, reload browser - nothing happens until I save config file, then browser reloads and styles applies. Also, everything works fine if I delete classes - changes are applied automatically, but if classes are being added, then nothing happens.

Is this expected behaviour (hopefully not)? What am I missing? Thanks a lot.`
Here's my Tailwind config file

module.exports = {
  mode: "jit",
  purge: ["src/**/*.{js,jsx,ts,tsx,vue}"],
};

gridsome.config.js

module.exports = {
  plugins: [
    {
      use: "gridsome-plugin-tailwindcss",
    },
    {
      use: "@gridsome/source-filesystem",
      options: {
        path: "src/pages/markdown/**/*.md",
        typeName: "Post",
      },
    },
    {
      use: "@gridsome/source-wordpress",
      options: {
        baseUrl: "http://vsbl-be.test", // required
        apiBase: "wp-json",
        typeName: "WordPress",
        perPage: 100,
        concurrent: 10,
      },
    },
  ],
  templates: {
    WordPressPost: "/:slug",
  },
};`

And package.json 

{
  "name": "...",
  "private": true,
  "scripts": {
    "develop": "gridsome develop",
    "explore": "gridsome explore",
    "build": "gridsome build"
  },
  "dependencies": {
    "@gridsome/source-filesystem": "^0.6.2",
    "@gridsome/source-wordpress": "^0.5.3",
    "@gridsome/transformer-remark": "^0.6.4",
    "gridsome": "^0.7.0"
  },
  "devDependencies": {
    "autoprefixer": "^9.8.6",
    "axios": "^0.21.1",
    "gridsome-plugin-tailwindcss": "^4.1.1",
    "postcss": "^7.0.36",
    "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.4"
  }
}

[shumiyao]

I am also interested in JIT.

It looks like it has something to do with PostCSS 8:

#1462

And I think that we are all looking forward to the release of gridsome 0.8

#1466

[cameronrr]

Looks like the compatibility dependencies are blocking this. I recently started using WindiCSS instead. So far so good. Just another option to try/consider depending on the needs of your project. https://gridsome.org/plugins/gridsome-plugin-windicss

[eyrewiut]

Strange, I'm not using gridsome-plugin-tailwindcss but I managed to get tailwind and JIT working perfectly adding it in the postcss plugins in webpack loader options:
https://gridsome.org/docs/config/#cssloaderoptions

I also had to add TAILWIND_MODE=watch as an env var to get livereload to work properly

// gridsome.config.js
module.exports = {
  ...
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          require("tailwindcss"),
          require("autoprefixer"),
        ],
      }
    }
  }
}

Package versions:

"gridsome": "^0.7.23",
"tailwindcss": "npm:@tailwindcss/postcss7-compat",
"postcss": "^7",
"postcss-loader": "^4.0.0",

[shumiyao]

@eyrewiut

What else did you have to do for getting tailwind + JIY to work? I am after all using WindiCss but I am just curious.

[eyrewiut]

@shumiyao
Thats pretty much it! I don't remember doing anything more than that.. 👍

I did just remember though, I'm have postcss disabled for now since JIT should only generate whats needed.

The gridsome docs show how to setup purgecss for tailwind without using the plugin
https://gridsome.org/docs/assets-css/#tailwind

[shumiyao]

@eyrewiut

Thank you for your reply!

I hope that gridsome gets a highly anticipated major update soon.

[maxyudin]

I managed to put JIT to work with gridsome-plugin-tailwindcss.

First, added to the tailwind.config.js

module.exports = {
  mode: 'jit',
  // ...
  // ...
};

Second, I added TAILWIND_MODE=watch to the .env file. See Just-in-Time Mode → Troubleshooting → Styles don't update when saving content files

Please notice that they say This flag is a temporary workaround for incompatible tooling, and will eventually be removed in a future version of Tailwind CSS.

Packages:

"gridsome": "^0.7.23",
"gridsome-plugin-tailwindcss": "^4.1.1",
"postcss": "^7",
"tailwindcss": "npm:@tailwindcss/postcss7-compat",