Never one to be left behind, I am continually looking for a way to speed up my theme development. Call it desire to be cutting edge, or near of missing out, whatever it is I love to play around with it. One thing that gets loads of attention is Tailwind CSS, so naturally this was on my list to play around with.

They call it “A utility-first CSS framework” but what it actually means is you can style all of your classes right in the HTML. There are pros and cons with this, but here’s how to get it working on your Ghost Blog.

Before You start

Fair warning this requires a bit of command line work, and if you’re not comfortable with this back away now! You will need:

• A computer running a desktop OS (macOS, Linux, or Windows)
• A supported version of Node.js (at the time of writing this is 12.x, 14.x or 16.x)
• Yarn and npm installed
• A folder to do all your work in

Install Ghost Locally

First, start with Ghost CIL. In the command line:

npm install ghost-cli@latest -g

Now CD into your empty directory and run:

ghost install local

This will get ghost up and running locally on your machine, most errors are communicated daily well, but for extras do ghost help.

If everything looks OK you’ll have a site at http://localhost:2368/ghost. For more information on what this means, check out the Ghost docs.

Your Theme

This next part is up to you, either install a theme you want to use Tailwind with, or start developing your own using the Ghost Starter. You will need to put your theme files into your Ghost local install folder, content/themes. If you want to clone a theme from GitHub, or your theme is stored on GitHub (you should be!) CD into this folder and use:

git clone git@github.com:<your-github-username/.git name-of-theme

Install Dependencies

Your theme more than likely will use Yarn, the Ghost Starter linked above is the best example. Use Arm to install everything needed by Tailwind. In your theme folder, use yarn add tailwindcss and then add in the necessarily files npx tailwindcss init.

Gitignor File

Unless you want more than 5,00 new files committing to your repo, you’ll need a robust gitignor file. Most themes have these set up already to no commit files such as DS_Store on Mac, so make sure you add in node_modules to your file.

Import CSS

In /assets/css/screen.css add in:

@tailwind base;
@tailwind components;
@tailwind utilities;

This imports the tailwind classes to your main CSS. This may partly replace some of your CSS to the Tailwind classes, so something such as typography may change on your theme.

Gulpfile.js

Add in the following to your gulpfile.js.

1 - Under // gulp plugins and utils put in const tailwind = require(‘tailwindcss’)

Under function css(done) there will be a section for postcss( add in tailwind(), so it will look something like the following.

function css(done) {
 pump([
 src(‘assets/css/screen.css’, {sourcemaps: true}),
 postcss([
 easyimport,
 autoprefixer(),
 cssnano(),
 tailwind(),
 ]),
 dest(‘assets/built/’, {sourcemaps: ‘.’}),
 livereload()
 ], handleError(done));
}

Restart All The Things

Now that everything is completed, restart Ghost with ghost restart to make sure everything is being cached correctly. You should be good to go now and can get cracking with adding in new styling. When doing this, you will need to CD into your theme folder and run yarn dev to build the correct CSS.

You can also try out some themes that already have Tailwind built into them such as Ghostwind or Origin but I am enjoying working new classes into my website. For more information on using Tailwind, see their documentation.