francislavoie / snowpack-plugin-tailwindcss-jit

Snowpack plugin to watch template files and enable on-demand TailwindCSS JIT compilation for development

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

@jadex/snowpack-plugin-tailwindcss-jit

MIT License NPM version NPM downloads Node.js Package

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. 😐

ezoic increase your site revenue

About

Snowpack plugin to watch template files and enable on-demand TailwindCSS JIT compilation for development

License:MIT License


Languages

Language:JavaScript 100.0%