Tailwind integration

[mbostock]

What if we included Tailwind CSS by default, and generated an optimized bundle during build? That seems useful.

[mbostock]

Bumping this. Would be really handy.

[plasmak11]

Would love this. At the minimum, even getting the grid / flexbox system. (like bootstrap grid)

The current grid system works well for desktops, but for mobile, hard to get more than linear layout.

[tgy]

This is really missing. Tailwind is so handy. It would be great to be able to completely change the layout, and integrate Observable Framework as a first-class citizen within a tailwind-based application.

One issue I'm seeing is that tailwind needs to parse HTML and CSS assets in order to generate its minimal CSS file, based on the classes actually used by the project. So, maybe the tailwind command should be ran after the HTML generation in ./dist? Also tailwind is able to watch for changes, but does that mean that we need to both run npm run dev and another tailwind command to watch for changes? Or can tailwind be ran directly as part of the Observable Framework build process?

P.S. tailwind distributes a binary, which is pretty handy

[mbostock]

You can paste this into your Markdown and use Tailwind’s “Play CDN” approach:

<script src="https://cdn.tailwindcss.com"></script>

But, agreed, a proper implementation requires Tailwind running at preview/build time to generate the appropriate stylesheet on the fly. And also we have to deal with Tailwind breaking all of Framework’s default styles as described in #596.