Dev server must be restarted to have classes applied with Snowpack

[samueldrai]

What version of @tailwindcss/jit are you using?

0.1.4

What version of Node.js are you using?

14.2.0

What browser are you using?

Chrome

What operating system are you using?

macOS

Reproduction repository

https://www.youtube.com/watch?v=G6d-SXdcJXs

Hi there ☺️

I tried to use this new JIT feature with a new React app built with Snowpack.
Unfortunately, I cannot have Snowpack use Tailwind JIT properly.

I think I might have missed something about the configuration process.
When changing a class in a component, I have to stop and restart the dev server.
Here are my config files:

// snowpack.config.js
module.exports = {
  mount: {
    public: { url: '/', static: true },
    src: { url: '/dist' },
  },
  plugins: [
    '@snowpack/plugin-react-refresh',
    '@snowpack/plugin-dotenv',
    '@snowpack/plugin-typescript',
    '@snowpack/plugin-postcss',
  ],
  routes: [{ match: 'routes', src: '.*', dest: '/index.html' }],
  optimize: {},
  packageOptions: {},
  devOptions: {},
  buildOptions: {},
}

// tailwind.config.js
module.exports = {
  purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
  darkMode: false,
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

// postcss.config.js
module.exports = {
  plugins: {
    '@tailwindcss/jit': {},
    autoprefixer: {},
  },
}

Thanks!

[adamwathan]

Hey thanks! In this case a reproduction repository would definitely be helpful so we don't have to try and set everything up from scratch 🙏 I've never used Snowpack before so without a reproduction repository it's going to be a lot of work for me to try and recreate this problem by hand.

[samueldrai]

Of course, there it is: repo

Sorry for not putting it in the previous message.

By the way, thanks a lot for the quick answer 🚀 :)

[Xeevis]

Hello. If I may chip in I can't get the JIT watcher fully working with Snowpack either. Very simple repo https://github.com/Xeevis/tailwindcss-jit-snowpack

pnpm install
pnpm watch

When I change the app/app.css it's correctly reflected in build/app.css right away, changing the app/index.html however won't change the css on it's own, I either have to run the watch again or manually save the unchanged app/app.css.

[Renerick]

Can confirm same behavior with rollup -c -w (no snowpack) - styles are only updated when I save CSS files, not template files. Repro - https://github.com/Renerick/svelte-template/tree/tailwindcss-jit, npm run dev

[apvarun]

You can explicitly configure TAILWIND_MODE to be watch.

Set the env variable as export TAILWIND_MODE="watch"
or configure in yoru npm scripts

// package.json
"scripts:{
  "dev": "...",
  "watch": "TAILWIND_MODE='watch' npm run dev"
}

This environment variable seems to solve the problem.

[Renerick]

Interesting. This does indeed resolves the problem (with rollup at least), but I wonder if it's correct behavior, considering that it still automatically generates new styles when changing CSS files without the variable

[adamwathan]

Yeah that's correct behavior, the template watching is handled by us but the CSS file watching is handled by the build tool which explains why you're seeing that. We'll figure out how to make this more intuitive/automatic over time for sure.

[samueldrai]

Hi,
Thanks a lot for your answers.
I tried the solution provided by @apvarun but I still run in the same issue.
I changed my scripts tag for this:

"scripts": {
    "start": "snowpack dev",
    "build": "snowpack build",
    "watch": "TAILWIND_MODE='watch' yarn start"
  }

Can't figure out why I still have this issue :/

[adamwathan]

@samueldrai just cloned your repo but it looks like Tailwind isn't even listed as a dependency, nor is there a tailwind.config.js file or anything like that so I'm not sure where to start here. I feel like a moron saying "you need to install Tailwind for Tailwind to work" but that's about the only advice I can offer currently, haha... Can you update the repo with your latest efforts?

[Xeevis]

No dice here with snowpack, since I'm on Windows tried to change env with cross-env

"scripts": {
  "dev": "cross-env NODE_ENV=development TAILWIND_MODE=watch snowpack dev",
  "watch": "cross-env NODE_ENV=development TAILWIND_MODE=watch snowpack build --watch"
},

Doesn't work in either dev or watch. Saving index.html won't trigger change in the css, I still need to manually bump css file for html changes to take effect.

My code https://github.com/Xeevis/tailwindcss-jit-snowpack

[samueldrai]

@adamwathan sorry for the back and forth. The problem was that the repo was a repo from my company and I could not share it directly. 😅
Anyway, here's the up-to-date repo!
https://github.com/samueldrai/tailwind-jit-snowpack

[bramaudi]

@samueldrai I also trying the same thing in my PHP project using @snowpack/plugin-run-script and thats works great. Maybe you should try.

npm i -D @snowpack/plugin-run-script postcss-cli

// snowpack.config.js
// ...
plugins: [
    [
      '@snowpack/plugin-run-script',
      {
        cmd: 'postcss ./app/assets/css/style.css -o ./public/css/style.css --no-source-map', // production build command
        watch: 'postcss --watch ./app/assets/css/style.css -o ./public/css/style.css --no-source-map', // (optional) dev server command
      },
    ],
  ],
// ...

then just npx snowpack dev, since tailwindcss jit already build production-ready css then no build command needed.

[Xeevis]

@bramaudi this workaround does work somewhat better, thanks!

Edit: It takes the build out of the Snowpack pipeline which is problematic if you want to use new Integrated build optimizations or @snowpack/plugin-optimize

However when I remove classes from template file, it won't get purged from the css, it only appends new classes. For purge I need to bump save CSS file. This doesn't feel right, is this expected behavior with the JIT @adamwathan ?

Tb9u1zo87V.mp4

[adamwathan]

@Xeevis Yeah that's been discussed before, it's a deliberate performance optimization that assumes people are always doing a fresh build when actually building for production:

tailwindlabs/tailwindcss-jit#57

It is surprising to me to learn that people run a watcher in development and are actually committing the output of the watcher, I thought everyone was building assets like this at deploy 😲