Let's Learn 11ty Part 7: Adding Tailwind

UPDATE: September 2026

This series has been updated to more newer version. It was merely authored years ago.

Before we begin

This article was supposed to go up yesterday, as per my workflow. I however had to deal with technical issues - namely my ISP.

I spent most of the day on calls trying to get reconnected...

Not fun times I tell you...

Eleventy & Tailwind

So, it that's time... The time I've been putting off. But since we added plugins to our site last time, I think we can now add tailwind to it.

DESCLAIMER

You do not have to add Tailwind to your site. If you're alright with the CSS we have currently, you can stick to that.

Install & Setup Tailwind

Let's not waste any time and get straight into it.

Open your terminal and run the following command (we will be using vite and version 4 of tailwind):

pnpm install tailwindcss @tailwindcss/vite

We will also need the Eleventy vite plugin:

pnpm i @11ty/eleventy-plugin-vite"

Then in our config file:

import EleventyVitePlugin from "@11ty/eleventy-plugin-vite";

export default function (eleventyConfig) {
  // vite
  eleventyConfig.addPlugin(EleventyVitePlugin, {
    viteOptions: {
      plugins: [tailwindcss()],
    },
  });

  // rest of config
}

We'll then create a CSS file with the Tailwind directives. We will put it in the same folder that has our current stylesheet

/* src/assets/css/tailwind.css*/
@import "tailwindcss";

Lastly, include our CSS file in our base.njk. Just below where we had our stylesheet before in the head tag, add this

<link rel="stylesheet" href="{{ '/assets/css/tailwind.css' | url }}" />

Don't forget to comment out the other link

Modifying Scripts to Run Tailwind and Eleventy

NOTE

A lot of this section is no longer neccessary owing to the chenges in tailwind. I have left it there for if someone prefers that wasy

if you recall when we setup our project, we only added ways to run our Eleventy.

For our new setup to work both Tailwind and Eleventy need to be running concurrently. Luckily for us there is a package that makes that easier - npm run all - let's install it

npm install npm-run-all --save-dev

Then we have to modify our scripts in package.json to ensure that event when we deploy, our new styles are present.

  "scripts": {
    "start": "npm-run-all -p dev:*",
    "build": "run-s build:*",
    "dev:11ty": "eleventy --serve",
    "dev:css": "tailwindcss -i src/assets/css/tailwind.css -o _site/assets/css/tailwind.css --watch --postcss",
    "build:11ty": "eleventy",
    "build:css": "tailwindcss -i src/assets/css/tailwind.css -o _site/assets/css/tailwind.css --postcss"
  },

We have created a few more scripts:

• To run Eleventy in development - dev:11ty
• To build Eleventy - build:11ty
• To run Tailwind in development and watch for changes - dev:css
• To build Tailwind - build:css

We then modify our start and build script with the package we installed so our project runs as we intend.

END NOTE

Testing If It Works

After adding a few classed to base.njk and _navigation.njk

<main class="min-h-screeen w-full max-w-5xl mx-auto px-4 py-12">
  {{ content | safe }}
</main>

<header class="bg-slate-900 text-slate-100 py-5 px-3">
  <nav class="max-w-5xl mx-auto flex items-center gap-5 justify-center">
    {%- for item in collections.page -%}
    <a href="{{ item.url }}" class="hover:text-blue-600"
      >{{ item.data.title }}</a
    >
    {%- endfor -%}
  </nav>
</header>

Our site should look like this:

It seems counter intuitive what we've done to undo all the styling we had, I know. But for me in the long run, it'll be easier to maintain tailwind styles over raw CSS.

Getting the most out of our tailwind setup

Owing to the way that Tailwind works, I would suggest changing any source files to .njkso we can easily style them.

Also, if you recall the shortcode we made for our heading and subtitle:

eleventyConfig.addShortcode(
  "headers",
  (title, subtitle, titleClass = "", subtitleClass = "") =>
    `<h1 class="${titleClass}">${title}</h1>
     <p class="${subtitleClass}">${subtitle}</p>`,
);

It is slightly different to allow adding of classes. It would be used like this:

{% headers "Home", "Learning SSG" , "text-4xl font-bold mt-3", "text-slate-700
mt-1" %}

So we don't have to modify our eleventy config, I would move it to a shortcode folder in _includes

An Alternative

While I was figuring out how to get the styles to apply on built assets I came across a plugin made by a member of the Eleventy community. It's called eleventy-plugin-tailwindcss-4, made by dwkns

It is less steps, if you want to go that way.

Conclusion

There wasn't a lot that we did today. Adding tailwind and modifying how our site works. It is par course as it is the end of the week.

Join me next week where I have something special lined up...

As always:

• The live site: https://learneleventy.netlify.app
• The working repo: Part 7: Add Tailwind
• The docs: https://www.11ty.dev/docs/
• The discord: https://www.11ty.dev/blog/discord/

Thank you for reading, let's connect!

Thank you for visiting this little corner of mine. My email and DMs are always open; if you want to chat or collaborate on something, shoot me a email

Where you can get hold of me:

• Twitter
• Discord
• LinkedIn