Tailwind 11ty plugin

11ty.ts

interface BeforeEventConfig {
  directories: {
    input: string;
    output: string;
    data: string;
    includes: string;
    inputFile?: string;
    inputGlob?: string;
    layouts?: string;
  };
  outputMode: "fs" | "json" | "ndjson";
  runMode: "build" | "watch" | "serve";
}

interface AfterEventConfig extends BeforeEventConfig {
  results: {
    inputPath: string;
    outputPath: string;
    url: string;
    content: string;
  }[];

export interface EleventyConfig {
  on(
    event: "eleventy.after",
    handler: (config: AfterEventConfig) => void | Promise<void>
  ): void;
  on(
    event: "eleventy.before",
    handler: (config: BeforeEventConfig) => void | Promise<void>
  ): void;
}

css.ts

import { join } from "node:path";
import { readFile, writeFile } from "node:fs/promises";
import autoprefixer from "autoprefixer";
import postcss from "postcss";
import tailwindcss from "tailwindcss";
import tailwindConfig from "tailwind.config";
import type { EleventyConfig } from "11ty";

export function registerCss(config: EleventyConfig) {
  config.on("eleventy.after", async function ({ directories }) {
    const css = await readFile(join(directories.input, "root.css"), {
      encoding: "utf-8",
    });
    const postcssResult = await postcss([
      tailwindcss(tailwindConfig),
      autoprefixer(),
    ]).process(css);
    await writeFile(join(directories.output, "root.css"), postcssResult.css);
  });
}

tailwind.config.ts

import type { Config } from "tailwindcss";
import typography from "@tailwindcss/typography";
import daisyui from "daisyui";

export default {
  content: ["./public/**/*.html"],
  theme: {
    extend: {
      fontFamily: {
        sans: [
          "Inter",
          "ui-sans-serif",
          "system-ui",
          "sans-serif",
          '"Apple Color Emoji"',
          '"Segoe UI Emoji"',
          '"Segoe UI Symbol"',
          '"Noto Color Emoji"',
        ],
      },
    },
  },
  plugins: [typography, daisyui],
  daisyui: {
    themes: ["emerald", "dark"],
  },
} satisfies Config;