How to enable JIT mode on TailwindCSS?

[vivgui]

How can I enable JIT mode for TailwindCSS? I try adding mode: 'jit' to the config but that doesn't work for some reason.

Btw, great starter theme! I use it for all my new shopify projects now.

[sergejcodes]

Hi 👋,

the mode setting you mentioned should be right. I just tried it out on the latest Theme Lab version and everything seems to work.

Troubleshooting steps

1. stop any running npm tasks
2. make sure you have the latest TailwindCSS version installed
3. add jit mode to tailwind.config.js and make sure the purge content path points to the right files:

...

module.exports = {
  mode: 'jit',
  ...
  purge: {
    enabled: process.env.NODE_ENV === 'production',
    content: [
      path.resolve(__dirname, '**/*.{js,vue}'),
      path.resolve(__dirname, '../shopify/**/*.liquid')
    ]
  }
}

4. run npm run start

Here are jit arbitrary styles in action:

[vivgui]

Ah, thank you! My problem could be that I'm on a slightly old version, I'll look into that.