v4 Functions and Directives not working with package imported styles

[mikestecker]

I'm working on building a component library package, similar to how DaisyUI is but I'm running into an issue when I import that into another package. I'm currently doing this in a monorepo setup, but I'd like to eventually publish these separate packages to NPM for use in other projects.

Here's an example setup:

1. I've generated a @mycompany/tokens package that exposes multiple "themes" as separate CSS files to use so they can be imported into each tailwind instance to apply styling. These mimic the same setup as Tailwind's default theme.

@theme static {
  --color-blue-100: oklch(0.932 0.032 255.585);
  --color-blue-200: oklch(0.882 0.057 254.128);
  --color-blue-300: oklch(0.809 0.096 251.813);
  --color-blue-400: oklch(0.714 0.143 254.624);
  --color-blue-500: oklch(0.623 0.188 259.815);
  ...etc
}

2. Component styles package @mycompany/styles exposes a styles.css file with some testing functions and directives in it:

@source "./components/*.css";

.btn {
  /* Base button styles */
  @apply text-white bg-blue-500 cursor-pointer inline-flex justify-center font-bold;
  padding-left: --spacing(4);
  padding-right: --spacing(4);
}

/* ...etc... */

3. Then, any project should be able to import the themes and this component CSS:

@import "tailwindcss";
@import "@mycompany/tokens/default/tokens.css";
@import "@mycompany/styles/styles.css";

However, I'm getting errors such as:

The --spacing(…) function requires that the --spacing theme variable exists, but it was not found.

Cannot apply unknown utility class: text-white

However, if I copy/paste the contents of the two imports shown above, put them in files local to the project CSS such as ./tokens.css and ./styles.css (exact same content as imported from the other packages in the monorepo), they render no problem.

The core of the issue seems to be that TW doesn't seem to extend it's functions and directives to module imports. It will import the CSS just fine from a module, but if I use any special @apply rules or functions such as --spacing(4), it will error. If I remove functions/directives like this from the module css, the classes come through and still import correctly.

How can I fix this?

[mikestecker]

I figured it out. I was double importing @import "@mycompany/tokens/default/tokens.css"; in the @mycompany/styles package and the tailwind install. When I removed this, it worked