Create a Ghost theme with Tailwind CSS

In a previous article, I talked about how to setup a local Ghost development environment on Windows using WSL. If you want to learn how to setup Ghost locally for theme development go back reading the previous article:

Install Ghost CMS on Windows with WSL Ubuntu

Install the Ghost CMS with node.js, nvm, npm, yarn, and gulp.js locally on your Windows machine in a WSL Ubuntu environment.

danidani

In this article, we will use the local environment to create a Ghost theme with Tailwind CSS. Tailwind is a CSS framework like Twitter Bootstrap that helps you building nice websites. Indeed, this website is built with Tailwind CSS. Let's start.

Get a starter theme

First, we need a theme to which we can add Tailwind CSS. We use the TryGhost/Starter theme for that. So let us switch to the theme directory of our locally installed environment:

cd ~/ghost/content/themes

Clone the Starter theme from its GitHub repository with the command:

git clone https://github.com/TryGhost/Starter.git yourthemename

Where yourthemename is the name of your theme you want to create. Git will in fact create the directory in your themes directory and clone all contents from the remote repository into that directory. Now that we have a theme, let us add Tailwind CSS to the theme.

Add Tailwind CSS

Change to the theme directory and add Tailwind CSS using yarn:

cd yourthemename
yarn add tailwindcss

To initialize Tailwind, we use npx. npx is installed with npm, which we already installed during the environment setup. What is the difference? npm is the node package manager that manages packages but is not responsible for executing any of those. npx is the node package executer that can execute packages managed by npm.

Initialize Tailwind CSS with npx:

npx tailwindcss init

This will create an initial tailwind.config.js file. It should tell you about the config file after the command finishes:

daniel@DESKTOP:~/ghost/content/themes/yourthemename$ npx tailwindcss init

Created Tailwind CSS config file: tailwind.config.js

The config file is used to add extension or customize Tailwind, e.g. adding new font sizes or new colors.

We still need to import the Tailwind CSS files. Hence, in the file assets/css/screen.css, add the following three lines to import the Tailwind style sheet files:

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

Usually, Ghost themes use gulp.js for their build chain. To add Tailwind to the gulp.js build chain, we need to adjust its config file as well. So, in the gulpfile.js below the comment // postcss plugins add:

const tailwind = require('tailwindcss');

Also, change the definition of the function css() starting at line 38 and include tailwind() in the middle of the processors variable:

function css(done) {
    var processors = [
        easyimport,
        colorFunction(),
        tailwind('./tailwind.config.js'),
        autoprefixer(),
        cssnano()
    ];
...

To rebuild the theme run the command yarn dev on your theme. Now you can start adding Tailwind's CSS classes to your theme. Happy theming!