Activating jit breaks font face import

Paalt commented 3 years ago

Version

@nuxtjs/tailwindcss: 4.0.1 nuxt: 2.15.3

Reproduction Link

Steps to reproduce

in nuxt.config.js: tailwindcss: { jit: true, },

in assets/css/tailwind.css

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
    @font-face {
        font-family: 'Archivo Black';
        font-weight: 400;
        src: url('~assets/fonts/ArchivoBlack-Regular.ttf') format('truetype');
    }
}

What is Expected?

That the font is loaded correctly

What is actually happening?

When running npm run dev , I get this error:

in ./assets/css/tailwind.css
friendly-errors 17:31:18

Module build failed (from ./node_modules/@nuxt/postcss8/node_modules/css-loader/dist/cjs.js): friendly-errors 17:31:18 Error: Can't resolve '_CSS_LOADER_URL_REPLACEMENT0' in '/Users/paltaulebrentebraten/Development/Professional/wright-admin/assets/css' at /Users/paltaulebrentebraten/Development/Professional/wright-admin/node_modules/enhanced-resolve/lib/Resolver.js:209:21 at /Users/paltaulebrentebraten/Development/Professional/wright-admin/node_modules/enhanced-resolve/lib/Resolver.js:285:5 at eval (eval at create (/Users/paltaulebrentebraten/Development/Professional/wright-admin/node_modules/tapable/lib/HookCodeFactory.js:33:10), :15:1) at /Users/paltaulebrentebraten/Development/Professional/wright-admin/node_modules/enhanced-resolve/lib/UnsafeCachePlugin.js:44:7 at /Users/paltaulebrentebraten/Development/Professional/wright-admin/node_modules/enhanced-resolve/lib/Resolver.js:285:5 at eval (eval at create (/Users/paltaulebrentebraten/Development/Professional/wright-admin/node_modules/tapable/lib/HookCodeFactory.js:33:10), :15:1) at /Users/paltaulebrentebraten/Development/Professional/wright-admin/node_modules/enhanced-resolve/lib/Resolver.js:285:5 at eval (eval at create (/Users/paltaulebrentebraten/Development/Professional/wright-admin/node_modules/tapable/lib/HookCodeFactory.js:33:10), :27:1) at /Users/paltaulebrentebraten/Development/Professional/wright-admin/node_modules/enhanced-resolve/lib/DescriptionFilePlugin.js:67:43 at /Users/paltaulebrentebraten/Development/Professional/wright-admin/node_modules/enhanced-resolve/lib/Resolver.js:285:5 at eval (eval at create (/Users/paltaulebrentebraten/Development/Professional/wright-admin/node_modules/tapable/lib/HookCodeFactory.js:33:10), :43:1) at /Users/paltaulebrentebraten/Development/Professional/wright-admin/node_modules/enhanced-resolve/lib/ModuleKindPlugin.js:30:40 at /Users/paltaulebrentebraten/Development/Professional/wright-admin/node_modules/enhanced-resolve/lib/Resolver.js:285:5 at eval (eval at create (/Users/paltaulebrentebraten/Development/Professional/wright-admin/node_modules/tapable/lib/HookCodeFactory.js:33:10), :15:1) at /Users/paltaulebrentebraten/Development/Professional/wright-admin/node_modules/enhanced-resolve/lib/Resolver.js:285:5 at eval (eval at create (/Users/paltaulebrentebraten/Development/Professional/wright-admin/node_modules/tapable/lib/HookCodeFactory.js:33:10), :16:1) friendly-errors 17:31:18 @ ./assets/css/tailwind.css 4:14-221 15:3-20:5 16:22-229 @ ./.nuxt/App.js @ ./.nuxt/index.js @ ./.nuxt/client.js @ multi ./node_modules/eventsource-polyfill/dist/browserify-eventsource.js (webpack)-hot-middleware/client.js?reload=true&timeout=30000&ansiColors=&overlayStyles=&path=%2F__webpack_hmr%2Fclient&name=client ./.nuxt/client.js

Setting jit to false resolves the problem. Figured this is something to do with the nuxt module and not related to tailwind/jit

mattatcubix commented 3 years ago

The issue is with JIT and has been fixed in the latest version. See https://github.com/tailwindlabs/tailwindcss-jit/issues/23

stale[bot] commented 3 years ago

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

nuxt-modules / tailwindcss