How to do reference in monorepo

[istiuak-0]

I'm currently working on an NX monorepo on an Angular project.

Here I have a separate lib for my components, but all the CSS configs ( tailwind themes, custom utils, etc.) are in project libs. But now I want to use @apply in my components' CSS.

But I need to use @reference and set the path of my main CSS (where I set up all my CSS configs).

But the issue is that this component is in libs. It will be used by multiple apps .

And also note that I have a different theme setup for those projects.

Now, so far other devs who worked on this project used inline classes, which works, but I wanted to clean up the template a little bit.

What I need is a way to dynamically reference my main CSS file based on which project this component is used in. ( i need my global theme variables based on different projects and apply them & also there are some custom utilities i need to access them all ).

Is there any tailwind directive or any other way to do it?

@reference() /* how do i set path here,  need a dynamic path that will change based on which project is using that .*/
.label{
    @apply mb-1 block text-sm font-medium text-gray-400
}

Edit: now that i think about its not just an nx specific issue (nx might have some way to fix it) but on a normal pnpm workspace setup or other monorepo setup its kinda tricky.

if anyone knows any ticks or hacks to fix this let me know

[rozsazoltan]

Without knowing the specific structure, it’s not clear whether you’re using a UI package and want to integrate it into a project, or why @reference is needed.

Using @apply in module CSS is not recommended:

• Why stop using @apply

A dynamic path can be assigned to @reference using subpath imports:

• Use aliases for TailwindCSS @reference directive
• How to use @apply in Tailwind v4?

Related for monorepo TailwindCSS UI package with Project:

• All components from the UI package are included in the project's generated CSS, but I don't use every component

[istiuak-0]

root/
├── [root config files: nx.json, angular.json, package.json etc.]
│
├── apps/
│   ├── web1/
│   │   ├── src/
│   │   │   ├── app/
│   │   │   │   ├── app.component.ts
│   │   │   │   ├── app.component.html
│   │   │   │   ├── app.component.css      ← app-level styling
│   │   │   │   └── pages/
│   │   │   ├── assets/
│   │   │   ├── styles.css                 ← main style entry ( this contains some global themes and colors and global styles that I need in lib componets )
│   │   │   └── index.html
│   │   └── project.json
│   │
│   └── web2/                              ← (other apps)
│
├── libs/
│   └── common-components/
│       ├── src/
│       │   ├── filter/
│       │   │   ├── filter.component.ts
│       │   │   ├── filter.component.html
│       │   │   └── filter.component.css   ← Tailwind + scoped styles ( i want to access web-1 or other apps main CSS themes and apply style based on that)
│       │   │
│       │   ├── auth-form/
│       │   │   ├── auth-form.component.ts
│       │   │   ├── auth-form.component.html
│       │   │   └── auth-form.component.css
│       │   
│       └── project.json

This is my overall file structure.

[rozsazoltan]

I see, so you want to deliver a UI library named common-components, which can then be installed into the projects shipped within your monorepo.

First, I notice that you're using CSS modules, but that goes against TailwindCSS principles. The goal of TailwindCSS is to declare styles inline in HTML once, using utilities properly. If needed, the UI library should provide a global CSS file for its own configuration.

This custom configuration should be imported into each project using @import, after which it can be overridden on a per-project basis.

As for components, a similar pattern applies to what I described in the earlier monorepo question - how to map all or only the actually used components using @source.

Go through my earlier references to get an idea of what I mean by how things work, especially regarding avoiding the use of @apply (particularly in module CSS) and the connection between the project and the UI library in a monorepo setup. If you have questions, so we don't go in circles, we can move forward based on new questions that arise from those references - but I'd prefer not to repeat myself.

Some more related for monorepo scenario:

• All components from the UI package are included in the project's generated CSS, but I don't use every component
• https://discord.com/channels/486935104384532500/1436255793623339110/1436297535840063489
• https://discord.com/channels/486935104384532500/1428670670702907402/1428681108933050410
  • https://discord.com/channels/486935104384532500/1428670670702907402/1428732635412304033
• https://discord.com/channels/486935104384532500/1431402457275302219/1431614587207160000