Images not working with url()

[pbougie]

What version of @tailwindcss/jit are you using?

0.1.5

What version of Node.js are you using?

12.21.0

What browser are you using?

Firefox Nightly

What operating system are you using?

macOS

Reproduction repository

n/a

The following CSS works fine when using Tailwind without JIT.

@layer utilities {
  .bg-logo-white {
    background-image: url("../images/logotype-white.svg");
  }
  .bg-logo-black {
    background-image: url("../images/logotype-black.svg");
  }
}

As soon as I switch to Tailwind JIT by modifying postcss.config.js from "tailwindcss" to "@tailwindcss/jit":

module.exports = {
  plugins: {
    "postcss-import": {},
    "@tailwindcss/jit": {},
    autoprefixer: {},
  }
}

I get the following error:

Module build failed (from ../opt/node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ../opt/node_modules/css-loader/dist/cjs.js):
Error: Can't resolve '___CSS_LOADER_URL_REPLACEMENT_0___' in '/app/app/packs/entrypoints'
    at finishWithoutResolve (/opt/node_modules/enhanced-resolve/lib/Resolver.js:293:18)
    at /opt/node_modules/enhanced-resolve/lib/Resolver.js:362:15
    at /opt/node_modules/enhanced-resolve/lib/Resolver.js:410:5
    at eval (eval at create (/opt/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:14:1)
    at /opt/node_modules/enhanced-resolve/lib/Resolver.js:410:5
    at eval (eval at create (/opt/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:25:1)
    at /opt/node_modules/enhanced-resolve/lib/DescriptionFilePlugin.js:87:43
    at /opt/node_modules/enhanced-resolve/lib/Resolver.js:410:5
    at eval (eval at create (/opt/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:13:1)
    at /opt/node_modules/enhanced-resolve/lib/Resolver.js:410:5
    at processResult (/opt/node_modules/webpack/lib/NormalModule.js:674:19)
    at /opt/node_modules/webpack/lib/NormalModule.js:768:5
    at /opt/node_modules/loader-runner/lib/LoaderRunner.js:399:11
    at /opt/node_modules/loader-runner/lib/LoaderRunner.js:251:18
    at context.callback (/opt/node_modules/loader-runner/lib/LoaderRunner.js:124:13)
    at Object.loader (/opt/node_modules/css-loader/dist/index.js:154:5)
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (internal/process/task_queues.js:97:5)

1 ERROR in child compilations (Use 'stats.children: true' resp. '--stats-children' for more details)

FYI This is a Rails 6.1 + Webpacker 6.beta project.

[adamwathan]

Hey! Happy to help but you gotta give me a reproduction repository, it's definitely not "n/a" in this case :)

[brentarcane]

This is caused by referencing an asset using a relative path. Using an absolute path to your background images should fix it, like this:

background-image: url("/images/logotype-white.svg");

This remains an issue for those of us that need to use relative pathing. See #50

[adamwathan]

Fixed in v0.1.7 🥳

[brentarcane]

Dear @adamwathan,

I love you.

Kind regards,
Brent

[adamwathan]

Haha thank @thecrypticace for this one, hero of the day 🙌🏻

[pbougie]

This works great. Thank you.