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.

[junghoon-son]

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]

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.

[fleea]

Would love to see it happen.

[vladnicula]

👍 +1

[choucavalier]

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

[vladnicula]

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]

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

[daniel-payne]

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>',

[daniel-payne]

looks like

head: '<script src="https://unpkg.com/@tailwindcss/browser@4"></script>',

in observablehq.config.js is working fine for me, and sidebar looks to be working now as well

[daniel-payne]

I now use this link to get my tailwind pkg, as unpkg stopped working

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>