snowpack: [BUG] support for @tailwindcss/jit

@Xeevis It works now! Thank you very much!

I’ve created a simple plugin that will automatically monitor all template files watched by the the TailwindCSS JIT and will refresh all CSS processed by the Snowpack that import TailwindCSS. Nothing is hardcoded so ideally it should work for all scenarios without extra configuration.

Please see the NPM package or github repository for install instructions and let me know if it works for you.

Thank you for the work-around! I adapted it very slightly to work with all tsx files instead of .svelte files.

I found snowpack doesn’t support local plugins so I added a dev dependency using the file: prefix which seemed lighter weight than publishing an NPM package.

snowpack-css-refresh-plugin/index.js

const path = require('path');

/**
 * Snowpack plugin that reloads all CSS changes with PostCSS any time any .tsx 
 * file changes.
 *
 * This plugin is necessary because adding a React className like bg-blue won't
 * trigger a CSS refresh. As a workaround, pessimistically assume that any time
 * the tsx file changes that the CSS changes to trigger PostCSS.
 *
 * For details, see https://github.com/snowpackjs/snowpack/issues/2916.
 *
 * @param {import('snowpack').SnowpackConfig} snowpackConfig
 * @param {import('snowpack').SnowpackPlugin & { init?: (cfg: import('snowpack').SnowpackConfig) => void }} _pluginOptions
 */
const plugin = (snowpackConfig, _pluginOptions) => {
  const appCssPath = path.join(snowpackConfig.root || process.cwd(), 'src/App.css');
  return {
    name: '@local/snowpack-css-refresh-plugin',
    onChange({filePath}) {
      if (!filePath.endsWith('.tsx')) {
        return;
      }
      this.markChanged(appCssPath);
    },
  };
};

module.exports = plugin;

package.json

  "devDependencies": {
    "@local/snowpack-css-refresh-plugin": "file:./dev/snowpack-css-refresh-plugin"
  }

I have created a temporary plugin to fix the issue at

• https://www.npmjs.com/package/@rohfle/snowpack-plugin-watchappcss
• https://github.com/rohfle/snowpack-plugin-watchappcss

All it does is watch for changes to svelte files and then marks src/App.css as changed. But it works

To use: npm install --save-dev @rohfle/snowpack-plugin-watchappcss

then add @rohfle/snowpack-plugin-watchappcss to your plugins in snowpack.config.js

Thanks @Xeevis that plugin helped me a lot!

@drwpow It’s awesome to see progress here, thanks! That said, it’s probably worth addressing https://github.com/snowpackjs/snowpack/issues/3041 because jit is pretty much unusable if you have to restart snowpack every time you add a new class. I was hoping that because it was documented now it would be usable, but that doesn’t appear to be the case.