Changes to the tailwind.config.js not taking effect in the xw types

[daviesesiro]

I adjusted the tailwindcss theme, but my changes are not showing on the xw types and it logs errors

// tailwind.config.js
module.exports = {
  darkMode: "class",
  theme: {
    extend: {
      colors: {
        green: "#00AF54",
        "yellow-dark": "#FBAF00",
        "yellow-light": "#FFD639",
        pink: "#FFA3AF",
        blue: "#007CBE",
      },
    },
  },
  variants: {},
  plugins: [],
  // xwind options
  xwind: {
    mode: "objectstyles",
  },
};

 <div
      css={xw`h-screen bg-gray-800 flex justify-center items-center bg-yellow-dark`}
    >

the error says "bg-yellow-dark is not a tailwind class, but its still works on the browser

I got the template from nextjs template for emotion and tailwindcss

Please help out🥺🥺

[Arthie]

Yes, this is a known problem that can occur when you have babel caching enabled (next.js has this by default). The babel cache should be invalidated when there is a change in the tailwind.config.js but this is currently not possible until babel adds this PR. To fix this problem you will need to delete the cached babel files located in the .next folder. I recommend deleting the cached files after tailwind.config.js changes or after updating packages. I am working on a solution that fixes this without having to wait for babel to add the feature.

[daviesesiro]

Thank you very much.

[matepaiva]

I tried only deleting .next/cache, but to make the changes take effect I had to remove the whole .next folder and restarting the app. Am I doing it right?