Tailwind 4

[gawhite]

Any Guidance on updating to / using Tailwind 4 with Fresh?

[rocklau]

Here. https://github.com/rocklau/fresh-daisyuiv5-demo

dev.ts

#!/usr/bin/env -S deno run -A --watch=static/,routes/

import dev from "$fresh/dev.ts";
import config from "./fresh.config.ts";
import autoprefixer from "autoprefixer";

import "$std/dotenv/load.ts";
import postcss from "postcss";
import tailwindcss from "@tailwindcss/postcss";

const css = Deno.readTextFileSync("./static/app.css");
const out = await postcss([tailwindcss, autoprefixer]).process(css, {
  from: "./static/app.css",
});
Deno.writeTextFileSync("./static/styles.css", out.css);

await dev(import.meta.url, "./main.ts", config);
``

[Bentheminernz]

I followed the configuration for your git repo and even cloned it yet I always get this error. Any ideas?

error: Uncaught (in promise) Error: Can't resolve 'tailwindcss' in '/Users/[USERNAME]/Documents/GitHub/TypeScript Learning/react-learning/static'
    at finishWithoutResolve (file:///Users/[USERNAME]/Documents/GitHub/TypeScript Learning/react-learning/node_modules/.deno/enhanced-resolve@5.18.1/node_modules/enhanced-resolve/lib/Resolver.js:564:18)
    at file:///Users/[USERNAME]/Documents/GitHub/TypeScript Learning/react-learning/node_modules/.deno/enhanced-resolve@5.18.1/node_modules/enhanced-resolve/lib/Resolver.js:656:15
    at file:///Users/[USERNAME]/Documents/GitHub/TypeScript Learning/react-learning/node_modules/.deno/enhanced-resolve@5.18.1/node_modules/enhanced-resolve/lib/Resolver.js:718:5
    at eval (eval at create (file:///Users/[USERNAME]/Documents/GitHub/TypeScript%20Learning/react-learning/node_modules/.deno/tapable@2.2.1/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
    at file:///Users/[USERNAME]/Documents/GitHub/TypeScript Learning/react-learning/node_modules/.deno/enhanced-resolve@5.18.1/node_modules/enhanced-resolve/lib/Resolver.js:718:5
    at eval (eval at create (file:///Users/[USERNAME]/Documents/GitHub/TypeScript%20Learning/react-learning/node_modules/.deno/tapable@2.2.1/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:27:1)
    at file:///Users/[USERNAME]/Documents/GitHub/TypeScript Learning/react-learning/node_modules/.deno/enhanced-resolve@5.18.1/node_modules/enhanced-resolve/lib/DescriptionFilePlugin.js:89:43
    at file:///Users/[USERNAME]/Documents/GitHub/TypeScript Learning/react-learning/node_modules/.deno/enhanced-resolve@5.18.1/node_modules/enhanced-resolve/lib/Resolver.js:718:5
    at eval (eval at create (file:///Users/[USERNAME]/Documents/GitHub/TypeScript%20Learning/react-learning/node_modules/.deno/tapable@2.2.1/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
    at file:///Users/[USERNAME]/Documents/GitHub/TypeScript Learning/react-learning/node_modules/.deno/enhanced-resolve@5.18.1/node_modules/enhanced-resolve/lib/Resolver.js:718:5

[rocklau]

you need to build first

deno task build
deno install --allow-import -e main.ts

[clearfram3]

Since tailwind has lightningcss built-in, if you use tailwind, is autoprefixer still needed?

[shuliangfu]

This is inconvenient, waiting for the official upgrade to V4

[pakornv]

I made the package for this. Feel free to copy it to your project while you wait for the official implementation
https://jsr.io/@pakornv/fresh-plugin-tailwindcss