feat: support tailwind.css external resourses for Sandpack

[theshadowagent]

Complete Tailwind CSS Play CDN support in Sandpack Bundler

What kind of change does this PR introduce?

Adds complete support for Tailwind CSS Play CDN in Sandpack by properly handling custom Tailwind CSS configs.

What is the current behavior?

Currently, when importing Tailwind Play CDN via externalResources in Sandpack it is impossible to customize Tailwind globals.css config because Sandpack bundler doesn't set the expected type="text/tailwindcss" attribute of the <style>/` tags. This prevents the Tailwind Play CDN (https://cdn.tailwindcss.com) from compiling CSS with custom Tailwind config.

What is the new behavior?

The Sandbox bundler now correctly identifies Tailwind CSS external resourses and sets the expected type="text/tailwindcss" attribute when the external resource file name includes 'tailwind.css'.

This enables:

• Using custom globals.tailwind.css via externalResources
• Using custom tailwind.config.js via externalResources

Steps to test

1. Create a new project with Sandpack's. Pass https://cdn.tailwindcss.com in Sandpack's externalResources
2. Pass custom tailwind.config.js file to Sandpack's externalResources
3. Pass globals.tailwind.css to Sandpack's externalResources with custom TailwindCSS styles (same as globals.css in standard Tailwind projects)
4. Verify that TailwindCSS is loaded properly in Sandpack
5. Verify that custom Tailwind styles work as expected

Checklist

• [x] Documentation
• [x] Testing
• [x] Ready to be merged
• [ ] Added myself to contributors table (N/A)

Additional Context

This feature is for developers who want to use Tailwind CSS in Sandpack with custom tailwind.config.js and custom globals.css. The Tailwind Play CDN requires type="text/tailwindcss" in <link>/<style> tags to support custom globals.css files, which this PR now supports.

Tailwind CDN docs: https://tailwindcss.com/docs/installation/play-cdn

[codesandbox[bot]]

Review or Edit in CodeSandbox

Open the branch in Web Editor • VS Code • Insiders
Open Preview