ameerthehacker / blazepack

⚡ Blazing fast dev server powered by sandpack

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Tailwind CSS support

pjm4 opened this issue · comments

commented

Was looking at using Tailwind CSS with React and blazepack, however, it doesn't work out-of-the-box. To get this to work it appears the easiest way is to include the Tailwind CSS directly, however, there are some downsides to using a CDN.

<!-- Needs to be placed in the body of your index.html -->
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">

Clone for instance:

blazepack clone https://codesandbox.io/s/91rww423xw

BTW, clone doesn't work. I needed to download the latest code and make a local version first.
I got the following error with version v0.0.16 

Unable to start blazepack dev server: ENOENT: no such file or directory, lstat 'clone'

Update index.html with tailwind.min.css and it displays correctly.

I had a play with using the PostCSS plugin, but couldn't get it to work with my tailwind.config.js as I needed to extend the Tailwind theme.

It looks like codesandbox are doing some other smarts as I can see they include the tailwind.css file automatically.

Hey @philipjmurphy 👋

I can confirm that clone wont work as of now since the feature is not yet published to npm package. Will update you once it is published.

@philipjmurphy currently we only support client templates of codesandbox as we run all our bundling process in browser, codesandbox runs the tailwind in container template.

commented

@philipjmurphy currently we only support client templates of codesandbox as we run all our bundling process in browser, codesandbox runs the tailwind in container template.

Ah that makes sense. Just reading about sandbox and containers now. I wasn't aware of that part of their stack. Regardless, blazepack is awesome which I have working seamlessly with a number of projects.

Thanks @philipjmurphy we have more features coming to blazepack soon, hopefully you will enjoy them too