A Guide for Developing Ghost Themes with TailwindCSS

Share & showcase
1

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!

17 Likes
2

Very cool! Thanks for creating this. :art:

2 Likes
3

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

3 Likes
4

@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:

5

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
6

Thanks @RyanF!

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

2 Likes
7

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

1 Like
8

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

3 Likes
9

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.

3 Likes
12

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

1 Like
13

Just jumping in to say thanks! I followed the guide this morning and it worked perfectly. Appreciate you putting it together!

1 Like
14

i am having issues… did something break in this? i’ve struggled since 7am over this now, eek