[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 https://github.com/tailwindlabs/tailwindcss/issues/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