How To Set Up Tailwind 4 With Eleventy 3

How To Set Up Tailwind 4 With Eleventy 3 (11ty) in Less Than 2 Minutes With Minimal Configuration Needed.

Published by Carlo van Wyk on March 14, 2025 in Eleventy

Tailwind 4’s zero-configuration approach, combined with Eleventy 3’s minimal setup, makes integrating Tailwind 4 with Eleventy quick.

Most online guides focus on setting up Tailwind 3 with older Eleventy (11ty) versions, and this requires a lot of code and moving pieces to set up whereas Tailwind 4 with Eleventy 3 (11ty) is plug-and-play by comparison.

I struggled to find a proper guide for setting up Tailwind 4 and Eleventy 3 (11ty), so I thought I'll write this post for my future self and anyone interested in how to set this up correctly and with minimal effort.

Step 1: Initialize a new package.json with the npm init command

bash

npm init -y

Step 2: Set the type in package.json to module

bash

npm pkg set type="module"

Step 3: Install the eleventy package

bash

npm i -D @11ty/eleventy

Step 4: Install Tailwind 4, PostCSS, and CSS Nano

bash

npm i -D tailwindcss @tailwindcss/postcss postcss cssnano

Step 5: Add scripts for building and serving in package.json

package.json

"scripts": {
    "build": "npx eleventy",
    "serve": "npx eleventy --serve"
}

Step 6: Create the index.css file which imports Tailwind

src/assets/styles/index.css

@import 'tailwindcss';

Step 7: Create the index.njk template

src/index.njk

---
title: Star Wars Characters
---

<!DOCTYPE html>
<html lang="en" class="bg-white text-black">

  <head>
    <title>{{ title }}</title>
    <link rel="stylesheet" href="/assets/styles/index.css">
  </head>

  <body>
    <div class="container mx-auto flex flex-col justify-center items-center">
      <h1 class="text-3xl font-bold mt-12 mb-6">Star Wars Characters</h1>
      <ul>
        <li class="text-lg">Luke Skywalker</li>
        <li class="text-lg">C-3PO</li>
        <li class="text-lg">R2-D2</li>
        <li class="text-lg">Darth Vader</li>
        <li class="text-lg">Leia Organa</li>
        <li class="text-lg">Owen Lars</li>
        <li class="text-lg">Beru Whitesun lars</li>
        <li class="text-lg">R5-D4</li>
        <li class="text-lg">Biggs Darklighter</li>
        <li class="text-lg">Obi-Wan Kenobi</li>
      </ul>
    </div>
  </body>

</html>

Step 8: Create the eleventy configuration file

Finally, we create the Eleventy configuration file. Here, we define an eleventy.before hook, which executes before Eleventy generates the HTML files. Within this hook, we run a processor pipeline that compiles Tailwind CSS and then minifies it.

eleventy.config.js

import fs from 'fs';
import path from 'path';

import cssnano from 'cssnano';
import postcss from 'postcss';
import tailwindcss from '@tailwindcss/postcss';

export default function (eleventyConfig) {
  //compile tailwind before eleventy processes the files
  eleventyConfig.on('eleventy.before', async () => {
    const tailwindInputPath = path.resolve('./src/assets/styles/index.css');

    const tailwindOutputPath = './dist/assets/styles/index.css';

    const cssContent = fs.readFileSync(tailwindInputPath, 'utf8');

    const outputDir = path.dirname(tailwindOutputPath);
    if (!fs.existsSync(outputDir)) {
      fs.mkdirSync(outputDir, { recursive: true });
    }

    const result = await processor.process(cssContent, {
      from: tailwindInputPath,
      to: tailwindOutputPath,
    });

    fs.writeFileSync(tailwindOutputPath, result.css);
  });

  const processor = postcss([
    //compile tailwind
    tailwindcss(),

    //minify tailwind css
    cssnano({
      preset: 'default',
    }),
  ]);

  return {
    dir: { input: 'src', output: 'dist' },
  };
}