Files

package.json

{
  "name": "project-name",
  "version": "1.0.0",
  "type": "module",
  "scripts": {
    "dev": "eleventy --serve --watch",
    "build": "NODE_ENV=production eleventy",
    "clean": "rm -rf dist"
  },
  "devDependencies": {
    "@11ty/eleventy": "^3.1.0",
    "@hotwired/stimulus": "^3.2.0",
    "@tailwindcss/postcss": "^4.1.0",
    "cssnano": "^7.0.0",
    "postcss": "^8.5.0",
    "tailwindcss": "^4.1.0"
  }
}

Notes:

• type: "module" is required for ESM
• Only three scripts: dev, build, clean
• All CSS processing happens through Eleventy hooks

eleventy.config.js

import fs from "fs";
import path from "path";
import postcss from "postcss";
import tailwindcss from "@tailwindcss/postcss";
import cssnano from "cssnano";

export default function (eleventyConfig) {
  // Passthrough copies
  eleventyConfig.addPassthroughCopy({ "src/assets/js": "assets/js" });
  eleventyConfig.addPassthroughCopy({ "src/assets/images": "assets/images" });

  // CSS processing via PostCSS
  const cssProcessor = postcss([
    tailwindcss(),
    ...(process.env.NODE_ENV === "production"
      ? [cssnano({ preset: "default" })]
      : []),
  ]);

  eleventyConfig.on("eleventy.before", async () => {
    // Process CSS here
  });

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

main.css

@import "tailwindcss";

@source "../../../src/**/*.njk";

@theme {
  --font-sans: "Inter", system-ui, sans-serif;
}

@layer base {
  html { scroll-behavior: smooth; }
}

@layer components {
  /* Component classes here */
}

application.js

import { Application } from "@hotwired/stimulus";

const application = Application.start();

import ToggleController from "./controllers/toggle_controller.js";
application.register("toggle", ToggleController);

export { application };

site.json

{
  "title": "Site Title",
  "description": "Site description for SEO",
  "author": "Author Name",
  "url": "https://example.com"
}