tailwindlabs · dwkns · Mar 16, 2025
diff --git a/src/app/(docs)/docs/installation/framework-guides/eleventy.tsx b/src/app/(docs)/docs/installation/framework-guides/eleventy.tsx
@@ -0,0 +1,163 @@
+import { css, html, js, Page, shell, Step, Tile } from "./utils";
+import Logo from "@/docs/img/guides/eleventy-white.react.svg";
+
+export let tile: Tile = {
+  title: "Eleventy",
+  description: "Eleventy is a simpler static site generator",
+  Logo,
+};
+
+export let page: Page = {
+  title: "Install Tailwind CSS with Eleventy",
+  description: "Setting up Tailwind CSS in an Eleventy project.",
+};
+
+export let steps: Step[] = [
+  {
+    title: "Create your project",
+    body: (
+      <p>
+        Start by creating a new Eleventy project if you don’t have one set up already. The most common approach is outlined in their{" "}
+        <a href="https://www.11ty.dev/docs/">getting started guide</a>.
+      </p>
+    ),
+    code: {
+      name: "Terminal",
+      lang: "shell",
+      code: shell`
+        mkdir my-project
+        cd my-project
+        npm init -y
+        npm pkg set type="module"
+        npm install @11ty/eleventy
+        mkdir src
+        touch src/index.html
+      `,
+    },
+  },
+  {
+    title: "Install Tailwind CSS",
+    body: (
+      <p>
+        Install <code>@tailwindcss/vite</code> and its peer dependencies via npm.
+      </p>
+    ),
+    code: {
+      name: "Terminal",
+      lang: "shell",
+      code: shell`
+        npm install tailwindcss @tailwindcss/vite
+      `,
+    },
+  },
+  {
+    title: "Install the Eleventy Vite Plugin",
+    body: (
+      <p>
+        Install <code>@11ty/eleventy-plugin-vite</code> and its peer dependencies via npm.
+      </p>
+    ),
+    code: {
+      name: "Terminal",
+      lang: "shell",
+      code: shell`
+        npm install @11ty/eleventy-plugin-vite
+      `,
+    },
+  },
+  {
+    title: "Import Tailwind CSS",
+    body: (
+      <p>
+        Create <code>src/styles.css</code> file and add an <code>@import</code> for Tailwind CSS.
+      </p>
+    ),
+    code: {
+      name: "src/styles.css",
+      lang: "css",
+      code: css`
+        @import "tailwindcss";
+      `,
+    },
+  },
+  {
+    title: "Configure Eleventy",
+    body: (
+      <p>
+        Create a <code>eleventy.config.js</code> file in your project root, and add the <code>@11ty/eleventy-plugin-vite</code>{" "} and <code>@11ty/eleventy-plugin-vite</code>{" "}
+        plugin. Include an <code>addPassthroughCopy</code> to copy your CSS to the output folder.
+      </p>
+    ),
+    code: {
+      name: "eleventy.config.js",
+      lang: "js",
+      code: js`
+        import EleventyVitePlugin from "@11ty/eleventy-plugin-vite";
+        import tailwindcss from '@tailwindcss/vite'
+
+        export default (eleventyConfig) => {
+          eleventyConfig.addPassthroughCopy("src/styles.css");
+
+          eleventyConfig.addPlugin(EleventyVitePlugin, { 
+            viteOptions: { 
+              plugins: [ tailwindcss() ] 
+            } 
+          });
+        };
+
+        export const config = {
+          dir: {
+            input: "src",
+          },
+        };
+      `,
+    },
+  },
+
+  {
+    title: "Start your build process",
+    body: (
+      <p>
+        Run your build process with <code>npx eleventy --serve</code>.
+      </p>
+    ),
+    code: {
+      name: "Terminal",
+      lang: "shell",
+      code: shell`
+        npx eleventy --serve
+      `,
+    },
+  },
+  {
+    title: "Start using Tailwind in your project",
+    body: (
+      <p>
+        Add your CSS file to the <code>{"<head>"}</code> and start using Tailwind’s utility classes to style your
+        content.
+      </p>
+    ),
+    code: {
+      name: "src/index.html",
+      lang: "html",
+      code: html`
+        <!doctype html>
+        <html>
+          <head>
+            <meta charset="UTF-8" />
+            <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+            <!-- [!code highlight:2] -->
+            <link href="./styles.css" type="text/css" rel="stylesheet" />
+          </head>
+          <body>
+            <!-- [!code highlight:4] -->
+            <h1 class="text-3xl font-bold underline  text-amber-500">
+              <!-- prettier-ignore -->
+              Hello world!
+            </h1>
+          </body>
+        </html>
+      `,
+    },
+  },
+];
diff --git a/src/app/(docs)/docs/installation/framework-guides/index.ts b/src/app/(docs)/docs/installation/framework-guides/index.ts
@@ -26,6 +26,7 @@ const guides: Guide[] = await create({
   astro: () => import("./astro"),
   qwik: () => import("./qwik"),
   rspack: () => import("./rspack"),
+  eleventy: () => import("./eleventy"),
 });
 
 async function create(list: Record<string, () => Promise<any>>): Promise<Guide[]> {

diff --git a/src/docs/img/guides/eleventy-white.react.svg b/src/docs/img/guides/eleventy-white.react.svg