separate tailwind.css; always refresh it in preview; blocklist the grid classes for compatibility

Author: Fil

src/client/preview.js

@@ -155,6 +155,8 @@ export function open({hash, eval: compile} = {}) {
           for (const href of message.stylesheets.removed) {
             document.head.querySelector(`link[rel="stylesheet"][href="${href}"]`)?.remove();
           }
+          const tw = document.head.querySelector('link[rel="stylesheet"][href$="_observablehq/tailwind.css"]');
+          if (tw) tw.href = "" + tw.href; // reload tailwind.css
         }
         enableCopyButtons();
         break;

src/style/tailwind.css renamed to src/client/tailwind.css

@@ -348,6 +348,7 @@ async function resolveResolvers(
   }
 
   // Add implicit stylesheets.
+  stylesheets.add("observablehq:tailwind.css");
   for (const specifier of getImplicitStylesheets(staticImports)) {
     stylesheets.add(specifier);
     if (specifier.startsWith("npm:")) {

src/resolvers.ts

@@ -20,6 +20,7 @@ import {THEMES, renderTheme} from "./theme.js";
 
 const STYLE_MODULES = {
   "observablehq:default.css": getStylePath("default.css"),
+  "observablehq:tailwind.css": getStylePath("tailwind.css"),
   ...Object.fromEntries(THEMES.map(({name, path}) => [`observablehq:theme-${name}.css`, path]))
 };
 
@@ -47,16 +48,18 @@ export async function bundleStyles({
   theme?: string[];
   root: string;
 }): Promise<string> {
+  const plugins = path === getClientPath("tailwind.css") ? [await tailwindConfig(root)] : undefined;
   const result = await build({
     bundle: true,
     ...(path ? {entryPoints: [path]} : {stdin: {contents: renderTheme(theme!), loader: "css"}}),
     write: false,
     minify,
-    plugins: [await tailwindConfig(root)],
+    plugins,
     alias: STYLE_MODULES
   });
   let text = result.outputFiles[0].text;
   if (path === getClientPath("stdlib/inputs.css")) text = rewriteInputsNamespace(text);
+
   return text;
 }
 
@@ -215,7 +218,8 @@ export default {
     ]
   },
   darkMode: ["variant", "&:where([class~=dark], [class~=dark] *)"],
-  prefix: 'tw-',
+  blocklist: ["grid", "grid-cols-2", "grid-cols-3", "grid-cols-4"],
+  prefix: "",
   ...config
 };
 `

src/rollup.ts

@@ -1,4 +1,3 @@
-@import url("./tailwind.css");
 @import url("./global.css");
 @import url("./layout.css");
 @import url("./grid.css");