Using Tailwind with Eleventy

If you want to use TailwindCSS to style your Eleventy site but don't know the simplest way to do so, then you've come to the right place. In this quick article I am going to cover the fastest way to get up-and-running.

This post is going to assume you already have an Eleventy site set up - if not, follow their Getting Started Guide.

The first thing to do is install the dependencies we will need:

npm install -D tailwindcss concurrently

Next, let's set up a Tailwind config.

npx tailwindcss init

Now it is time to modify the tailwind.config.js that was generated for us. This may look slightly different depending on the template language you're using, here is what mine looks like as a Pug user:

module.exports = {
  content: ["**/*.pug"],
  theme: {},
  plugins: [],
}

The next step is to create a .css file that will include the Tailwind directives. I chose to put this at /styles/global.css:

@tailwind base;
@tailwind components;
@tailwind utilities;

Next, lets set up the package.json script(s) that will allow us to build our CSS:

"dev": "concurrently \"npm run dev:css\" \"npm run dev:11ty\"",
"dev:11ty": "npx @11ty/eleventy --serve",
"dev:css": "npx tailwindcss -i ./styles/global.css -o ./vendor/global.css --watch"

Now when you run npm run dev you should see a vendor folder generated containing a global.css file. This is the file that we're going to include in our Eleventy templates. I would recommend adding the vendor folder to your .gitignore file!

Before that, we need to make one change to the Eleventy config to make sure our vendor folder is copied to the _site folder when we build our project.

Create a .eleventy.js file and ensure it includes the following:

module.exports = (eleventyConfig) => {
  eleventyConfig.addPassthroughCopy('vendor')

  // Rebuild the site whenever there is a change in the `vendor` directory.
  eleventyConfig.addWatchTarget('vendor')

  /**
   * We need this option so 11ty allows us to watch the .gitignore'd `vendor`
   * directory.
   */
  eleventyConfig.setUseGitIgnore(false)
}

The only thing left to do at this point is to include the built vendor/global.css file in one of your Eleventy template files (preferably a layout).

<link rel="stylesheet" href="/vendor/global.css">

Now, start styling with Tailwind!