A Guide for Developing Ghost Themes with TailwindCSS

I recently switched to using TailwindCSS for all my projects in Ghost and it has been an excellent experience.

Although the initial setup required a bit of effort to resolve some minor issues, it was well worth it. I’ve created a guide that covers the basics of getting started and also includes tips on how to avoid the additional research that I had to do to make everything run smoothly. Check it out below:

Hope this helps someone out there!


Very cool! Thanks for creating this. :art:

1 Like

This guide is amazing! Thank you for doing it I would never have got it up and running without this.

Once gotcha was that the screen.css uses imports, which isn’t compatible with the @tailwind directive.

Instead, you need to use the bundled @import that comes with the latest Tailwind.

The section in your article: The Complete Guide for Developing Ghost Themes with TailwindCSS | LayeredCraft
Tailwind docs: Using with Preprocessors - Tailwind CSS

Hope this saves someone a few mins of head-scratching


@ericalli Thanks for sharing, but… since Ghost 5 this guide is not working anymore. Can you please look into it and perhaps share an updated guide…? :pray:

This is related to the update to the Starter theme, most likely. Check out this thread for a way to use Tailwind: How to add Tailwindcss to the Starter theme · Issue #61 · TryGhost/Starter · GitHub

1 Like

Thanks @RyanF!

I just updated the guide with your solution to getting Tailwind working with the updated Starter theme.


That’s great. Thanks! I haven’t used the @apply directive that much. How does it work for styling cards?

1 Like

I just completed my first theme using tailwind and it was just seemless


It’s actually really simple and I find it particularly useful for times when you can’t access the HTML for a specific element to add Tailwind classes too. For example:

.kg-card.kg-button-card a.kg-btn {
  @apply rounded-full bg-sky-500;

You can also use any custom Tailwind configs you have defined for custom colors, fonts, etc.


what do you think about recreating ghost’s default casper theme in tailwind?

1 Like