Tailwind CSS v4 not applying styles from component library in monorepo (React + TS + Vite)

[DavidRodriguezSilva]

Hello everyone,

I’m currently migrating a monorepo to Tailwind CSS v4 and I’m struggling with getting styles from a shared React component library (built with TypeScript + Vite + Tailwind) to work in the consuming app.

Context

• Monorepo setup:

  • /Common/Cesione.Common.React.Library → shared React component library (TS, compiled with tsc).
  • /Sistema/Cesione.Sistema.Tenant.React → app consuming the library (React + Vite).

• What I want:
  When the app imports components from the library, all Tailwind utility classes and custom tokens (@theme, @custom-variant) should be applied.

What I did (based on [this resolved issue](#18758)):

1. Removed @import "tailwindcss"; and @import "tw-animate-css"; from the library’s CSS.

   • Now only the consumer app has these imports.

2. Library src/styles/index.css looks like this:

   @import "./colors.css";
   @import "./config.css";
   
   /* Added to scan library files */
   @source "../**/*.{ts,tsx,js,jsx}";

3. In the app (Sistema/src/styles/index.css):

   @import "tailwindcss";
   @import "tw-animate-css";
   
   @import "cesione.common.react.library/styles/index.css";

4. In common/package.json I export the styles like this:

   "files": ["dist", "styles"],
   "exports": {
     ".": {
       "import": "./dist/index.js",
       "require": "./dist/index.js"
     },
     "./styles/*": "./dist/styles/*"
   }

5. Verified that dist/styles/index.css is shipped correctly after build (tsc && cpy).

The issue

• When rendering a component from the library in the app, no Tailwind utilities apply.

• Example:

  <Card className="bg-red-500 min-h-12 min-w-full" />
  <PaginaInicio /> {/* component from common */}

  • The bg-red-500 is ignored, and library-specific classes like bg-card or text-gray also don’t work.
  • The page renders unstyled, almost plain HTML.

• I can see the styles/ folder exported, but I can’t get Tailwind to actually compile the classes from the library into the consumer app’s build.

What I tried

• Different @source paths (../dist, ../src, ../**/*).
• Adjusting package.json exports ("./styles/index.css", "./styles/*", "./styles").
• Importing styles as "cesione.common.react.library/styles" vs "cesione.common.react.library/styles/index.css".
• Rebuilding library and reinstalling consumer node_modules.

Question

👉 What am I missing to make Tailwind v4 pick up and compile the classes from my component library correctly?

• Do I need to change how I expose the CSS in the library?
• Or should the @source paths be written differently for node_modules context?
• Is there an example of a working setup for monorepo + library + Tailwind v4 where components in a node_modules package are scanned?

[wongjn]

Consider providing a git repo that reproduces the issue (can be a trimmed down version) and we can take a look for you.

[DavidRodriguezSilva]

Hi,

Thanks for your reply! I’ve created a minimal repo that reproduces the issue https://github.com/DavidRodriguezSilva/cesione-prueba

This repo is an extract of my real monorepo, but isolated so it’s easier to debug. It contains:

• common/ → the shared component library (React + TS, built with tsc)
• sistema/ → the consuming app (React + Vite + Tailwind v4)

Current behavior:

• Components from common render, but none of the Tailwind classes are applied (both built-in utilities like bg-red-500 and custom tokens like bg-card).
• The app shows plain unstyled HTML.

What I tried:

• Removed @import "tailwindcss"; from the library CSS.
• Added @source directives pointing to the library (../dist, ../src, etc.).
• Exported the library CSS via package.json ("./styles/*": "./dist/styles/*").
• Imported @import "cesione.common.react.library/styles/index.css"; in the app’s stylesheet.
• Rebuilt the library, reinstalled node_modules.

Expected behavior:

• Tailwind should pick up and compile utility classes from the common package when used in the app.

Additional context:

Previously, on Tailwind v3, we had to explicitly configure the consumer app’s tailwind.config.js with the library path in content, otherwise classes from the library were not included. For example:

/** @type {import('tailwindcss').Config} */
import tailwindcssAnimate from "tailwindcss-animate"

const config = {
  darkMode: ["class"],
  content: [
    "./index.html",
    "./src/**/*.{ts,tsx,js,jsx}",
    "./node_modules/cesione.common.react.library/dist/**/*.{ts,tsx,js,jsx}",
  ],
  plugins: [tailwindcssAnimate],
}
export default config

In v4 I expected @source inside the library CSS to solve this automatically, but so far it hasn’t worked.

Any hints on what I might be missing would be greatly appreciated

I apologize in advance if I’ve overlooked something obvious — I’m a bit tired and might have missed a silly detail.

[wongjn]

The serif font immediately clues me in that you haven't actually imported the CSS into the app code for the consumer. So, you should add:

import './styles/index.css';

To src/main.tsx or src/App.tsx. This will mean the CSS file would actually be loaded and processed with Tailwind. However, when doing this, we get:

[plugin:@tailwindcss/vite:generate:serve] Package path ./styles/index.css is not exported from package /home/justin/projects/test/Sistema/Cesione.Sistema.Tenant.React/node_modules/cesione.common.react.library (see exports field in /home/justin/projects/test/Sistema/Cesione.Sistema.Tenant.React/node_modules/cesione.common.react.library/package.json)

This shows the CSS is now processed, but there is a packaging error. This is because we should use the style key, not import key for CSS files. So in cesione.common.react.library/package.json:

   "./styles": {
-    "import": "./dist/styles/index.css"
+    "style": "./dist/styles/index.css"
   },
   "./styles/*": {
-    "import": "./dist/styles/*"
+    "style": "./dist/styles/*"
   }
 },

Or directly map to the files instead without a subkey:

     },
-    "./styles": {
-      "import": "./dist/styles/index.css"
-    },
-    "./styles/*": {
-      "import": "./dist/styles/*"
-    }
+    "./styles": "./dist/styles/index.css",
+    "./styles/*": "./dist/styles/*"
   },

[DavidRodriguezSilva]

Thank you very much, you were right, the settings you gave me were correct. Many thanks again, and sorry for the inconvenience.