How to include only used CSS vars from external libs

[hyperknot]

I'd like to use some presets from Open Props. If I do something like this:

@import "open-props/shadows";

@theme {
  --shadow-op3: var(--shadow-3);

it works, but the bundled CSS file will contain the full open-props file:

:where(html) {
--shadow-color: 220 3% 15%;
--shadow-strength: 1%;
--inner-shadow-highlight: inset 0 -.5px 0 0 #fff, inset 0 .5px 0 0 #0001;
--shadow-1: 0 1px 2px -1px hsl(var(--shadow-color) / calc(var(--shadow-strength)  + 9%));
--shadow-2: 0 3px 5px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength)  + 3%)), 0 7px 14px -5px hsl(var(--shadow-color) / calc(var(--shadow-strength)  + 5%));
--shadow-3: 0 -1px 3px 0 hsl(var(--shadow-color) / calc(var(--shadow-strength)  + 2%)), 0 1px 2px -5px hsl(var(--shadow-color) / calc(var(--shadow-strength)  + 2%)), 0 2px 5px -5px hsl(var(--shadow-color) / calc(var(--shadow-strength)  + 4%)), 0 4px 12px -5px hsl(var(--shadow-color) / calc(var(--shadow-strength)  + 5%)), 0 12px 15px -5px hsl(var(--shadow-color) / calc(var(--shadow-strength)  + 7%));
--shadow-4: 0 -2px 5px 0 hsl(var(--shadow-color) / calc(var(--shadow-strength)  + 2%)), 0 1px 1px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength)  + 3%)), 0 2px 2px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength)  + 3%)), 0 5px 5px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength)  + 4%)), 0 9px 9px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength)  + 5%)), 0 16px 16px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength)  + 6%));
--shadow-5: 0 -1px 2px 0 hsl(var(--shadow-color) / calc(var(--shadow-strength)  + 2%)), 0 2px 1px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength)  + 3%)), 0 5px 5px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength)  + 3%)), 0 10px 10px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength)  + 4%)), 0 20px 20px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength)  + 5%)), 0 40px 40px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength)  + 7%));
--shadow-6: 0 -1px 2px 0 hsl(var(--shadow-color) / calc(var(--shadow-strength)  + 2%)), 0 3px 2px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength)  + 3%)), 0 7px 5px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength)  + 3%)), 0 12px 10px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength)  + 4%)), 0 22px 18px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength)  + 5%)), 0 41px 33px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength)  + 6%)), 0 100px 80px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength)  + 7%));
--inner-shadow-0: inset 0 0 0 1px hsl(var(--shadow-color) / calc(var(--shadow-strength)  + 9%));
--inner-shadow-1: inset 0 1px 2px 0 hsl(var(--shadow-color) / calc(var(--shadow-strength)  + 9%)), var(--inner-shadow-highlight);
--inner-shadow-2: inset 0 1px 4px 0 hsl(var(--shadow-color) / calc(var(--shadow-strength)  + 9%)), var(--inner-shadow-highlight);
--inner-shadow-3: inset 0 2px 8px 0 hsl(var(--shadow-color) / calc(var(--shadow-strength)  + 9%)), var(--inner-shadow-highlight);
--inner-shadow-4: inset 0 2px 14px 0 hsl(var(--shadow-color) / calc(var(--shadow-strength)  + 9%)), var(--inner-shadow-highlight);
}

@media (prefers-color-scheme: dark) {
:where(html) {
  --shadow-color: 220 40% 2%;
  --shadow-strength: 25%;
  --inner-shadow-highlight: inset 0 -.5px 0 0 #fff1, inset 0 .5px 0 0 #0007;
}
}

I liked that theme.css always does some cleaning/compression and only bundles the actually used variables from my own code. It seems not to happen from externally imported code.

Is there any way to do this with externally imported code?

Or I'd need to use some kind of PostCSS cleaning plugin or something similar?

What works and is processed/cleaned is to copy-paste the content into theme.css. This way it intelligently selects only the used vars and it's dependencies.

Is this the best way? If so, is there a workflow which allows me to split theme.css into multiple files, and still keep this processing?

[psupra22]

Your options

1. Manual cherry-picking (best integration with Tailwind)
   Instead of importing Open Props directly, copy only the props you need into your @theme layer:

@theme {
  --shadow-op3: var(--shadow-3);
  --shadow-3: 0 -1px 3px 0 hsl(var(--shadow-color) / calc(var(--shadow-strength)  + 2%)),
              0 1px 2px -5px hsl(var(--shadow-color) / calc(var(--shadow-strength)  + 2%)),
              0 2px 5px -5px hsl(var(--shadow-color) / calc(var(--shadow-strength)  + 4%)),
              0 4px 12px -5px hsl(var(--shadow-color) / calc(var(--shadow-strength)  + 5%)),
              0 12px 15px -5px hsl(var(--shadow-color) / calc(var(--shadow-strength)  + 7%));
  --shadow-color: 220 3% 15%;
  --shadow-strength: 1%;
}

This gives you Tailwind’s automatic pruning & compression. But it means manually managing dependencies (--shadow-3 depends on --shadow-color and --shadow-strength).

2. Use Open Props’ ESM imports (smaller entry points)
   Open Props provides modular imports, you don’t need the full library:
   @import "open-props/shadows.min.css";
   or even more granular (if available in your setup):
   @import "open-props/shadows/shadow-3.css";
   This reduces how much CSS you ship. Still not pruned by Tailwind, you just rely on Open Props’ modularity.

3. PostCSS plugin for CSS var pruning
   You can run a PostCSS plugin (e.g. postcss-unused-vars, cssnano, or custom) after Tailwind to strip unused variables.
   Fully automated, no manual copy. More build complexity, and you must ensure dependencies aren’t accidentally removed.

4. Split theme.css into multiple files
   Yes, you can do this, Tailwind will still process & prune as long as the variables are inside @theme blocks. For example:

/* theme/colors.css */
@theme {
  --color-primary: #0070f3;
}

/* theme/shadows.css */
@theme {
  --shadow-op3: var(--shadow-3);
  --shadow-3: ...;
}

And then in your main CSS:

@import "./theme/colors.css";
@import "./theme/shadows.css";

Keeps things modular and still benefits from Tailwind’s pruning.

[hyperknot]

I went with 4. shadows.css with @theme on top, automatically pruned.

[psupra22]

Ok, glad to be of help.