Using Tailwind CSS with Ghost

You might have a few reasons for some additional styling on your Ghost site. For me, I added a contact form and I want to include a custom homepage without doing a custom build.

If you look at the tailwindcss documentation  they do have a copy hosted on a CDN, but they say "Only for development", "Not recommended for production". Basically, swim at your own risk. Its probably totally fine, but I'd rather just do things "right" and be able to rely on the solution. I was starting to wonder if there was a solution I would be satisfied with. Before I realized what I'm about to share I even wrote my own inline css. Yuck!

The Key Componets

Code Injection

Every Ghost page has the ability to add code injection. Check out the documentation to find out how. https://ghost.org/changelog/post-code-injection/

Tailwind Play

Create your HTML in Tailwind Play and then use the generated CSS tab to grab all the CSS!

If you would like a step-by-step guide on how to implement this check out my in depth post!

Building a Tailwind CSS Form For Ghost

Here is a step-by-step guide for creating an HTML form with Tailwind CSS and using it on your Ghost site! These principles can also be applied to other custom HTML that you would like to style using Tailwind CSS. Use Tailwind Play by Tailwind CSS First we use Tailwind Play

Jane Street DigitalJase Languasco