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

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
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

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

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

Read next

farouk_ profile image

Task manger app

Farouk -

adeleyeayodeji profile image

How to Stop Spam Comments on WordPress WITHOUT Any Plugin

Adeleye Ayodeji -

kachkolasa profile image

Laravel Application Security

Kachkol Asa -

yogini16 profile image

Any() vs Count, Which one to choose??

yogini16 -