Let's Learn 11ty Part 7: Adding Tailwind

Let's Learn 11ty Part 7: Adding Tailwind

Read 9020 times

#ssg

#eleventy

#tutorial

#webdev

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:

npm install -D tailwindcss postcss autoprefixer

Then initialise the tailwind config file:

npx tailwindcss init

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

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

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;

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

/* tailwind.config.js*/

 content: ["./src/**/*.{njk,md}", "./src/**/*.svg",]

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

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:

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

base

navigation

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:

shortcode

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

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

Back to articles