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

you need to build first

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

I get the same error when I run deno task build:

error: Uncaught (in promise) Error: Can't resolve 'tailwindcss' in '/Users/maclong/Developer/kylie-wines/static'
    at finishWithoutResolve (file:///Users/maclong/Library/Caches/deno/npm/registry.npmjs.org/enhanced-resolve/5.18.1/lib/Resolver.js:564:18)
    at file:///Users/maclong/Library/Caches/deno/npm/registry.npmjs.org/enhanced-resolve/5.18.1/lib/Resolver.js:656:15
    at file:///Users/maclong/Library/Caches/deno/npm/registry.npmjs.org/enhanced-resolve/5.18.1/lib/Resolver.js:718:5
    at eval (eval at create (file:///Users/maclong/Library/Caches/deno/npm/registry.npmjs.org/tapable/2.2.1/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
    at file:///Users/maclong/Library/Caches/deno/npm/registry.npmjs.org/enhanced-resolve/5.18.1/lib/Resolver.js:718:5
    at eval (eval at create (file:///Users/maclong/Library/Caches/deno/npm/registry.npmjs.org/tapable/2.2.1/lib/HookCodeFactory.js:33:10), <anonymous>:16:1)
    at file:///Users/maclong/Library/Caches/deno/npm/registry.npmjs.org/enhanced-resolve/5.18.1/lib/Resolver.js:718:5
    at eval (eval at create (file:///Users/maclong/Library/Caches/deno/npm/registry.npmjs.org/tapable/2.2.1/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
    at file:///Users/maclong/Library/Caches/deno/npm/registry.npmjs.org/enhanced-resolve/5.18.1/lib/Resolver.js:718:5
    at eval (eval at create (file:///Users/maclong/Library/Caches/deno/npm/registry.npmjs.org/tapable/2.2.1/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)

@pakornv I also get this error when using your plugin.

[pakornv]

@maclong9 I think you need to add tailwindcss to your deno.json e.g. deno add npm:tailwindcss
my example project: https://github.com/pakornv/fresh-tailwindcss-v4

@maclong9 I think you need to add tailwindcss to your deno.json e.g. deno add npm:tailwindcss my example project: https://github.com/pakornv/fresh-tailwindcss-v4

I have got tailwindcss in my deno.json and it's producing the same error.

[pakornv]

@maclong9 I think you need to add tailwindcss to your deno.json e.g. deno add npm:tailwindcss my example project: https://github.com/pakornv/fresh-tailwindcss-v4

I have got tailwindcss in my deno.json and it's producing the same error.

Could you share your example that produce the error?

@maclong9 I think you need to add tailwindcss to your deno.json e.g. deno add npm:tailwindcss my example project: https://github.com/pakornv/fresh-tailwindcss-v4

I have got tailwindcss in my deno.json and it's producing the same error.

Could you share your example that produce the error?

It's a private repo unfortunately, what files do you need and I can create a minimal repro of the project so you can see

[hapaxlife]

@pakornv your project works for me but I can't add the plugin daisy. I don't have any errors but styles are not apply. Any idea ?

[pakornv]

@pakornv your project works for me but I can't add the plugin daisy. I don't have any errors but styles are not apply. Any idea ?

Sorry for late reply. I just try Daisy UI v5 with my repo and it works.
pakornv/fresh-tailwindcss-v4#1

[pakornv]

@maclong9 I just accidentally reproduce the error. I add "nodeModulesDir": "auto" to my deno.json add the error gone.