breakpoints in coordination with framework's

Author: Fil

src/rollup.ts

@@ -62,7 +62,10 @@ export async function bundleStyles({
   // dirty patch for tailwind: remove margin:0 and styles resets for headers
   // etc. It should probably be a tailwind plugin instead.
   if (path === getClientPath("tailwind.css"))
-    text = text.replaceAll(/}[^{]*h1,\n*h2,\n*h3,\n*h4,\n*h5,\n*h6[^}]+}\s*/g, "}");
+    text = text
+      .replaceAll(/}[^{]*h1,\n*h2,\n*h3,\n*h4,\n*h5,\n*h6[^}]+}\s*/g, "}")
+      .replace(/}[^{]*body[^}]+}\s*/, "}")
+      .replace(/box-sizing:\s*border-box;/, "");
 
   return text;
 }
@@ -212,7 +215,8 @@ async function tailwindConfig(root: string): Promise<ESBuildPlugin> {
       configPath,
       `
 // File generated by rollup.ts; to configure tailwind, edit ${root}/tailwind.config.js
-${s ? `import config from "../../${twconfig}"` : "const config = {}"};
+${s ? `import cfg from "../../${twconfig}"` : "const cfg = {}"};
+const {theme, ...config} = cfg ?? {};
 export default {
   content: {
     files: [
@@ -224,6 +228,15 @@ export default {
   darkMode: ["variant", "&:where([class~=dark], [class~=dark] *)"],
   blocklist: ["grid", "grid-cols-2", "grid-cols-3", "grid-cols-4"],
   prefix: "",
+  theme: {
+    screens: {
+      sm: "640px",
+      md: "768px",
+      lg: "calc(640px + 5rem + 192px)",
+      xl: "calc(640px + 7rem + 272px + 192px)"
+    },
+    ...theme
+  },
   ...config
 };
 `