framework icon indicating copy to clipboard operation
framework copied to clipboard

tailwind

Open mbostock opened this issue 1 year ago • 2 comments

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 avatar Jan 23 '24 21:01 mbostock