tailwind

Author: Fil

package.json

@@ -119,6 +119,7 @@
     "cross-env": "^7.0.3",
     "d3-dsv": "^3.0.1",
     "d3-format": "^3.1.0",
+    "esbuild-plugin-tailwindcss": "^1.2.1",
     "eslint": "^8.50.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-import-resolver-typescript": "^3.6.1",

src/build.ts

@@ -164,10 +164,10 @@ export async function build(
       effects.output.write(`${faint("build")} ${path} ${faint("→")} `);
       if (specifier.startsWith("observablehq:theme-")) {
         const match = /^observablehq:theme-(?<theme>[\w-]+(,[\w-]+)*)?\.css$/.exec(specifier);
-        contents = await bundleStyles({theme: match!.groups!.theme?.split(",") ?? [], minify: true});
+        contents = await bundleStyles({theme: match!.groups!.theme?.split(",") ?? [], minify: true, root});
       } else {
         const clientPath = getClientPath(path.slice("/_observablehq/".length));
-        contents = await bundleStyles({path: clientPath, minify: true});
+        contents = await bundleStyles({path: clientPath, minify: true, root});
       }
       const hash = createHash("sha256").update(contents).digest("hex").slice(0, 8);
       const alias = applyHash(path, hash);
@@ -181,7 +181,7 @@ export async function build(
     } else if (!/^\w+:/.test(specifier)) {
       const sourcePath = join(root, specifier);
       effects.output.write(`${faint("build")} ${sourcePath} ${faint("→")} `);
-      const contents = await bundleStyles({path: sourcePath, minify: true});
+      const contents = await bundleStyles({path: sourcePath, minify: true, root});
       const hash = createHash("sha256").update(contents).digest("hex").slice(0, 8);
       const alias = applyHash(join("/_import", specifier), hash);
       aliases.set(resolveStylesheetPath(root, specifier), alias);

src/preview.ts

@@ -132,13 +132,13 @@ export class PreviewServer {
       } else if (pathname === "/_observablehq/minisearch.json") {
         end(req, res, await searchIndex(config), "application/json");
       } else if ((match = /^\/_observablehq\/theme-(?<theme>[\w-]+(,[\w-]+)*)?\.css$/.exec(pathname))) {
-        end(req, res, await bundleStyles({theme: match.groups!.theme?.split(",") ?? []}), "text/css");
+        end(req, res, await bundleStyles({theme: match.groups!.theme?.split(",") ?? [], root}), "text/css");
       } else if (pathname.startsWith("/_observablehq/") && pathname.endsWith(".js")) {
         const path = getClientPath(pathname.slice("/_observablehq/".length));
         end(req, res, await rollupClient(path, root, pathname), "text/javascript");
       } else if (pathname.startsWith("/_observablehq/") && pathname.endsWith(".css")) {
         const path = getClientPath(pathname.slice("/_observablehq/".length));
-        end(req, res, await bundleStyles({path}), "text/css");
+        end(req, res, await bundleStyles({path, root}), "text/css");
       } else if (pathname.startsWith("/_node/") || pathname.startsWith("/_jsr/")) {
         send(req, pathname, {root: join(root, ".observablehq", "cache")}).pipe(res);
       } else if (pathname.startsWith("/_npm/")) {
@@ -151,7 +151,7 @@ export class PreviewServer {
           if (module) {
             const sourcePath = join(root, path);
             await access(sourcePath, constants.R_OK);
-            end(req, res, await bundleStyles({path: sourcePath}), "text/css");
+            end(req, res, await bundleStyles({path: sourcePath, root}), "text/css");
             return;
           }
         } else if (pathname.endsWith(".js")) {

src/rollup.ts

@@ -1,11 +1,14 @@
+import {writeFileSync} from "fs";
 import {extname, resolve} from "node:path/posix";
 import {nodeResolve} from "@rollup/plugin-node-resolve";
 import {simple} from "acorn-walk";
 import {build} from "esbuild";
+import type {Plugin as ESBuildPlugin} from "esbuild";
+import {tailwindPlugin} from "esbuild-plugin-tailwindcss";
 import type {AstNode, OutputChunk, Plugin, ResolveIdResult} from "rollup";
 import {rollup} from "rollup";
 import esbuild from "rollup-plugin-esbuild";
-import {getClientPath, getStylePath} from "./files.js";
+import {getClientPath, getStylePath, maybeStat} from "./files.js";
 import type {StringLiteral} from "./javascript/source.js";
 import {getStringLiteralValue, isStringLiteral} from "./javascript/source.js";
 import {resolveNpmImport} from "./npm.js";
@@ -36,17 +39,20 @@ function rewriteInputsNamespace(code: string) {
 export async function bundleStyles({
   minify = false,
   path,
-  theme
+  theme,
+  root
 }: {
   minify?: boolean;
   path?: string;
   theme?: string[];
+  root: string;
 }): Promise<string> {
   const result = await build({
     bundle: true,
     ...(path ? {entryPoints: [path]} : {stdin: {contents: renderTheme(theme!), loader: "css"}}),
     write: false,
     minify,
+    plugins: [await tailwindConfig(root)],
     alias: STYLE_MODULES
   });
   let text = result.outputFiles[0].text;
@@ -184,3 +190,34 @@ function importMetaResolve(path: string, resolveImport: ImportResolver): Plugin
     }
   };
 }
+
+// Create a tailwind plugin, configured to reference as content the project
+// files that might contain tailwind class names, and the 'tw-' prefix. If a
+// tailwind.config.js is present in the project root, we import and merge it.
+async function tailwindConfig(root: string): Promise<ESBuildPlugin> {
+  const twconfig = "tailwind.config.js";
+  const configPath = `./${root}/.observablehq/cache/${twconfig}`;
+  const s = await maybeStat(`./${root}/${twconfig}`);
+  const m = await maybeStat(configPath);
+  if (!m || !s || !(m.mtimeMs > s.mtimeMs)) {
+    writeFileSync(
+      configPath,
+      `
+// File generated by rollup.ts; to configure tailwind, edit ${root}/tailwind.config.js
+${s ? `import config from "../../${twconfig}"` : "const config = {}"};
+export default {
+  content: {
+    files: [
+      "${root}/**/*.{js,md}" /* pages and components */,
+      "${root}/.observablehq/cache/**/*.md" /* page loaders */,
+      "${root}/.observablehq/cache/_import/**/*.js" /* transpiled components */
+    ]
+  },
+  prefix: 'tw-',
+  ...config
+};
+`
+    );
+  }
+  return tailwindPlugin({configPath});
+}

src/style/default.css

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

src/style/tailwind.css

@@ -0,0 +1,3 @@
+/* @import "tailwindcss/base"; */
+@import "tailwindcss/components";
+@import "tailwindcss/utilities";