How to setup TailwindCSS for 11ty Eleventy static site generator

Published On

Tailwind is a utility based CSS framework and is very popular. Eleventy is a static site generator which supports various templating engines. In this post we are going to add tailwind css for styling the eleventy site. And we will make sure that hot reloading is working for optimum developer experience.

Please refer to the repo if you’re facing any issues.

Step 1: Eleventy Setup

Skip this step if you already have eleventy site setup.

Initialise an empty nodejs project

terminal 
npm init -y

Then install eleventy

terminal 
npm install @11ty/eleventy --save-dev

Now make a src directory and add a index.njk file. (You can use any templating language)

I have just added hello world to index.njk file for now.

src/index.njk 
hello world

Now let’s create a config file. In the root directory create a .eleventy.js file and add the basic config which defines the input and output folder and other configs too.

.eleventy.js 
module.exports = function (config) {
  return {
    passthroughFileCopy: true,
    dir: {
      input: "src",
      includes: "_includes",
      data: "_data",
      output: "_site",
    },
  };
};

Now run

terminal 
npx eleventy --serve

Open http://localhost:8080 and you will see hello world

Step 2: Setup TailwindCSS

Lets install and configure tailwindcss for eleventy.

Installation

Install the required libraries

terminal 
npm i tailwindcss -D

Configuration

Firstly create a tailwind.config.js file and write the config.

tailwind.config.js 
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,md,njk,ejs,pug}"],
  theme: {
    extend: {},
  },
  plugins: [],
};

Now create a _include folder and inside create a css folder and inside css folder create a new global.css file.

src/_includes/css/global.css 
@tailwind base;
@tailwind components;
@tailwind utilities;

Let’s create a layout so that it can be shared amongst the other pages in future.

Create a main-layout.njk file inside the layouts folder in src/_includes folder. We will also include the global.css file here.

src/_includes/layout/main-layout.njk 
---
title: Blog
---
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ title }}</title>
    <meta name="description" value="{{ description }}">
    <link rel="stylesheet" href="./global.css"/>

  </head>
  <body>
    {{ content | safe }}
  </body>
</html>

Now let’s modify the config file

.eleventy.js 
module.exports = function (eleventyConfig) {
  eleventyConfig.addPassthroughCopy({
    "global.out.css": "global.css",
  });
  return {
    passthroughFileCopy: true,
    dir: {
      input: "src",
      includes: "_includes",
      data: "_data",
      output: "_site",
    },
  };
};

Now we will have to run tailwind for generating the css. Update the package.json

package.json 
{
  "name": "eleventy-twcss",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "css": "tailwindcss -i ./src/_includes/css/global.css -o global.out.css --watch",
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@11ty/eleventy": "^2.0.1",
    "tailwindcss": "^3.3.5"
  }
}

Now in one terminal run

terminal 
npx @11ty/eleventy --serve

And in second terminal run

terminal 
npm run css

Also update the index.njk file to add layout and tailwind classes.

src/index.njk 
---
layout: layout/main-layout.njk
title: Hello World
---

<h1 class="text-3xl font-bold text-center mt-5 mb-2">Hello World!!</h1>

<p class="text-xl text-center">Exploring Eleventy. Eleventy is a static site generator. </p>

<div class="flex items-center justify-center ">
<button class="rounded-md px-8 py-3 my-5 bg-amber-600 text-white">Let's go</button>
</div>

Now refresh your browser and you will see tailwind styling being applied. Also hot reloading works too.

Deploy

Now to deploy just add a build script. In this case I am using the & operator to run the script.

package.json 
{
  "name": "eleventy-twcss",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "css": "tailwindcss -i ./src/_includes/css/global.css -o global.out.css --watch",
    "build": "npx @11ty/eleventy & tailwindcss -i ./src/_includes/css/global.css -o ./_site/global.css --minify"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@11ty/eleventy": "^2.0.1",
    "tailwindcss": "^3.3.5"
  }
}

If this is not working or causing any error then use the concurrently package.

terminal 
npm i concurrently -D

Then add a build script. I am naming it prod

package.json 
{
  "name": "eleventy-twcss",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "css": "tailwindcss -i ./src/_includes/css/global.css -o global.out.css --watch",
    "build": "npx @11ty/eleventy & tailwindcss -i ./src/_includes/css/global.css -o ./_site/global.css --minify",
    "prod": "concurrently \"npx @11ty/eleventy\" \"tailwindcss -i ./src/_includes/css/global.css -o ./_site/global.css --minify\"",
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@11ty/eleventy": "^2.0.1",
    "concurrently": "^8.2.2",
    "tailwindcss": "^3.3.5"
  }
}

Now add the npm run build or npm run prod command to your deployment service or just run it on you device and upload the _site folder

Conclusion

So in this post we added tailwindcss for styling in eleventy site.

Here is the repo. Please refer it for the latest code.

If you have any doubt, you can contact me via the EverythingCS discord server