Integrate with PostCSS/Tailwindcss

[trungtin]

How does Sandpack bundling/compiling work? And could I somehow modify it? My website needs to integrate TailwindCSS in the example, using Sandpack. But since TailwindCSS 3.0, they use JIT compiler to generate CSS. So I can't just add the full css file to Sandpack.

Should I use web worker (like play.tailwindcss.com) / edge worker to compile css beforehand and later inject the css to Sandpack?

[danilowoz]

Hey @trungtin, thanks for raising this topic here.

Sandpack-react relies on https://github.com/stitchesjs/stitches to style its component, which is almost zero-runtime CSS-in-js framework. At this moment, Stitches doesn't provide a way to extract its style on build time and I'm not sure when and if they will even provide it.

Plus, taking into account that Sandpack creates dynamically styles on runtime (themes, a few conditional components, CodeMirror runtime theme), we're far to be able to implement everything on build time.

So, I'd still encourage you to use our SSR support, which is described on our documentation: https://sandpack.codesandbox.io/docs/getting-started/ssr

Hope it makes clearer.

[xKevIsDev]

use nextjs template, tailwind seems to be working fine in there without the need to use cdn like other templates

[naymurdev]

can you tell me how you did it?