DEV Community

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

Posted on

Let's Learn 11ty Part 7: Adding Tailwind

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.

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:

npm install -D tailwindcss postcss autoprefixer
Enter fullscreen mode Exit fullscreen mode

Then initialise the tailwind config file:

npx tailwindcss init
Enter fullscreen mode Exit fullscreen mode

In the root of the project create a postcss.config.js with this:

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
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*/
@tailwind base;
@tailwind components;
@tailwind utilities;
Enter fullscreen mode Exit fullscreen mode

Then edit the content array in our tailwind config to watch for our files:

/* tailwind.config.js*/

 content: ["./src/**/*.{njk,md}", "./src/**/*.svg",]
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

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.

Testing If It Works

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



Our site should look like this:

Image description

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:


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


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. Let's connect on Twitter, Polywork and LinkedIn

Top comments (0)