tailwind not loaded on new project

[towc]

performed steps as per https://fresh.deno.dev/docs/getting-started

 ~ $ deno --version
deno 2.7.14 (stable, release, x86_64-unknown-linux-gnu)
v8 14.7.173.20-rusty
typescript 5.9.2

generated vite config does contain tailwind:

import { defineConfig } from "vite";
import { fresh } from "@fresh/plugin-vite";
import tailwindcss from "@tailwindcss/vite";

export default defineConfig({
  plugins: [fresh(), tailwindcss()],
});

and assets/styles.css does contain the import:

@import "tailwindcss";
.fresh-gradient {
  background-color: rgb(134, 239, 172);
  background-image: linear-gradient(
    to right bottom,
    rgb(219, 234, 254),
    rgb(187, 247, 208),
    rgb(254, 249, 195)
  );
}

deno.json imports seem ok:

  "imports": {
    "@/": "./",
    "fresh": "jsr:@fresh/core@^2.3.3",
    "preact": "npm:preact@^10.29.1",
    "@preact/signals": "npm:@preact/signals@^2.9.0",
    "@fresh/plugin-vite": "jsr:@fresh/plugin-vite@^1.1.2",
    "vite": "npm:vite@^7.1.3",
    "@types/babel__core": "npm:@types/babel__core@^7.20.5",
    "tailwindcss": "npm:tailwindcss@^4.1.10",
    "@tailwindcss/vite": "npm:@tailwindcss/vite@^4.1.12"
  },

[njncalub]

Not sure if related but on Deno Deploy the inline tailwind css doesn't show up

[bartlomieju]

Thanks for the report. I can't reproduce on macOS arm64 with the same @fresh/init@2.3.3 and the latest @fresh/plugin-vite — Tailwind utilities are emitted both in dev and in deno task build. Based on your screenshot, the .fresh-gradient background does render, which tells us assets/styles.css is loading and Tailwind's base layer is being generated — but the utility classes (text-4xl, font-bold, etc.) are missing. That points at Tailwind v4's source scanner (Oxide) not finding your .tsx files, rather than the CSS pipeline being broken entirely.

A couple of things would help narrow it down:

1. In DevTools, open the generated <style> block (or the assets/styles.css request) and search for @layer utilities. Is the block empty, missing entirely, or just missing a few classes?
2. Check that the platform binary for Oxide got installed:

   ls node_modules/.deno/node_modules/@tailwindcss/

   On Linux x64 glibc you should see oxide-linux-x64-gnu alongside oxide. If it's missing, that's the bug.
3. Try a clean install — there was a related Deno bug (Exception when calling fs.close() without callback denoland/deno#30718) around Sept 2025 that broke @tailwindcss/oxide install on Linux; the fix shipped before 2.7.14, but a stale lockfile from an earlier Deno can keep the broken state:

   rm -rf deno.lock node_modules
   deno install -r --allow-scripts
   deno task dev

4. As a sanity check, in assets/styles.css add an explicit source after the @import:

   @import "tailwindcss";
   @source "../routes";
   @source "../islands";
   @source "../components";

   If that makes the utilities appear, then auto source detection is the culprit on your setup and we should add this to the init template defensively.

Re: @njncalub's comment about Deno Deploy — please open that as a separate issue with a repro; it's likely a different code path (production build + Deploy's filesystem) and bundling it here will make this harder to debug.

[towc]

Thanks for the quick response!

1. I see 2 style tags in head, which seem to have the same content:

They're the only style tags in the document

The network response for assets/style.css:

import { createHotContext as __vite__createHotContext } from "/@vite/client";import.meta.hot = __vite__createHotContext("/assets/styles.css");import { updateStyle as __vite__updateStyle, removeStyle as __vite__removeStyle } from "/@vite/client"
const __vite__id = "/home/user/exp/deno-fresh-tailwind-sample/assets/styles.css"
const __vite__css = "/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */\n@layer theme, base, components, utilities;\n@layer theme {\n  :root, :host {\n    --font-sans: ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\",\n      \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\",\n      \"Courier New\", monospace;\n    --default-font-family: var(--font-sans);\n    --default-mono-font-family: var(--font-mono);\n  }\n}\n@layer base {\n  *, ::after, ::before, ::backdrop, ::file-selector-button {\n    box-sizing: border-box;\n    margin: 0;\n    padding: 0;\n    border: 0 solid;\n  }\n  html, :host {\n    line-height: 1.5;\n    -webkit-text-size-adjust: 100%;\n    tab-size: 4;\n    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\");\n    font-feature-settings: var(--default-font-feature-settings, normal);\n    font-variation-settings: var(--default-font-variation-settings, normal);\n    -webkit-tap-highlight-color: transparent;\n  }\n  hr {\n    height: 0;\n    color: inherit;\n    border-top-width: 1px;\n  }\n  abbr:where([title]) {\n    -webkit-text-decoration: underline dotted;\n    text-decoration: underline dotted;\n  }\n  h1, h2, h3, h4, h5, h6 {\n    font-size: inherit;\n    font-weight: inherit;\n  }\n  a {\n    color: inherit;\n    -webkit-text-decoration: inherit;\n    text-decoration: inherit;\n  }\n  b, strong {\n    font-weight: bolder;\n  }\n  code, kbd, samp, pre {\n    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace);\n    font-feature-settings: var(--default-mono-font-feature-settings, normal);\n    font-variation-settings: var(--default-mono-font-variation-settings, normal);\n    font-size: 1em;\n  }\n  small {\n    font-size: 80%;\n  }\n  sub, sup {\n    font-size: 75%;\n    line-height: 0;\n    position: relative;\n    vertical-align: baseline;\n  }\n  sub {\n    bottom: -0.25em;\n  }\n  sup {\n    top: -0.5em;\n  }\n  table {\n    text-indent: 0;\n    border-color: inherit;\n    border-collapse: collapse;\n  }\n  :-moz-focusring {\n    outline: auto;\n  }\n  progress {\n    vertical-align: baseline;\n  }\n  summary {\n    display: list-item;\n  }\n  ol, ul, menu {\n    list-style: none;\n  }\n  img, svg, video, canvas, audio, iframe, embed, object {\n    display: block;\n    vertical-align: middle;\n  }\n  img, video {\n    max-width: 100%;\n    height: auto;\n  }\n  button, input, select, optgroup, textarea, ::file-selector-button {\n    font: inherit;\n    font-feature-settings: inherit;\n    font-variation-settings: inherit;\n    letter-spacing: inherit;\n    color: inherit;\n    border-radius: 0;\n    background-color: transparent;\n    opacity: 1;\n  }\n  :where(select:is([multiple], [size])) optgroup {\n    font-weight: bolder;\n  }\n  :where(select:is([multiple], [size])) optgroup option {\n    padding-inline-start: 20px;\n  }\n  ::file-selector-button {\n    margin-inline-end: 4px;\n  }\n  ::placeholder {\n    opacity: 1;\n  }\n  @supports (not (-webkit-appearance: -apple-pay-button))  or (contain-intrinsic-size: 1px) {\n    ::placeholder {\n      color: currentcolor;\n      @supports (color: color-mix(in lab, red, red)) {\n        color: color-mix(in oklab, currentcolor 50%, transparent);\n      }\n    }\n  }\n  textarea {\n    resize: vertical;\n  }\n  ::-webkit-search-decoration {\n    -webkit-appearance: none;\n  }\n  ::-webkit-date-and-time-value {\n    min-height: 1lh;\n    text-align: inherit;\n  }\n  ::-webkit-datetime-edit {\n    display: inline-flex;\n  }\n  ::-webkit-datetime-edit-fields-wrapper {\n    padding: 0;\n  }\n  ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {\n    padding-block: 0;\n  }\n  ::-webkit-calendar-picker-indicator {\n    line-height: 1;\n  }\n  :-moz-ui-invalid {\n    box-shadow: none;\n  }\n  button, input:where([type=\"button\"], [type=\"reset\"], [type=\"submit\"]), ::file-selector-button {\n    appearance: button;\n  }\n  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {\n    height: auto;\n  }\n  [hidden]:where(:not([hidden=\"until-found\"])) {\n    display: none !important;\n  }\n}\n@layer utilities;\n.fresh-gradient {\n  background-color: rgb(134, 239, 172);\n  background-image: linear-gradient( to right bottom, rgb(219, 234, 254), rgb(187, 247, 208), rgb(254, 249, 195) );\n}\n"
__vite__updateStyle(__vite__id, __vite__css)
import.meta.hot.accept()
import.meta.hot.prune(() => __vite__removeStyle(__vite__id))

@layer utilities; is there, but no e.g. .px-4

2. oxide presence:

$ l node_modules/.deno/node_modules/@tailwindcss/
total 24K
drwxrwxr-x  2 user user 4.0K May 26 11:50 .
drwxrwxr-x 10 user user 4.0K May 26 11:50 ..
lrwxrwxrwx  1 user user   60 May 26 11:50 node -> ../../@tailwindcss+node@4.3.0/node_modules/@tailwindcss/node
lrwxrwxrwx  1 user user   62 May 26 11:50 oxide -> ../../@tailwindcss+oxide@4.3.0/node_modules/@tailwindcss/oxide
lrwxrwxrwx  1 user user   90 May 26 11:50 oxide-linux-x64-gnu -> ../../@tailwindcss+oxide-linux-x64-gnu@4.3.0/node_modules/@tailwindcss/oxide-linux-x64-gnu
lrwxrwxrwx  1 user user   92 May 26 11:50 oxide-linux-x64-musl -> ../../@tailwindcss+oxide-linux-x64-musl@4.3.0/node_modules/@tailwindcss/oxide-linux-x64-musl

All the symlinks seem to be point to valid locations:

3. same result after purging lockfile:

(tailwind classes present in html, but not in css)

4. adding the 3 @source lines isn't making a difference. Tried playing around with paths and restarting dev server.

Also tried upgrading to deno 2.8 and a new fresh project with the same steps as the original, same result.

Great points, I didn't think about checking most of these! I still haven't figured it out.

$ lsb_release -a
No LSB modules are available.
Distributor ID: Ubuntu
Description:    Ubuntu 24.04.4 LTS
Release:        24.04
Codename:       noble

Let me know if any other information would be useful.

Using firefox, I did try a private tab with all addons deactivated. I can't think of much else that my system would have working differently.

For what it's worth, tailwind is working fine with create-next-app, with a very similar-looking oxide

[bartlomieju]

Thanks for the incredibly thorough debugging — you ruled out almost every angle I'd have asked about. The fact that explicit @source doesn't change anything is the most useful signal: it tells us Oxide either isn't being invoked at all in this context, or it's being invoked with an empty set of candidates. Combined with create-next-app working on the same machine, this points at the Fresh ↔ @tailwindcss/vite integration rather than Oxide itself or Deno's npm resolution.

A few diagnostics that would help me localize this — could you try them and paste the results?

1. Confirm Oxide works standalone on your machine, outside Vite:

deno run -A npm:@tailwindcss/cli@4 -i assets/styles.css -o /tmp/out.css
grep -c 'text-4xl\|font-bold' /tmp/out.css

If utilities show up in /tmp/out.css, we know the native binary, source scanning, and your filesystem are all fine — and the bug lives in the Vite plugin integration.

2. Try the same project under Node to isolate anything Deno-specific:

npm install
npx vite build

Then check whether dist/.../*.css contains the utility classes.

3. Capture verbose plugin logging from a dev run:

DEBUG=tailwindcss:* deno task dev 2>&1 | tee tw.log

The lines mentioning "scanning", "candidates", or @source would tell us exactly what Oxide thinks its input set is.

4. If possible, push your reproducer to a public repo and link it here — I want to run it on a Linux box myself, since this clearly doesn't reproduce on macOS and I don't want to keep guessing across the stack.

One specific hypothesis I'd like to rule out: Fresh's plugin configures Vite 7's environments API (separate client and ssr environments). It's possible @tailwindcss/vite is only attaching to one of them and ending up with an empty module graph in your setup. The CLI test above would either confirm or rule that out.

[towc]

1. the cli doesn't return the css utilities:

 ~/exp/deno-fresh-tailwind-sample-2.8 $ deno run -A npm:@tailwindcss/cli@4 -i assets/styles.css -o /tmp/out.css
≈ tailwindcss v4.3.0

Done in 25ms
 ~/exp/deno-fresh-tailwind-sample-2.8 $ grep -c 'text-4xl\|font-bold' /tmp/out.css
0

/tmp/out.css looks like what was in those style tags.

2. how do I try the same project under node?

There's no package.json, and I'm not aware of an easy way to port. I tried to recreate it via these commands, looking at the deno.json:

npm init
npx jsr add @fresh/core
npx jsr add @fresh/plugin-vite
npm i preact @preact/signals vite @types/babel__core tailwindcss @tailwindcss/vite

 ~/exp/deno-fresh-tailwind-sample-2.8 $ npx vite build
failed to load config from /home/user/exp/deno-fresh-tailwind-sample-2.8/vite.config.ts
error during build:
TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".tsx" for /home/user/exp/deno-fresh-tailwind-sample-2.8/node_modules/@jsr/fresh__core/src/dev/middlewares/error_overlay/middleware.tsx
    at Object.getFileProtocolModuleFormat [as file:] (node:internal/modules/esm/get_format:185:9)
    at defaultGetFormat (node:internal/modules/esm/get_format:211:36)
    at defaultLoadSync (node:internal/modules/esm/load:158:16)
    at #loadAndMaybeBlockOnLoaderThread (node:internal/modules/esm/loader:796:12)
    at #loadSync (node:internal/modules/esm/loader:816:49)
    at ModuleLoader.loadAndTranslateForImportInRequiredESM (node:internal/modules/esm/loader:430:38)
    at #getOrCreateModuleJobAfterResolve (node:internal/modules/esm/loader:575:36)
    at afterResolve (node:internal/modules/esm/loader:625:52)
    at ModuleLoader.getOrCreateModuleJob (node:internal/modules/esm/loader:631:12)
    at ModuleJobSync.syncLink (node:internal/modules/esm/module_job:160:33) {
  code: 'ERR_UNKNOWN_FILE_EXTENSION'
}

But I think that broke something, after doing that, I get this:

$ deno task build
Task build vite build
failed to load config from /home/user/exp/deno-fresh-tailwind-sample-2.8/vite.config.ts
error during build:
TypeError: [ERR_UNSUPPORTED_NODE_MODULES_TYPE_STRIPPING]: Stripping types is currently unsupported for files under node_modules, for "file:///home/user/exp/deno-fresh-tailwind-sample-2.8/node_modules/@jsr/fresh__core/src/dev/middlewares/error_overlay/middleware.tsx"
    at file:///home/user/exp/deno-fresh-tailwind-sample-2.8/node_modules/@jsr/fresh__core/src/dev/builder.ts:27:33
    at async loadConfigFromBundledFile (file:///home/user/exp/deno-fresh-tailwind-sample-2.8/node_modules/vite/dist/node/chunks/node.js:34895:12)
    at async bundleAndLoadConfigFile (file:///home/user/exp/deno-fresh-tailwind-sample-2.8/node_modules/vite/dist/node/chunks/node.js:34756:17)
    at async loadConfigFromFile (file:///home/user/exp/deno-fresh-tailwind-sample-2.8/node_modules/vite/dist/node/chunks/node.js:34723:42)
    at async resolveConfig (file:///home/user/exp/deno-fresh-tailwind-sample-2.8/node_modules/vite/dist/node/chunks/node.js:34349:22)
    at async createBuilder (file:///home/user/exp/deno-fresh-tailwind-sample-2.8/node_modules/vite/dist/node/chunks/node.js:33534:17)
    at async CAC.<anonymous> (file:///home/user/exp/deno-fresh-tailwind-sample-2.8/node_modules/vite/dist/node/cli.js:766:19) {
  code: 'ERR_MODULE_NOT_FOUND'
}

I spun up a new project to confirm deno task build works fine from scratch, although the client-entry-*.css file still doesn't contain e.g. .px-4.

3. not sure how to interpret these debug logs, no files?

$ DEBUG=tailwindcss:* deno task dev 2>&1 | tee tw.log
Task dev vite

  VITE v7.3.3  ready in 366 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help
GET http://localhost:5173/
Shared value hello

[18.72ms] [@tailwindcss/vite] Generate CSS (serve)
[13.50ms]   ↳ Setup compiler
[ 0.77ms]   ↳ Setup scanner
[ 1.19ms]   ↳ Scan for candidates
[ 0.39ms]   ↳ Register dependency messages
[ 2.27ms]   ↳ Build CSS
[ 0.00ms]   ↳ Build Source Map


[52.35ms] [@tailwindcss/vite] Generate CSS (serve)
[50.89ms]   ↳ Setup compiler
[ 0.06ms]   ↳ Setup scanner
[ 0.32ms]   ↳ Scan for candidates
[ 0.25ms]   ↳ Register dependency messages
[ 0.75ms]   ↳ Build CSS
[ 0.00ms]   ↳ Build Source Map

I tried it with DEBUG=* in case there's anything else of use there. It's a 120MB file and probably not a good idea to upload it all for my own security, but here are some greps you might find relevant. Nothing jumps out to me: https://gist.github.com/towc/682a42372941296c1fb5635f0f34f5d3

4: how would I upload a reproducer?

The reproduction steps are literally deno run -Ar jsr:@fresh/init and deno task dev, on ubuntu. I don't have another machine to test it on.

I did try it in a deno sandbox, and the built css does have .px-4.

I'm pretty lost on debugging this. I decided not to use fresh this time, but I'm around if you'd like to keep trying, I really want deno/fresh to succeed! Also available in the discord, @MC

[bartlomieju]

Update: I reproduced this on a clean macOS box without any Fresh/Vite involvement, and the root cause is now clear. It's not Deno, not Fresh, not @tailwindcss/vite. It's a Tailwind v4 source-detection rule: Oxide walks up from the CSS file to find the nearest .git directory and then silently excludes anything matched by any .gitignore on that walk — including parent-directory gitignores. Explicit @source directives don't escape that filter.

My reproducer:

# 1) clean Tailwind project — works, emits utilities
mkdir -p /tmp/oxide-ok/{routes,islands}
echo '@import "tailwindcss";' > /tmp/oxide-ok/styles.css
echo 'export default () => <h1 class="text-4xl font-bold px-4">x</h1>;' > /tmp/oxide-ok/routes/index.tsx
echo '{"nodeModulesDir":"auto","imports":{"tailwindcss":"npm:tailwindcss@^4"}}' > /tmp/oxide-ok/deno.json
cd /tmp/oxide-ok && deno install --allow-scripts -q \
  && deno run -A npm:@tailwindcss/cli@4 -i styles.css -o out.css \
  && grep -c 'text-4xl' out.css
# → 1

# 2) wrap the same project in a parent .git with "*" in .gitignore — utilities vanish
mkdir -p /tmp/oxide-bad && cd /tmp/oxide-bad && git init -q && echo '*' > .gitignore
cp -r /tmp/oxide-ok project && rm -rf project/node_modules project/out.css
cd project && deno install --allow-scripts -q \
  && deno run -A npm:@tailwindcss/cli@4 -i styles.css -o out.css \
  && grep -c 'text-4xl' out.css
# → 0

And the diagnostic that pins it down:

cd /tmp/oxide-bad/project && git check-ignore -v routes/index.tsx
# .gitignore:1:*  routes/index.tsx

What's almost certainly happening on your machine: there's a .git directory in a parent of ~/exp/deno-fresh-tailwind-sample-2.8 — most commonly ~/.git from a dotfiles repo, or ~/exp/.git. Could you run, from inside the project directory:

git check-ignore -v routes/index.tsx islands/Counter.tsx
( d=$PWD; while [ "$d" != "/" ]; do [ -e "$d/.git" ] && echo "found .git at $d"; d=$(dirname "$d"); done )
git config --global --get core.excludesFile

That'll print which file/line is making your sources invisible to Oxide. The fix on your side is then to remove/narrow whichever .gitignore is responsible, or to git init the project itself so the gitignore walk stops at the project root.

On Fresh's side: we should probably either run git init as part of fresh init (which would short-circuit any parent gitignore) or call this out in the docs. I'll open a separate issue for that — thanks again for sticking with the debugging long enough that we got a clean repro and root cause, that was genuinely useful.

[towc]

not in a git project, my global ignore doesn't have anything I would consider relevant. I do have a ~/.gitignore for dotfiles, so that's probably it, you're right!

Running git init and deno task dev makes tailwind work!

It is a bit of a bummer that you'd need to do that, other CVSs are still around and frustration with git is persistent and growing, my 2 cents is that deno fresh should probably not git init itself.

Thanks for all the hard work!