framework icon indicating copy to clipboard operation
framework copied to clipboard

Tailwind integration

Open mbostock opened this issue 1 year ago • 9 comments

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

mbostock avatar Jan 23 '24 19:01 mbostock

Bumping this. Would be really handy.

mbostock avatar Apr 12 '24 21:04 mbostock

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.

plasmak11 avatar May 22 '24 13:05 plasmak11

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

choucavalier avatar Jun 04 '24 09:06 choucavalier

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.

mbostock avatar Jun 09 '24 17:06 mbostock

Would love to see it happen.

fleea avatar Aug 28 '24 13:08 fleea

👍 +1

vladnicula avatar Sep 06 '24 05:09 vladnicula

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

choucavalier avatar Sep 06 '24 05:09 choucavalier

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.

vladnicula avatar Sep 06 '24 05:09 vladnicula

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

fleea avatar Sep 06 '24 06:09 fleea