[V4] - Loading PostCSS Plugin failed: The URL must be of scheme file

[ranseur92]

What version of Tailwind CSS are you using?

4.0.0-alpha.21 onwards

What build tool (or framework if it abstracts the build tool) are you using?

Vite ^5.4.8

What version of Node.js are you using?

v22.11.0

What browser are you using?

Edge

What operating system are you using?

Windows 11

Reproduction URL

https://github.com/ranseur92/twind-test

Describe your issue

Cannot get any version higher than v4 Alpha 20 to work, within a AdonisJS + InertiaJS setup.

[Failed to load PostCSS config: Failed to load PostCSS config (searchPath: D:/JS/twind-test): [Error] Loading PostCSS Plugin failed: The URL must be of scheme file

(@D:\JS\twind-test\postcss.config.cjs)
Error: Loading PostCSS Plugin failed: The URL must be of scheme file

I'm guessing the underlying issue, is related to #14420 but that fix isn't appropriate in this case.

[philipp-spiess]

@ranseur92 Hey there! It's a bit hard to understand this repro case since there is so much going on. I tried running it but I need to set up a bunch of environment variables including Postgres which I do not have on my machine right now. Are you able to reproduce this in a simpler Vite setup as well?

One thing to try, since this framework seems to be using Vite, is to use the Vite extension instead of the postcss extension for Tailwind 4. You should be able to delete the postcss.config.cjs file and then install @tailwindcss/vite@next and add it to your vite.config.js:

import { defineConfig } from 'vite'
import inertia from '@adonisjs/inertia/client'
import vue from '@vitejs/plugin-vue'
import adonisjs from '@adonisjs/vite/client'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  plugins: [
    inertia({ ssr: { enabled: false } }), 
    vue(), 
    adonisjs({ entrypoints: ['inertia/app/app.ts'], reload: ['resources/views/**/*.edge'] }),
    tailwindcss(),
  ],
})

[ranseur92]

@ranseur92 Hey there! It's a bit hard to understand this repro case since there is so much going on. I tried running it but I need to set up a bunch of environment variables including Postgres which I do not have on my machine right now. Are you able to reproduce this in a simpler Vite setup as well?

One thing to try, since this framework seems to be using Vite, is to use the Vite extension instead of the postcss extension for Tailwind 4. You should be able to delete the postcss.config.cjs file and then install @tailwindcss/vite@next and add it to your vite.config.js:

import { defineConfig } from 'vite'
import inertia from '@adonisjs/inertia/client'
import vue from '@vitejs/plugin-vue'
import adonisjs from '@adonisjs/vite/client'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  plugins: [
    inertia({ ssr: { enabled: false } }), 
    vue(), 
    adonisjs({ entrypoints: ['inertia/app/app.ts'], reload: ['resources/views/**/*.edge'] }),
    tailwindcss(),
  ],
})

Hey, Ah yes, forgot to add a .env. You don't actually need anthing setup, as it's not used. it's just the base structure.

you can just use a .env similar to

TZ=UTC
PORT=3333
HOST=localhost
LOG_LEVEL=info
APP_KEY=Gyj1AVLDyuFa4MIUyMBW2L4LbQ_Qh_4c
NODE_ENV=development
SESSION_DRIVER=cookie
DB_HOST=127.0.0.1
DB_PORT=5432
DB_USER=root
DB_PASSWORD=root
DB_DATABASE=app

Let me know if you have any further issues?

Regarding using tailwind vite, It has the same issue

[NybbleCory]

@philipp-spiess

[philipp-spiess]

@ranseur92 Thanks, the repro does indeed crash like you mention. I've done a bit of debugging and could pinpoint the crash to the hot-hook library trying to parse a data: URI as a file import here: https://github.com/Julien-R44/hot-hook/blob/main/packages/hot_hook/src/loader.ts#L213

When I debug this, this is the context the module has:

{
  specifier: 'file:///Users/philipp/dev/twind-test/node_modules/.pnpm/@tailwindcss+node@file+..+..+tailwindcss+dist+tailwindcss-node.tgz/node_modules/@tailwindcss/node/dist/esm-cache.loader.mjs',
  context: {
    conditions: [ 'node', 'import', 'node-addons' ],
    importAttributes: [Object: null prototype] {},
    parentURL: 'data:'
  }
}

I don't have context what hot-hook is trying to do here. I don't think we're doing anything unexpected/unconventional when we register the esm loader?

https://github.com/tailwindlabs/tailwindcss/blob/next/packages/%40tailwindcss-node/src/index.ts#L17

I don't think we'll be able to work around this issue, I suggest it's best to reach out to the maintainers of this package instead to get this resolved. You may be able to patch the dependencies and prevent the custom ESM loader from being injected but this will mean that in dev mode, you can't make changes to any JS config files or plugins anymore, as we can't invalidate and reload these files anymore 🤔

[ranseur92]

@ranseur92 Thanks, the repro does indeed crash like you mention. I've done a bit of debugging and could pinpoint the crash to the hot-hook library trying to parse a data: URI as a file import here: https://github.com/Julien-R44/hot-hook/blob/main/packages/hot_hook/src/loader.ts#L213

When I debug this, this is the context the module has:

{
  specifier: 'file:///Users/philipp/dev/twind-test/node_modules/.pnpm/@tailwindcss+node@file+..+..+tailwindcss+dist+tailwindcss-node.tgz/node_modules/@tailwindcss/node/dist/esm-cache.loader.mjs',
  context: {
    conditions: [ 'node', 'import', 'node-addons' ],
    importAttributes: [Object: null prototype] {},
    parentURL: 'data:'
  }
}

I don't have context what hot-hook is trying to do here. I don't think we're doing anything unexpected/unconventional when we register the esm loader?

https://github.com/tailwindlabs/tailwindcss/blob/next/packages/%40tailwindcss-node/src/index.ts#L17

I don't think we'll be able to work around this issue, I suggest it's best to reach out to the maintainers of this package instead to get this resolved. You may be able to patch the dependencies and prevent the custom ESM loader from being injected but this will mean that in dev mode, you can't make changes to any JS config files or plugins anymore, as we can't invalidate and reload these files anymore 🤔

Thank you, patching it worked. I have no need for js config or editing plugins at this stage, so for now. that's good enough. I will raise the issue with the adonis team in the meantime.