Vapour: A starter theme for Vite + TailwindCSS

Hi Folks. I recently built a Ghost theme using Vite. There were some significant obstacles to getting it working correctly, but I managed to figure out what I think is a good solution. I pulled that solution out into a standalone theme as a starting point for other folks trying to do the same. It also has TailwindCSS built in (but optional), and Prism integration. There’s not much in the way of visual design; this is really just about the Vite + Tailwind integration.

I go into the rational and details of the solution here, and the code is here.

I hope some folks find this helpful! Let me know what you think.

2 Likes

hi @christopher-b thanks for doing this. It looks promising.

I tried it on local, but found some issue when install the theme. It looks like we’re missing some files.

Hope it’s helpful.

Great job btw.

I haven’t tried it, but it looks like the theme creates those files in the build step. Did you run yarn build and yarn zip before loading the theme?

One option for detecting development mode (imperfect but avoids using a custom setting, since those are limited) would be to check if the site url contains localhost or one of the common ip ranges. :slight_smile:

Thanks for giving it a look and letting me know about this. @Cathy_Sarisky is correct, runningyarn build will generate those files. You can also run yarn zip to create a zip file you can upload to Ghost. I’ve added a bit to the Readme to call this out.

Great idea, I’ve added this as a note to the Readme, as I’m not sure I’ll have a chance to implement this any time soon. Thanks for taking a look.