Using a library to provide a Tailwind preset, with Vite and React

[sharky98]

Hello, before raising a bug, I was wondering if I am missing something. As inspiration, I used a 2021 blog post.

I have a library theme-framework, which export a tailwindPreset. This library is properly configured in the paths of tsconfig.base.json.

I have an application my-app, which configure Tailwind with both postcss.config.cjs and tailwind.config.ts at the root.

In tailwind.config.ts, I import my preset using import { tailwindPreset } from "theme-framework";. This is where it breaks.

First, I get Cannot find module 'theme-framework' or its corresponding type declarations.ts(2307) in the IDE. This one is easily sorted out by adding tailwind.config.ts to the includes of tsconfig.app.json.

But then, when I do the build I get an error where module theme-framework is nowhere to be found.

I am at a lost here. Any idea?

> nx run my-apps:build:development


[Nx Vite TsPaths] Found tsconfig at /workspace/tsconfig.base.json

[Nx Vite TsPaths] first parsed tsconfig:  {
  resultType: 'success',
  configFileAbsolutePath: '/workspace/tsconfig.base.json',
  baseUrl: '.',
  absoluteBaseUrl: '/workspace',
  paths: {
    'theme-framework': [ 'libs/theme-framework/src/index.ts' ]
  },
  addMatchAll: true
}

[Nx Vite TsPaths] Found tsconfig at /workspace/tsconfig.base.json

[Nx Vite TsPaths] fallback parsed tsconfig:  {
  resultType: 'success',
  configFileAbsolutePath: '/workspace/tsconfig.base.json',
  baseUrl: '.',
  absoluteBaseUrl: '/workspace',
  paths: {
    'theme-framework': [ 'libs/theme-framework/src/index.ts' ]
  },
  addMatchAll: true
}
vite v5.1.6 building for development...
✓ 3 modules transformed.
x Build failed in 215ms

 NX   [vite:css] [postcss] Cannot find module 'theme-framework'

Require stack:
- /workspace/apps/my-apps/tailwind.config.ts
file: /workspace/apps/my-apps/src/index.css:undefined:NaN

Error: [vite:css] [postcss] Cannot find module 'theme-framework'
Require stack:
- /workspace/apps/my-apps/tailwind.config.ts
file: /workspace/apps/my-apps/src/index.css:undefined:NaN
    at Module._resolveFilename (node:internal/modules/cjs/loader:1144:15)
    at Function.resolve (node:internal/modules/helpers:187:19)
    at _resolve (/workspace/node_modules/.pnpm/jiti@1.21.0/node_modules/jiti/dist/jiti.js:1:251148)
    at jiti (/workspace/node_modules/.pnpm/jiti@1.21.0/node_modules/jiti/dist/jiti.js:1:253746)
    at /workspace/apps/my-apps/tailwind.config.ts:1:158
    at evalModule (/workspace/node_modules/.pnpm/jiti@1.21.0/node_modules/jiti/dist/jiti.js:1:256443)
    at jiti (/workspace/node_modules/.pnpm/jiti@1.21.0/node_modules/jiti/dist/jiti.js:1:254371)
    at /workspace/node_modules/.pnpm/tailwindcss@3.4.1/node_modules/tailwindcss/lib/lib/load-config.js:48:30
    at loadConfig (/workspace/node_modules/.pnpm/tailwindcss@3.4.1/node_modules/tailwindcss/lib/lib/load-config.js:50:6)
    at getTailwindConfig (/workspace/node_modules/.pnpm/tailwindcss@3.4.1/node_modules/tailwindcss/lib/lib/setupTrackingContext.js:71:116)

————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————

 NX   Running target build for project my-apps failed

Failed tasks:

- my-apps:build:development

Hint: run the command with --verbose for more details.