plugin-tailwindcss: tailwind v4

Author: AugustinMauroy

deno.lock

@@ -2,26 +2,23 @@
 
 A Tailwind CSS plugin to use in Fresh.
 
+> **Note:** This plugin **only** supports Tailwind CSS v4
+
 ```ts
 // dev.ts
 
-import { tailwind } from "@fresh/plugin-tailwind";
-import { FreshDevApp } from "fresh/dev";
+import { Builder } from "fresh/dev";
 import { app } from "./main.ts";
+import { tailwind } from "@fresh/plugin-tailwind";
 
-const devApp = new FreshDevApp();
-
+const builder = new Builder({ target: "safari12" });
 // Enable Tailwind CSS
-tailwind(devApp);
-
-devApp.mountApp("/", app);
+tailwind(builder, app);
 
 if (Deno.args.includes("build")) {
-  await devApp.build({
-    target: "safari12",
-  });
+  await builder.build(app);
 } else {
-  await devApp.listen();
+  await builder.listen(app);
 }
 ```
 

plugin-tailwindcss/README.md

@@ -6,11 +6,8 @@
     ".": "./src/mod.ts"
   },
   "imports": {
-    "fresh": "jsr:@fresh/core@^2.0.0-alpha.22",
-    "@std/path": "jsr:@std/path@1",
-    "autoprefixer": "npm:autoprefixer@10.4.17",
-    "cssnano": "npm:cssnano@6.0.3",
-    "postcss": "npm:postcss@8.4.35",
-    "tailwindcss": "npm:tailwindcss@^3.4.1"
+    "@tailwindcss/postcss": "npm:@tailwindcss/postcss@^4.0.8",
+    "fresh": "jsr:@fresh/core@^2.0.0-alpha.29",
+    "postcss": "npm:postcss@8.4.35"
   }
 }

plugin-tailwindcss/deno.json

@@ -1,80 +1,14 @@
-import tailwindCss, { type Config } from "tailwindcss";
+import tailwindPoscss from "@tailwindcss/postcss";
 import postcss from "postcss";
-import autoprefixer from "autoprefixer";
-import * as path from "@std/path";
-import type { TailwindPluginOptions } from "./types.ts";
 import type { ResolvedFreshConfig } from "fresh";
+import type { Processor } from "postcss";
 
-const CONFIG_EXTENSIONS = ["ts", "js", "mjs"];
-
-async function findTailwindConfigFile(directory: string): Promise<string> {
-  let dir = directory;
-  while (true) {
-    for (let i = 0; i < CONFIG_EXTENSIONS.length; i++) {
-      const ext = CONFIG_EXTENSIONS[i];
-      const filePath = path.join(dir, `tailwind.config.${ext}`);
-      try {
-        const stat = await Deno.stat(filePath);
-        if (stat.isFile) {
-          return filePath;
-        }
-      } catch (err) {
-        if (!(err instanceof Deno.errors.NotFound)) {
-          throw err;
-        }
-      }
-    }
-
-    const parent = path.dirname(dir);
-    if (parent === dir) {
-      throw new Error(
-        `Could not find a tailwind config file in the current directory or any parent directory.`,
-      );
-    }
-
-    dir = parent;
-  }
-}
-
-export async function initTailwind(
+export function initTailwind(
   config: ResolvedFreshConfig,
-  options: TailwindPluginOptions,
-): Promise<postcss.Processor> {
-  const root = path.dirname(config.staticDir);
-
-  const configPath = await findTailwindConfigFile(root);
-  const url = path.toFileUrl(configPath).href;
-  const tailwindConfig = (await import(url)).default as Config;
-
-  if (!Array.isArray(tailwindConfig.content)) {
-    throw new Error(`Expected tailwind "content" option to be an array`);
-  }
-
-  // deno-lint-ignore no-explicit-any
-  tailwindConfig.content = tailwindConfig.content.map((pattern: any) => {
-    if (typeof pattern === "string") {
-      const relative = path.relative(Deno.cwd(), path.dirname(configPath));
-
-      if (!relative.startsWith("..")) {
-        return path.join(relative, pattern);
-      }
-    }
-    return pattern;
-  });
-
-  // PostCSS types cause deep recursion
-  const plugins = [
-    // deno-lint-ignore no-explicit-any
-    tailwindCss(tailwindConfig) as any,
-    // deno-lint-ignore no-explicit-any
-    autoprefixer(options.autoprefixer) as any,
-  ];
-
-  if (config.mode === "production") {
-    const { default: cssnano } = await import("cssnano");
-    plugins.push(cssnano());
-  }
+): Processor {
+  const res = postcss(tailwindPoscss({
+    optimize: config.mode === "production",
+  }));
 
-  const res = postcss(plugins);
   return res;
 }

plugin-tailwindcss/src/compiler.ts

@@ -1,19 +1,17 @@
-import type { TailwindPluginOptions } from "./types.ts";
 import { initTailwind } from "./compiler.ts";
 import type { Builder } from "fresh/dev";
 import type { App } from "fresh";
 
 export function tailwind<T>(
   builder: Builder,
   app: App<T>,
-  options: TailwindPluginOptions = {},
 ): void {
   let processor: ReturnType<typeof initTailwind> | null;
 
   builder.onTransformStaticFile(
     { pluginName: "tailwind", filter: /\.css$/ },
     async (args) => {
-      if (!processor) processor = initTailwind(app.config, options);
+      if (!processor) processor = initTailwind(app.config);
       const instance = await processor;
       const res = await instance.process(args.text, {
         from: args.path,