tailwind

[mbostock]

Some things to figure out:

1. Tailwind has very opinionated “preflight” styles which are essentially incompatible with Markdown. (For example, paragraphs have no margins by default, and so smush together.) We’ll need to either disable these preflight styles completely, or add our own base styles for margins on paragraphs and headings, or change our Markdown generator to apply the appropriate Tailwind styles explicitly.

2. It seems like for preview we can use Tailwind’s CDN script. But it would be better if this were self-hosted, given that we’ve already installed Tailwind locally; we want the preview server to work offline. Maybe we could use the Tailwind CLI instead, and watch files, but then we’ll also need to update the stylesheet as the content changes. Overall, I think it’ll be a fair amount of work to get live preview working.

3. For build, presumably we can use Tailwind’s CLI, so that doesn’t seem too bad. I was imagining that Tailwind would be an observablehq:tailwind.css module.

4. Users might need some way to configure Tailwind. Ideally, the Tailwind config is nested within the Observable config. This is all predicated on us being able to invoke Tailwind programmatically, which it doesn’t seem set up to do, but presumably we can do it using PostCSS and loading Tailwind as a plugin. 😓

Ref. #595.

[mbostock]

As an alternative for disabling preflight, there is also a prose class in the typography plugin that is intended for Markdown.

[choucavalier]

I think the prose plugin is the right way to go! Maybe we could also dynamically add tailwind classes to the HTML elements generated from the Markdown code?

[Fil]

A way to add tailwind in rollup.ts:

yarn add --dev esbuild-plugin-tailwindcss:

+import {tailwindPlugin} from "esbuild-plugin-tailwindcss";

     ...(path ? {entryPoints: [path]} : {stdin: {contents: renderTheme(theme!), loader: "css"}}),
     write: false,
     minify,
+    plugins: [
+      tailwindPlugin({
+        // ...options
+      })
+    ],

the rest is similar to this PR (tailwind.config.js, etc)

This works both in preview and on build (but does not solve the reset either). HTH.