Working with shared components and config in a monorepo?

[leo-petrucci]

I have several monorepos that use Tailwind v3. All these usually have a shared component library that each app imports from as well as a shared Tailwind configuration. The setup looks a bit like this:

apps
  website
    tailwind.config.ts // this imports and exports the shared tailwind config
packages
  tailwind
    tailwind.config.ts // this contains the config
  components // these are shadcn components for the most part
    button.tsx
    input.tsx

My shared config looks like this:

const config = {
  darkMode: ["class"],
  content: [
    // this finds classes in the project 
    "src/**/*.{ts,tsx}",
    "components/**/*.{ts,tsx}",
    // this finds classes in the shared components
    "../../packages/ui/src/components/**/*.{ts,tsx}",
  ],
}

export default config;

How can I replicate this in v4?

I tried something like this:

apps
  website
    tailwind.css
packages
  tailwind
    tailwind.css
  components
    button.tsx
    input.tsx

Where the shared tailwind.css contains all the Shadcn configuration:

@import "tailwindcss";
@import "tw-animate-css";

@custom-variant dark (&:is(.dark *));

:root {
// vars here
}

And then importing this from my main.tsx

import "@project/tailwind/tailwind.css";

But it doesn't seem to work.

Any ideas? Used to be really easy with import/export but feels like black magic now that it's all CSS.
I'd even just take a way to share my custom ShadCN variables to be honest, so I don't have to copy and paste them in every app.

[wongjn]

In the shared tailwind.css that contains all the Shadcn configuration, try adding appropriate @source directives. Also, consider checking the consumer .gitignore paths are anchored with a starting slash, if they can be anchored so.

[leo-petrucci]

So I've been able to just separate the Shadcn config into its own file and import that with

@import "../../../packages/tailwind/variables.css";

This only seems to work only if I specify the path of the shared components in the app's css though:

@source "../../../packages/components";

It's good enough, but if there's any better ways to do it I'd love to hear it.

[amritk]

What does your variables.css look like if you don't mind?