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 😲

[thomasruiz]

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.

[austinorr]

Tailwind noob here, but I'm also excited about this jit effort and having trouble with the development workflow for tailwind in snowpack. It may not be possible (or at least, it may not be easy), but I had partly expected that the dev behavior of the jit compiler would be able to be configured to 'watch' the files matching the tailwind.config purge.content. In my case, I don't actually wish to 'watch' any css files at all since my tailwind classes are in my markup and templates.

I tried using the script solution proposed by @bramaudi to trigger postcss to watch my js and html files, but it hangs immediately on any the non-css syntax e.g., a js file (should have mentioned I'm also a postcss noob too). Of course, I also tried it as intended, watching my projects css file.

I also tried leveraging the snowpack build --watch command (which is just like the snowpack dev command except that files actually get written to the build directory; I thought re-triggering builds would trickle down through the plugins and actually re-apply the tailwind purge.content directive), but alas the tailwind jit compiler fires only once during startup and never again. I should note here that this is the same behavior I get when using tailwind straight. I should also note that I can build my project with slim css files easily as a one-off, but I cannot (yet) watch/develop my project without using the xxl tailwind css.

I'm hoping there is a way to get the jit to fire again when I edit my templates or markup files, or maybe there's some other argument or incantation I missed that can get it working as well as it clearly does in webpack.

[Xeevis]

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

[austinorr]

@Xeevis the local plugin idea works a charm. Don't forget to npm install after modifying the devDeps. Now we just need to find a way to pass the desired 'watch css filepath' and file match pattern (e.g., "./src/**/*.{js,html,jsx,css}" to the plugin to avoid the hard coding. Thank you!

[Xeevis]

@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

yJh1AWs9OV.mp4

[Xeevis]

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

[verbose9]

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.

[verbose9]

Why tailwindlabs/tailwindcss-jit#181 is closed?

[verbose9]

Possible reasons might be: Snowpack caches everything indefinitely. That's why it gives ⚡ fast performance from the beginning. And in my opinion the whole point of JIT is already built into Snowpack.

Office website

[adamwathan]

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.

[verbose9]

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.

Really happy that you guys are working on it😄😄

[verbose9]

what about that PR that you are working on??

[adamwathan]

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.

[deleonio]

Issue similar to https://github.com/tailwindlabs/tailwindcss-jit/issues/202

[sebastiandittrich]

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!

[mustafa0x]

I have this issue with rollup. TAILWIND_MODE='watch' didn't work. What does work is touch tailwind.config.cjs after each change. Maybe that indicates where the problem lies.

[mrodrigues95]

I have this issue with rollup. TAILWIND_MODE='watch' didn't work. What does work is touch tailwind.config.cjs after each change. Maybe that indicates where the problem lies.

This is happening to me as well on a Next JS project running inside Docker. The only way for my changes to be updated is by opening up tailwind.config.js and hitting save.

[adamwathan]

@mustafa0x @mrodrigues95 can you both try setting TAILWIND_DISABLE_TOUCH=true? It will use an alternative watch method that is actually a bit better but doesn't work with all build tools (works with webpack and Rollup though).

[mustafa0x]

Thanks, that did it!

[mrodrigues95]

@adamwathan In my case, setting CHOKIDAR_USEPOLLING=true fixed it (along with TAILWIND_MODE=watch) since I am working inside a docker container.

[Xeevis]

@adamwathan I believe this issue can be closed, Snowpack has added official support for TailwindCSS JIT in version 3.5.0+
FredKSchott/snowpack#3309
FredKSchott/snowpack#3326

Install instructions available in the docs https://www.snowpack.dev/guides/tailwind-css

On the side note combined with TailwindCSS 2.2.0-canary.9 works also with TAILWIND_DISABLE_TOUCH=true.

[teenjuna]

@Xeevis what's your configuration? For me it works only after manual page refresh and only when developer tools are open (Chrome).
I have this in package.json:

{
  "scripts": {
    "dev": "TAILWIND_MODE=watch NODE_ENV=development snowpack dev",
    "build": "TAILWIND_MODE=build NODE_ENV=production snowpack build",
  },
  "dependencies": {
    "@tailwindcss/forms": "^0.3.2",
    "solid-app-router": "^0.0.40",
    "solid-js": ">= 0.26"
  },
  "devDependencies": {
    "@babel/core": "^7.13.14",
    "@babel/preset-typescript": "^7.13.0",
    "@snowpack/plugin-babel": "^2.1.7",
    "@snowpack/plugin-dotenv": "^2.1.0",
    "@snowpack/plugin-postcss": "^1.4.0",
    "@snowpack/plugin-typescript": "^1.2.1",
    "@types/snowpack-env": "^2.3.3",
    "autoprefixer": "^10.2.5",
    "babel-preset-solid": "^0.25.0",
    "postcss": "^8.3.0",
    "postcss-cli": "^8.3.1",
    "prettier": "^2.2.1",
    "snowpack": "^3.5.1",
    "tailwindcss": "^2.1.2",
    "typescript": "^4.2.4"
  }
}

This is snowpack.config.js:

/**
 * @type {import('snowpack').SnowpackConfig}
 */
const config = {
  mount: {
    public: '/',
    src: '/assets',
  },
  packageOptions: {
    installTypes: true,
    NODE_ENV: true,
  },
  devOptions: {
    out: 'dist',
    open: 'none',
    bundle: true,
    tailwindConfig: './tailwind.config.js',
  },
  buildOptions: {
    clean: true,
    out: 'dist',
  },
  plugins: [
    '@snowpack/plugin-typescript',
    '@snowpack/plugin-babel',
    '@snowpack/plugin-postcss',
    '@snowpack/plugin-dotenv',
  ],
  optimize: {
    bundle: true,
    minify: true,
    target: 'es2020',
    treeshake: true,
    splitting: true,
  },
  alias: {
    '@': './src',
  },
  routes: [{ match: 'routes', src: '.*', dest: '/index.html' }],
};

module.exports = config;

This in tailwind.config.js:

const colors = require('tailwindcss/colors');

module.exports = {
  mode: 'jit',
  purge: ['src/**/*.tsx', 'public/index.html'],
  dark: false,
  theme: {
    extend: {
      colors: {
        gray: colors.trueGray,
      },
    },
  },
  variants: {},
  plugins: [require('@tailwindcss/forms')],
};

And this in postcss.config.js:

module.exports = {
  plugins: {
    tailwindcss: {},
  },
};

[Xeevis]

@teenjuna I have added TAILWIND_DISABLE_TOUCH=true (doesn't work without it for me)

"scripts": {
  "dev": "TAILWIND_MODE=watch NODE_ENV=development TAILWIND_DISABLE_TOUCH=true snowpack dev",
},

I also had to upgrade to TailwindCSS 2.2.0 canary for it work for other markup files for purge other than .html

npm install -D tailwindcss@canary

Works like a charm

[teenjuna]

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

[bradlc]

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!

[adamburgess]

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)

[loctran016]

Any helps? Even though I've set like @bradlc said, it doesn't work, no errors in the console, but I still can't use tailwindcss. I've run cross-env NODE_ENV=development TAILWIND_DISABLE_TOUCH=true yarn clean && npx @11ty/eleventy && snowpack dev:

My repo is here (snowpack branch)

[adamwathan]

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.

[loctran016]

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.

Oh, ok