Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Tailwind integration #595

Open
mbostock opened this issue Jan 23, 2024 · 10 comments · May be fixed by #1762
Open

Tailwind integration #595

mbostock opened this issue Jan 23, 2024 · 10 comments · May be fixed by #1762
Labels
enhancement New feature or request

Comments

@mbostock
Copy link
Member

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

@mbostock mbostock added the enhancement New feature or request label Jan 23, 2024
@mbostock mbostock mentioned this issue Jan 23, 2024
@mbostock
Copy link
Member Author

Bumping this. Would be really handy.

@junghoon-son
Copy link

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
Copy link

choucavalier commented Jun 4, 2024

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
Copy link
Member Author

mbostock commented Jun 9, 2024

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
Copy link

fleea commented Aug 28, 2024

Would love to see it happen.

@vladnicula
Copy link

👍 +1

@choucavalier
Copy link

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

@vladnicula
Copy link

vladnicula commented Sep 6, 2024

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
Copy link

fleea commented Sep 6, 2024

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

@Fil Fil linked a pull request Oct 17, 2024 that will close this issue
15 tasks
@daniel-payne
Copy link

daniel-payne commented Oct 30, 2024

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

Successfully merging a pull request may close this issue.

6 participants