The goal of this how to guide is to show you how to quickly include Tailwind CSS in your existing Jekyll site and build using the Tailwind CLI. All the code used in this demo can be found in our repository: jekyll-tailwindcss.

1. Prerequisites

• Existing Jekyll site
• Node.js installed

2. Install Tailwind CLI

Navigate to the root directory of your existing Jekyll site and running the below commands. These commands will install ‘tailwindcss’ as node module in your project as a dependency and initialise TailwindCSS.

npm install -D tailwindcss
npx tailwindcss init

After running the above commands you will notice a few differences with your directory, such as the inclusion of a node_modules directory and package.json files. The key file we will be focusing on however is the tailwind.config.js.

The contents of your tailwind.config.js file should be similar to the below:

/** @type {import('tailwindcss').Config} */
module.exports = {
    content: [],
    theme: {
        extend: {},
    },
    plugins: [],
}

At this point we now have TailwindCSS installed and initialised, however there is a little bit of configuring we will need to do in order to start using it in our mark up. We need to make Tailwind aware of the paths it needs to keep track of for the various classes we will be adding to our markup. For the purpose of this guide we need to keep track of files in _includes, _layouts and markdown files in our root directory.

/** @type {import('tailwindcss').Config} */
module.exports = {
    content: [ 
        '_includes/**/*.html',
        '_layouts/**/*.html',
        '*.markdown'
    ],
    theme: {
        extend: {},
    },
    plugins: [],
}

With the content array updated, Tailwind will be able to apply its styling to any .html file found in _includes, _layouts and similarly any .markdown file found on the root level of our project.

Lets now add the Tailwind directives to our main css file:

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

3. Adding Tailwind to our markup

The content I have in place for my basic site isn’t looking so great at the moment, there is no styling in place. Lets add a bit of styling to clean this up a bit.

In order to starting seeing the Tailwind classes take effect on your website you will need to run the below command.

npx tailwindcss -i ./assets/css/style.css -o ./assets/dist-style.css --watch

Note: if your CSS file is in another location you will need to update this command to reference it.

Lets start by adding a bit of styling to the header of demo site:

<header class="bg-slate-100">
    <div class="max-w-screen-lg mx-auto h-24 flex items-center">
        <a href="/">
            <h1 class="text-black text-3xl font-bold">Jekyll - TailwindCSS Demo</h1>
        </a>
    </div>
</header>

Once I refresh my browser I can immediately see the updates taking place.

We won’t cover Tailwind in detail in this post, if you are looking for more information on how to use Tailwind check out there official docs. After applying all the classes I need to clean up this page I end up with the below as my finished product:

If you would like to see all the code behind doing this you can clone the repository for this project: jekyll-tailwindcss.

All best on your journey with Tailwind & Jekyll!