S
SolidJS•4d ago
ⱼ ₒ ₑ

Solid Start HMR not rebuilding styles on class change

Use tailwind 4.0, change class of JSX component while dev server is running, HMR reloads component but tailwind is not rebuilt to actually style the class How could I fix this? In vite config?
1 Reply
ⱼ ₒ ₑ
ⱼ ₒ ₑOP•3d ago
I have the tailwind 4.0 plugin for postCSS and vite integrated, but still nothing I can get around it by saving the tailwind.css source but that's obviously not ideal Okay well I just scuffed into existence this vite plguin that seems to work I have no clue if it's ideal but it works: 
export default function forceTailwindHMR(config = {}) {
  const {
    tailwindPath = "/src/tailwind.css",
    fileExtensions = ['.tsx', '.jsx', '.html', '.css'],
  } = config;

  return {
    name: "force-tailwind-hmr",
    async handleHotUpdate({ file, server, modules }) {
      if (fileExtensions.some((ext) => file.endsWith(ext))) {
        const tailwindModule = await server.moduleGraph.getModuleByUrl(tailwindPath);

        if (tailwindModule) {
          server.moduleGraph.invalidateModule(tailwindModule);
          return [...modules, tailwindModule];
        }

        return modules;
      }
    },
  };
}
export default function forceTailwindHMR(config = {}) {
  const {
    tailwindPath = "/src/tailwind.css",
    fileExtensions = ['.tsx', '.jsx', '.html', '.css'],
  } = config;

  return {
    name: "force-tailwind-hmr",
    async handleHotUpdate({ file, server, modules }) {
      if (fileExtensions.some((ext) => file.endsWith(ext))) {
        const tailwindModule = await server.moduleGraph.getModuleByUrl(tailwindPath);

        if (tailwindModule) {
          server.moduleGraph.invalidateModule(tailwindModule);
          return [...modules, tailwindModule];
        }

        return modules;
      }
    },
  };
}
Use in vite config like so 
    vite: {
        plugins: [
        tailwindcss(),
        forceTailwindHMR({
          tailwindPath: "pathToCssFileHere"
        })
      ],
    }
    vite: {
        plugins: [
        tailwindcss(),
        forceTailwindHMR({
          tailwindPath: "pathToCssFileHere"
        })
      ],
    }
Again I don't know if this is standard or optimal but it's working for me with Tailwind 4.0 and SolidStart

Did you find this page helpful?