feat: update the tailwind plugin to suuport tailwindv4 #2819

init/src/init.ts

@@ -3,7 +3,7 @@ import * as path from "@std/path";
 
 // Keep these as is, as we replace these version in our release script
 const FRESH_VERSION = "2.0.0-alpha.29";
-const FRESH_TAILWIND_VERSION = "0.0.1-alpha.7";
+const FRESH_TAILWIND_VERSION = "0.0.1-alpha.8";
 const PREACT_VERSION = "10.25.4";
 const PREACT_SIGNALS_VERSION = "2.0.1";
 
@@ -589,7 +589,7 @@ if (Deno.args.includes("build")) {
   };
 
   if (useTailwind) {
-    denoJson.imports["tailwindcss"] = "npm:tailwindcss@^3.4.3";
+    denoJson.imports["tailwindcss"] = "npm:tailwindcss@^4.0.0";
   }
 
   await writeFile("deno.json", denoJson);

plugin-tailwindcss/README.md

@@ -1,6 +1,6 @@
 # Tailwind CSS plugin for Fresh
 
-A Tailwind CSS plugin to use in Fresh.
+A Tailwind CSS v4 plugin to use in Fresh.
 
 ```ts
 // dev.ts
@@ -12,7 +12,7 @@ import { app } from "./main.ts";
 const devApp = new FreshDevApp();
 
 // Enable Tailwind CSS
-tailwind(devApp);
+tailwind(devApp, app);
 
 devApp.mountApp("/", app);
 

plugin-tailwindcss/deno.json

@@ -1,16 +1,16 @@
 {
   "name": "@fresh/plugin-tailwind",
-  "version": "0.0.1-alpha.7",
+  "version": "0.0.1-alpha.8",
   "license": "MIT",
   "exports": {
     ".": "./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"
+    "cssnano": "npm:cssnano@^7.0.6",
+    "postcss": "npm:postcss@^8.5.3",
+    "@tailwindcss/postcss": "npm:@tailwindcss/postcss@^4.0.8",
+    "tailwindcss": "npm:tailwindcss@^4.0.0"
   }
 }

plugin-tailwindcss/src/compiler.ts

@@ -1,80 +1,23 @@
-import tailwindCss, { type Config } from "tailwindcss";
+import twPostcss 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";
 
-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(
   config: ResolvedFreshConfig,
-  options: TailwindPluginOptions,
+  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,
+    twPostcss(options.postcssOptions) as any,
   ];
 
-  if (config.mode === "production") {
+  // when in production mode, minify the CSS
+  if (config.mode === "production" && options.minify !== false) {
     const { default: cssnano } = await import("cssnano");
-    plugins.push(cssnano());
+    // deno-lint-ignore no-explicit-any
+    plugins.push(cssnano(options.cssnanoOptions ?? {}) as any);
   }
 
-  const res = postcss(plugins);
-  return res;
+  return postcss(plugins);
 }

plugin-tailwindcss/src/mod.ts

@@ -1,7 +1,7 @@
-import type { TailwindPluginOptions } from "./types.ts";
 import { initTailwind } from "./compiler.ts";
 import type { Builder } from "fresh/dev";
 import type { App } from "fresh";
+import type { TailwindPluginOptions } from "./types.ts";
 
 export function tailwind<T>(
   builder: Builder,

plugin-tailwindcss/src/types.ts

@@ -1,44 +1,19 @@
-export interface AutoprefixerOptions {
-  /** environment for `Browserslist` */
-  env?: string;
-
-  /** should Autoprefixer use Visual Cascade, if CSS is uncompressed */
-  cascade?: boolean;
-
-  /** should Autoprefixer add prefixes. */
-  add?: boolean;
-
-  /** should Autoprefixer [remove outdated] prefixes */
-  remove?: boolean;
-
-  /** should Autoprefixer add prefixes for @supports parameters. */
-  supports?: boolean;
-
-  /** should Autoprefixer add prefixes for flexbox properties */
-  flexbox?: boolean | "no-2009";
-
-  /** should Autoprefixer add IE 10-11 prefixes for Grid Layout properties */
-  grid?: boolean | "autoplace" | "no-autoplace";
-
-  /** custom usage statistics for > 10% in my stats browsers query */
-  stats?: {
-    [browser: string]: {
-      [version: string]: number;
-    };
-  };
+import type { Config as _TailwindConfig } from "tailwindcss";
 
+export interface TailwindPluginOptions {
   /**
-   * list of queries for target browsers.
-   * Try to not use it.
-   * The best practice is to use `.browserslistrc` config or `browserslist` key in `package.json`
-   * to share target browsers with Babel, ESLint and Stylelint
+   * https://tailwindcss.com/docs/installation/using-postcss
    */
-  overrideBrowserslist?: string | string[];
+  postcssOptions?: Record<string, unknown>;
 
-  /** do not raise error on unknown browser version in `Browserslist` config. */
-  ignoreUnknownVersions?: boolean;
-}
+  /**
+   * if true, minify the CSS in production mode
+   */
+  minify?: boolean;
 
-export interface TailwindPluginOptions {
-  autoprefixer?: AutoprefixerOptions;
+  /**
+   * use cssnano options
+   */
+  // deno-lint-ignore no-explicit-any
+  cssnanoOptions?: Record<string, any>;
 }

www/deno.json

@@ -21,8 +21,7 @@
     "@std/path": "jsr:@std/path@1",
     "@std/semver": "jsr:@std/semver@1",
     "@opentelemetry/api": "npm:@opentelemetry/api@^1.9.0",
-    "autoprefixer": "npm:autoprefixer@10.4.17",
-    "cssnano": "npm:cssnano@6.0.3",
+    "cssnano": "npm:cssnano@7.0.7",
     "esbuild": "npm:esbuild@0.23.1",
     "esbuild-wasm": "npm:esbuild-wasm@0.23.1",
     "fresh": "../src/mod.ts",
@@ -32,10 +31,10 @@
     "github-slugger": "npm:github-slugger@^2.0.0",
     "marked": "npm:marked@^14.1.2",
     "marked-mangle": "npm:marked-mangle@^1.1.9",
-    "postcss": "npm:postcss@8.4.35",
+    "postcss": "npm:postcss@^8.5.3",
     "preact": "npm:preact@^10.24.1",
     "preact-render-to-string": "npm:preact-render-to-string@^6.5.11",
     "prismjs": "npm:prismjs@^1.29.0",
-    "tailwindcss": "npm:tailwindcss@^3.4.1"
+    "tailwindcss": "npm:tailwindcss@^4.0.0"
   }
 }

www/static/styles.css

@@ -1,35 +1,33 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss";
 
 /* Light and dark theme variables */
 :root {
-  --fresh: 50deg, 100%, 56%;
-  --fresh-green: 142deg, 71%, 29%;
+  --fresh: hsla(50, 100%, 56%, 1);
+  --fresh-green: hsla(142, 71%, 29%, 1);
 
   --background-primary: 215deg, 100%, 100%;
-  --background-secondary: 210deg, 29%, 97%;
-  --background-tertiary: 207deg, 33%, 95%;
-  --foreground-primary: 0deg, 0%, 9%;
-  --foreground-secondary: 0deg, 0%, 23%;
-  --foreground-tertiary: 0deg, 0%, 32%;
-  --foreground-quaternary: 0deg, 0%, 42%;
-
-  --info: 194deg, 76%, 41%;
+  --background-secondary: hsla(210, 29%, 97%, 1);
+  --background-tertiary: hsla(207, 33%, 95%, 1);
+  --foreground-primary: hsla(0, 0%, 9%, 1);
+  --foreground-secondary: hsla(0, 0%, 23%, 1);
+  --foreground-tertiary: hsla(0, 0%, 32%, 1);
+  --foreground-quaternary: hsla(0, 0%, 42%, 1);
+
+  --info: hsla(194, 76%, 41%, 1);
 }
 html[data-theme="dark"]:root {
-  --fresh: 50deg, 100%, 56%;
-  --fresh-green: 142deg, 71%, 29%;
+  --fresh: hsla(50, 100%, 56%, 1);
+  --fresh-green: hsla(142, 71%, 29%, 1);
 
-  --background-primary: 216deg, 27.8%, 7.1%;
-  --background-secondary: 216deg, 27.7%, 12%;
-  --background-tertiary: 216deg, 27.7%, 22%;
-  --foreground-primary: 215deg, 17%, 99%;
-  --foreground-secondary: 215deg, 17%, 71%;
-  --foreground-tertiary: 215deg, 17%, 20%;
-  --foreground-quaternary: 215deg, 17%, 10%;
+  --background-primary: hsla(216, 27.8%, 7.1%, 1);
+  --background-secondary: hsla(216, 27.7%, 12%, 1);
+  --background-tertiary: hsla(216, 27.7%, 22%, 1);
+  --foreground-primary: hsla(215, 17%, 99%, 1);
+  --foreground-secondary: hsla(215, 17%, 71%, 1);
+  --foreground-tertiary: hsla(215, 17%, 20%, 1);
+  --foreground-quaternary: hsla(215, 17%, 10%, 1);
 
-  --info: 194deg, 76%, 41%;
+  --info: hsla(194, 76%, 41%, 1);
 
   color: var(--foreground-primary);
   background-color: var(--background-primary);
@@ -98,11 +96,13 @@ h6 {
 }
 
 hr {
-  @apply border-foreground-secondary/10;
+  /* @apply border-foreground-secondary/10; */
+  border-color: hsla(var(--foreground-secondary), 0.1);
 }
 
 .dark-mode-toggle-button img {
-  @apply fill-foreground-primary;
+  /* @apply fill-foreground-primary; */
+  fill: var(--foreground-primary);
 }
 
 ::selection {

www/tailwind.config.ts

@@ -21,19 +21,26 @@ export default {
   theme: {
     extend: {
       colors: {
-        // Dark/light with Tailwind done right using CSS variables:
-        "fresh": "hsla(var(--fresh))",
-        "fresh-green": "hsla(var(--fresh-green))",
+        // use RGB variables with alpha value
+        "fresh": "rgb(var(--fresh-rgb) / <alpha-value>)",
+        "fresh-green": "rgb(var(--fresh-green-rgb) / <alpha-value>)",
 
-        "background-primary": "hsla(var(--background-primary))",
-        "background-secondary": "hsla(var(--background-secondary))",
-        "background-tertiary": "hsla(var(--background-tertiary))",
-        "foreground-primary": "hsla(var(--foreground-primary))",
-        "foreground-secondary": "hsla(var(--foreground-secondary))",
-        "foreground-tertiary": "hsla(var(--foreground-tertiary))",
-        "foreground-quaternary": "hsla(var(--foreground-quaternary))",
+        "background-primary":
+          "rgb(var(--background-primary-rgb) / <alpha-value>)",
+        "background-secondary":
+          "rgb(var(--background-secondary-rgb) / <alpha-value>)",
+        "background-tertiary":
+          "rgb(var(--background-tertiary-rgb) / <alpha-value>)",
+        "foreground-primary":
+          "rgb(var(--foreground-primary-rgb) / <alpha-value>)",
+        "foreground-secondary":
+          "rgb(var(--foreground-secondary-rgb) / <alpha-value>)",
+        "foreground-tertiary":
+          "rgb(var(--foreground-tertiary-rgb) / <alpha-value>)",
+        "foreground-quaternary":
+          "rgb(var(--foreground-quaternary-rgb) / <alpha-value>)",
 
-        "info": "hsla(var(--info))",
+        "info": "rgb(var(--info-rgb) / <alpha-value>)",
       },
     },
   },