search

observablehq / framework

A static site generator for data apps, dashboards, reports, and more. Observable Framework combines JavaScript on the front-end for interactive graphics with any language on the back-end for data analysis.
https://observablehq.com/framework/
ISC License
2.53k stars 121 forks source link

Tailwind integration #595

Open mbostock opened 9 months ago

mbostock commented 9 months ago

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

mbostock commented 7 months ago

Bumping this. Would be really handy.

plasmak11 commented 5 months ago

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.

choucavalier commented 5 months ago

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 commented 5 months ago

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.

fleea commented 2 months ago

Would love to see it happen.

vladnicula commented 2 months ago

👍 +1

choucavalier commented 2 months ago

Don't 'bump' the maintainers like that. They're not at your disposal to implement features you consider a priority.

vladnicula commented 2 months ago

Don't 'bump' the maintainers like that. They're not at your disposal to implement features you consider a priority.

Seem like my comment triggered you. It was not my intention. I don't expect others to be at my disposal.

Happy to help by reading some code regarding the way styles are handled in observablehq in that case and share any findings, provided that anyone shares some pointers to what to start reading.

fleea commented 2 months ago

I also would like to apologize for my comment. It wasn't my intention to push for the implementation.

daniel-payne commented 1 week ago

as a workaround while i wait for full integration, i added this to observablehq.config.js but it does mess up the sidebar (i am not using it so it is ok for me)

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