JIT does not work when prefix callback is specified

[signor-pedro]

What version of @tailwindcss/jit are you using?

0.1.10

What version of Node.js are you using?

15.9.0

What browser are you using?

all of them

What operating system are you using?

macOS

Reproduction repository

https://github.com/signor-pedro/tailwind-repro

Commenting this out makes JIT work

prefix(selector) {
    if (['.align-bottom', '.ml-1'].includes(selector)) {
      return 'tw-';
    }

    return '';
  },

[signor-pedro]

Just to clarify - adding a prefix callback does not break only the should-be-prefixed classes.

When I specify the prefix callback, the entire tailwind fails to generate anything (even classes such as bg-indigo-200 which are not manipulated with in any way in the callback).

You may run the example repo with NODE_ENV="production" TAILWIND_MODE="build" ./node_modules/.bin/encore production

Thank you for any help on this :)

[adamwathan]

Added in v0.1.17! There's one limitation which is that you can't do exact matches against dynamically generated utilities, like ml-5. Instead, you'll just want to match against the prefix of the utility, so like this:

prefix(selector) {
  if (['.align-bottom', '.ml'].some(utility => selector.startsWith(utility))) {
    return 'tw-';
  }

  return '';
},

Hopefully this is good enough for the use cases people have for this feature in the real world 👍🏻

[signor-pedro]

Thank you very much, the solution is good enough, only needed to override bootstrap-conflicting classes (which are all the ml-s etc. anyways).

Made my day!