ⱼ ₒ ₑ Comments - Answer Overflow

/fonts/Geist-SemiBold.woff2 referenced in /fonts/Geist-SemiBold.woff2 didn't resolve at build time, it will remain unchanged to be resolved at runtime

yeah this is my issue

8 replies

SSolidJS

•Created by ⱼ ₒ ₑ on 1/17/2025 in #support

Solid Start HMR not rebuilding styles on class change

Again I don't know if this is standard or optimal but it's working for me with Tailwind 4.0 and SolidStart

6 replies

SSolidJS

•Created by ⱼ ₒ ₑ on 1/17/2025 in #support

Solid Start HMR not rebuilding styles on class change

Use in vite config like so

    vite: {
        plugins: [
        tailwindcss(),
        forceTailwindHMR({
          tailwindPath: "pathToCssFileHere"
        })
      ],
    }

    vite: {
        plugins: [
        tailwindcss(),
        forceTailwindHMR({
          tailwindPath: "pathToCssFileHere"
        })
      ],
    }

6 replies

SSolidJS

•Created by ⱼ ₒ ₑ on 1/17/2025 in #support

Solid Start HMR not rebuilding styles on class change

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;
      }
    },
  };
}