⚠ Deprecation notice ⚠

You no longer need to use this plugin. TailwindCSS JIT is now officially supported by the latest Snowpack out of the box ♥. tailwindlabs/tailwindcss#3950 (comment)

@jadex/snowpack-plugin-tailwindcss-jit

This is a simple drag & drop Snowpack plugin that enables TailwindCSS JIT to work with snowpack dev & snowpack build --watch.

Installation

Please make sure you have properly setup your project to work with Snowpack, PostCSS, TailwindCSS JIT and development evironment variables according to respective documentations.

npm install @jadex/snowpack-plugin-tailwindcss-jit --save-dev

/* snowpack.config.js */

module.exports = {
  plugins: ["@snowpack/plugin-postcss", "@jadex/snowpack-plugin-tailwindcss-jit"],
};

Usage

snowpack dev

or

snowpack build --watch

Why is extra plugin necessary?

Deficiency is in @snowpack/plugin-postcss plugin which doesn't support PostCSS Dependency Message API which Tailwind uses to tell what else has changed. When it does, this plugin shouldn't be necessary anymore and will be deprecated.

Troubleshooting

Make sure you set NODE_ENV=development or Tailwind won't watch your template files for changes.

If you want to control whether Tailwind watches files or not more explicitly, set TAILWIND_MODE=watch to override the default NODE_ENV-based behavior.

Disclaimer

Normally I'm not a javascript developer, as far as I can tell this works. Can't guarantee it will work for everyone, so please report any issues. 😐