tailwindcss: Dev server must be restarted to have classes applied with Snowpack

The problem with Snowpack is it doesn’t have support for PostCSS’s dependency message API. We are working on a PR to Snowpack to fix this.

Why tailwindlabs/tailwindcss-jit#181 is closed?

Because it’s a duplicate of this issue and we only want one issue per problem.

Dude if you ever send me a message with two question marks in a row in it again I am gonna ban you from our repositories 😕 We are working hard, we have 500 things to work on, this is one of them. Relax.

Hey @adamwathan, I set another repo up with the changes so you can try it out: https://github.com/thomasruiz/snowflake-tailwind

If I try to change App.tsx and change the bg-blue class, the browser refreshes, but the classes are not generated.

Hey all. @snowpack/plugin-postcss was updated last week and here’s how we recommend using Tailwind JIT with Snowpack:

1. Ensure that you are using the latest tailwindcss canary release (>= 2.2.0-canary.9): npm install -D tailwindcss@canary
2. Ensure that you are using the latest version of @snowpack/plugin-postcss (>= 1.4.0)
3. Set the TAILWIND_DISABLE_TOUCH environment variable to true. This enables an alternative watch method which is now compatible with @snowpack/plugin-postcss
4. Ensure that you are not using the devOptions.tailwindConfig Snowpack option

Here is a bare-bones example project: https://github.com/bradlc/jit-snowpack

If you are still having problems after following these instructions please open a new issue with a reproduction, thanks!

I’ve published new Snowpack plugin that should help with this issue without any extra configuration. Can you guys test it if it works for you too? https://github.com/jadex/snowpack-plugin-tailwindcss-jit

This works for me, good work, thanks!

Repro of @teenjuna’s issue: https://github.com/adamburgess/jit-snowpack This is because tailwind tells snowpack to watch the entire dir. So if your styles.css is in the directory that tailwind is set to purge on (note: tailwind does not pass the glob, only the directory… so even if you don’t purge *.css your css will be included in this list), when you update styles.css, snowpack will see that styles.css has updated, go through all the dependencies (which includes styles.css) and updates them… leading to infinite loop.

Fix is to either

1. Make tailwind send the actual glob through so the css doesn’t depend on itself – Implemented in snowpack 3404
2. Resolve the glob on tailwind’s side and send all the files through - this is for postcss transformers that don’t understand glob… which is webpack/rollup/snowpack
3. Make snowpack’s plugins not do infinite loops (like rollup.)

The best solution here is probably 3, as there might be some valid reasons why css files should be able to depend on other css files (not in a cycle, though)

EDIT: Published as npm package, read instructions here https://github.com/JadeX/snowpack-plugin-tailwindcss-jit

This may be a compatibility problem with the @snowpack/plugin-postcss and JIT watcher, sadly javascript is not my turf either. However In the related issue on snowpack repo there is a workaround. Basically just create a simple snowpack plugin that will watch template files for changes and mark CSS as changed (not drag & drop, uses hardcoded values).

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.

@Xeevis Interesting… This combination creates some kind of infinite self-triggering loop on my machine …which is impossible to stop with Ctrl+C (kill -9 only) Seems like an issue with canary release. And adding TAILWIND_DISABLE_TOUCH to the latest stable release doesn’t help. So I’m not sure that this thread should be closed @adamwathan.

what about that PR that you are working on??

@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:

https://github.com/tailwindlabs/tailwindcss-jit/issues/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 😲

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

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.

Hey! Please open a new issue like @bradlc mentioned in his last comment, it’s the only way we won’t lose track of it as we can’t easily monitor closed issues.

Here’s the reproduction repo

🎉 Repo npm i to install deps. npm run dev to start dev server

Edit some classes to see the effect.

I’ve published new Snowpack plugin that should help with this issue without any extra configuration. Can you guys test it if it works for you too? https://github.com/jadex/snowpack-plugin-tailwindcss-jit

@austinorr I’ve managed to use tailwind’s purge globs. JIT works pretty well for me now with Snowpack, only thing left to do is to get rid of the hardcoded CSS file. I guess only way to do that is to read and determine which CSS files hold the Tailwind imports.

Anyway here is video using purely snowpack build --watch with @snowpack/plugin-postcss and custom plugin snowpack-tailwindcss-jit that can be found in my repo

https://user-images.githubusercontent.com/5835044/112697748-88fe5d80-8e88-11eb-9c87-048b50b28d8f.mp4