DEV Community

Cover image for Adding Tailwind to Eleventy
Chris Bongers
Chris Bongers

Posted on • Originally published at daily-dev-tips.com

Adding Tailwind to Eleventy

Already on part-3 of our journey to re-create my lifestyle blog in Eleventy.

Part 1: Rebuilding my lifestyle blog in eleventy
Part 2: Adding posts to my lifestyle blog in Eleventy

And I've mentioned this from part-1, thinking Tailwind might be the better option. I was right to let's just include Tailwind and got from there.

So in this article, we will learn how to add Tailwind to an Eleventy project.

The end result will be that we can use Tailwind in Eleventy to make cards like this:

Tailwind in Eleventy

Installing the dependencies

I've already made use of an SCSS converted, and some other stuff, so let's start by removing those dependencies and re-adding the ones we will need for Tailwind.

In my case, I removed all my dependencies from the package.json file and ran the following command.

npm install --save-dev concurrently @11ty/eleventy autoprefixer postcss-cli tailwindcss
Enter fullscreen mode Exit fullscreen mode

This will install all the needed elements as our devDependencies.

Then let's add a new script to process our CSS file.

"scripts": {
    "tailwind:process": "npx postcss src/scss/global.css --o src/_includes/assets/css/global.css --watch"
}
Enter fullscreen mode Exit fullscreen mode

This is a nom command that will run the postcss to turn our global.css file into the global.css file inside the assets directory.

We can then change our start command to run this script.

"scripts": {
    "tailwind:process": "npx postcss src/scss/global.css --o src/_includes/assets/css/global.css --watch",
    "start": "concurrently \"npm run tailwind:process\" \"npm run serve\"",
    "serve": "npx eleventy --serve"
},
Enter fullscreen mode Exit fullscreen mode

Changing our CSS file

Now that we no longer use the custom SCSS file we did in part-2 let's change the src/scss/global.css file to look like this:

@tailwind base;
@tailwind components;
@tailwind utilities;
Enter fullscreen mode Exit fullscreen mode

That tells the CSS file to include all the tailwind classes.

Now we can also go ahead and run the following command to generate a basic tailwind config:

npx tailwindcss init
Enter fullscreen mode Exit fullscreen mode

This command will generate the tailwind.config.js file, which we will leave as is for now.

Also create a postcss.config.js file in the root director and add the following:

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {}
  }
};
Enter fullscreen mode Exit fullscreen mode

That tells postcss to render tailwind elements as a plugin.

The last thing I changed is that I added the direct file in the src/_includes/layouts/base.njk file as such:

<link rel="stylesheet" href="/global.css" />
Enter fullscreen mode Exit fullscreen mode

You might think, but how does this global file get there?

We are going to add it, by changing the .eleventy.js file.

config.addPassthroughCopy({
  'src/_includes/assets/css/global.css': './global.css'
});
Enter fullscreen mode Exit fullscreen mode

This tells eleventy to move the global.css file to the main dist root so we can use it.

Testing out Tailwind in Eleventy

Now to test it out let's add a basic div with some classes in our index.njk file.

<div class="max-w-sm p-3 m-4 rounded-lg shadow-lg">Testing tailwind</div>
Enter fullscreen mode Exit fullscreen mode

This should render a basic block with this styling:

Tailwind in Eleventy

That's it, we just added Tailwind to our Eleventy project.
Tomorrow we might have a look at how we can redo the menu with Tailwind classes.

If you are following along, you can find today's code on GitHub.

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter

Top comments (0)