Guide on creating Ghost themes with Tailwind

[jkirsteins]

Hi all 👋

I've put together an overview on how to create a Ghost theme using Tailwind: How to create a Ghost theme with Tailwind CSS.

There is also an accompanying GitHub repo with a sample starter you can fork: http://github.com/usepine/theme-tailwindstarter

It's not rocket science, but hopefully can save some time for someone.

[jpollone]

I just spent a few hours trying to understand what Ghost did and ripped out the CSS references and replacing with what the great folks at Tailwind have done. By the way, the DuckDucks and Googles didn't return this discussion topic. (Honestly I may have missed it and will blame the wine, but I should have searched the official forum myself.) Nonetheless, thanks for sharing.

I basically went with Ghost 4.0 for the pre-built membership support and blogability, but that's so my son can easily manipulate things. It's a great kickstart, however, Tailwind CSS is really brilliant and should be part of Ghost as a default!

One thing I'm doing is creating a home page and building it with content from several Ghost pages so that each section has a header and text. There might be better ways to do it but that's what I inferred so far.

{{#get "pages" slug="section-contact-me" as |page|}}
{{#page}}
<h2 class="text-3xl font-extrabold tracking-tight text-gray-900 sm:text-4xl">
<span class="block">{{title}}</span>
</h2>
{{{content}}}
{{/page}}
{{/get}}

The Ghost pages I reference in each section of the home page use this format:

Slug: section-contact-me
Title: Your title here
HTML block: Lorem ipsum dolor sit amit text

I also made separate sections for header and footer, but I hard-coded the links for the navigation. I didn't spend much time in it but I'll look at what you did for {{navigation}}. It's less important since nav won't change much. I wanted to make sure he can change all the titles and content to his heart's desire.

Thanks!