DEV Community

Cover image for Let's Learn 11ty Part 7: Adding Tailwind
James 'Dante' Midzi
James 'Dante' Midzi

Posted on Edited on

Let's Learn 11ty Part 7: Adding Tailwind

#ssg #eleventy #tutorial #webdev

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
Enter fullscreen mode Exit fullscreen mode

We will also need the Eleventy vite plugin:

pnpm i @11ty/eleventy-plugin-vite"
Enter fullscreen mode Exit fullscreen mode

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
}
Enter fullscreen mode Exit fullscreen mode

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";
Enter fullscreen mode Exit fullscreen mode

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 }}" />
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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"
  },
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode 
<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>
Enter fullscreen mode Exit fullscreen mode

Our site should look like this:

home with ttailwind

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>`,
);
Enter fullscreen mode Exit fullscreen mode

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" %}
Enter fullscreen mode Exit fullscreen mode

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:

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:

Top comments (3)

Collapse
 
mrfarai profile image
Farai Madzima •

Thanks, this useful series helped me get my project going quickly.

When I used the below to write the compiled CSS file to my output folder, I kept getting server errors about the files being corrupt. They showed up as 304s and 404s. I could't figure out why. May be a permissions issue 🤷🏾‍♀️.

    "dev:css": "tailwindcss -i src/assets/css/tailwind.css -o _site/assets/css/steez.css --watch --postcss",
Enter fullscreen mode Exit fullscreen mode

As a solution / workaround 👇🏾 I wrote the complied CSS to my input folder and used the 11ty passthrough to get it into my output folder and that worked fine.

    "dev:css": "tailwindcss -i src/assets/css/tailwind.css -o src/assets/css/steez.css --watch --postcss",
Enter fullscreen mode Exit fullscreen mode 
  eleventyConfig.addPassthroughCopy("src/assets/css/steez.css");
Enter fullscreen mode Exit fullscreen mode

In case this helps somebody.

Collapse
 
psypher1 profile image
James 'Dante' Midzi •

Of course... I'm glad it's been helpful.

Hmmm, that's odd... But as long as you got it to work

Collapse
 
dfl profile image
David Löwenfels •

in package.json I had to add quotes around dev:* and build:* to get it working.
also, run-s is shorthand for npm-run-all -s.

"scripts": {
    "start": "npm-run-all -p 'dev:*'",
    "build": "npm-run-all -s 'build:*'",
...
Enter fullscreen mode Exit fullscreen mode