Unable to import stylesheet from an npm package

[RobinClowers]

What version of Tailwind CSS are you using?

For example: v4.1.5

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

Next.js 15.3.1

What version of Node.js are you using?

For example: v22.13.0

What browser are you using?

For example: Firefox

What operating system are you using?

For example: macOS

Reproduction URL

https://github.com/RobinClowers/tailwind-import-error

Describe your issue

When I try to import a css file from an npm package, I get a build error

/* app.css */
@import "@blocknote/core/style.css" layer(components);

$ npm run dev

Error: Package path ./style.css is not exported from package /Users/robin/src/tailwind-import-error/node_modules/@blocknote/core (see exports field in /Users/robin/src/tailwind-import-error/node_modules/@blocknote/core/package.json)
    [at /Users/robin/src/tailwind-import-error/node_modules/enhanced-resolve/lib/ExportsFieldPlugin.js:117:7]
    [at Hook.eval [as callAsync] (eval at create (/Users/robin/src/tailwind-import-error/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:22:1)]
    [at Resolver.doResolve (/Users/robin/src/tailwind-import-error/node_modules/enhanced-resolve/lib/Resolver.js:715:16)]
    [at /Users/robin/src/tailwind-import-error/node_modules/enhanced-resolve/lib/DescriptionFilePlugin.js:76:17]
    [at /Users/robin/src/tailwind-import-error/node_modules/enhanced-resolve/lib/DescriptionFileUtils.js:148:13]
    [at /Users/robin/src/tailwind-import-error/node_modules/enhanced-resolve/lib/forEachBail.js:39:13]
    [at onJson (/Users/robin/src/tailwind-import-error/node_modules/enhanced-resolve/lib/DescriptionFileUtils.js:133:6)]
    [at /Users/robin/src/tailwind-import-error/node_modules/enhanced-resolve/lib/DescriptionFileUtils.js:86:7]
    [at SyncAsyncFileSystemDecorator.readJson (/Users/robin/src/tailwind-import-error/node_modules/enhanced-resolve/lib/SyncAsyncFileSystemDecorator.js:172:6)]
    [at /Users/robin/src/tailwind-import-error/node_modules/enhanced-resolve/lib/DescriptionFileUtils.js:67:26]

export section of @blocknote/core pacakge.json

  "exports": {
    ".": {
      "types": "./types/src/index.d.ts",
      "import": "./dist/blocknote.js",
      "require": "./dist/blocknote.cjs"
    },
    "./style.css": {
      "import": "./dist/style.css",
      "require": "./dist/style.css"
    },
    "./fonts/inter.css": {
      "import": "./src/fonts/inter.css",
      "require": "./src/fonts/inter.css"
    },
    "./comments": {
      "types": "./types/src/comments/index.d.ts",
      "import": "./dist/comments.js",
      "require": "./dist/comments.cjs"
    }
  }

[RobinMalfait]

Hey!

For exposing CSS files you should either either use the style key:
https://app.unpkg.com/[email protected]/files/package.json#L16

Or use the file directly instead of using import / require:
https://app.unpkg.com/[email protected]/files/package.json#L53

If @blocknote/core is not your own package, I would recommend to open an issue or PR over there.

Hope this helps!

[RobinClowers]

@RobinMalfait thanks for the quick response! TIL I learned about style exports, I didn't realize that was a thing.