tailwindcss-dir rules removed on build about tailwindcss-dir HOT 4 CLOSED

Odd, do other variants get preserved? i.e hover: etc.

I'd need some more info to help out

from tailwindcss-dir.

Actually this is more odd than I thought when I build locally the tailwindcss-dir rules are in the css but when deploying (on Vercel) it's not there 😭

And to answer your question, yes the other variants are preserved.

from tailwindcss-dir.

Ok finally I'm able to reproduce locally.
I was not running the build with the NODE_ENV to prod that's why I didn't have the same output than on Vercel 😑

So definitely this is a purgecss issue (when I disable it, the ltr and rtl rules works on the built version).

So I tried to add some whitelist patterns in tailwind.conf like below but with no success.

Do you think there is a way to make tailwind-dir compatible with purgecss ?

module.exports = {
  purge: {
    content: ["./src/**/*.svelte"],
    options: {
      whitelistPattern: ["/svelte-/", "/ltr/", "/rtl/"],
    },
  },
  theme: {
    extend: {
      colors: {
        green: {
          default: "#9cce63",
          dark: "#799a53",
        },
        brown: "#b69b83",
      },
    },
  },
  plugins: [
    require("tailwindcss-dir")(),
    require("@neojp/tailwindcss-line-clamp-utilities"),
    require("@tailwindcss/custom-forms"),
  ],
  variants: {
    backgroundColor: ["responsive", "hover", "focus", "active"],
    margin: ["responsive", "direction"],
    padding: ["responsive", "direction"],
    lineClamp: ["responsive"],
    boxShadow: ["focus-within"],
  },
};

from tailwindcss-dir.

Finally I came across this issue providing the answer 🥳

tailwindlabs/tailwindcss#1931

It would be interesting to add a note in the doc for this I think.

from tailwindcss-dir.