[v4]: Inlining Semantic Color Tokens

[gavar]

I'm trying to apply semantic color variables following Material 3 best practices. My goal is to define reusable color swatches that can later be mapped to semantic tokens.

I attempted to define @theme inline with color swatches to temporarily hold shades of a color. Here’s my current config:

/* Swatch */
@theme inline {
  /* Primary */
  --color-p-10: #001b3d;
  --color-p-20: #003063;
  --color-p-30: #00468b;
  --color-p-40: #005db6;
  --color-p-50: #3481e5;
  --color-p-60: #4891f6;
  --color-p-70: #79acff;
  --color-p-80: #a9c7ff;
  --color-p-90: #d6e3ff;
  --color-p-95: #ecf0ff;
  --color-p-99: #fdfbff;
}

/* Light */
@theme {
  --color-primary: var(--color-p-50);
  --color-on-primary: var(--color-white);
  --color-primary-container: var(--color-p-90);
  --color-on-primary-container: var(--color-p-10);
}

However, this approach results in semantic tokens referencing variables instead of inlining their actual values.

Expected Output:

    --color-primary: #3481e5;
    --color-on-primary: #fff;
    --color-primary-container:  #d6e3ff;
    --color-on-primary-container: #001b3d;

Actual Output:

    --color-primary: var(--color-p-50);
    --color-on-primary: var(--color-white);
    --color-primary-container: var(--color-p-90);
    --color-on-primary-container: var(--color-p-10)

What’s the recommended way to structure my Tailwind config so that I can inline the swatch values directly into semantic tokens without generating extra CSS variables for the swatches?

[wongjn]

Have the second @theme block also be inline and use Tailwind's proprietary theme() function instead of var(): https://play.tailwindcss.com/CYrPYFbYnl?file=css

[gavar]

That's perfect, theme() is exactly what I was looking for, thank you!

here's my final solution, I've been looking to keep semantic tokens as properties to easily switch between light/dark themes:

@import "tailwindcss";

@theme inline {
  /* Primary */
  --color-p-10: #001b3d;
  --color-p-20: #003063;
  --color-p-30: #00468b;
  --color-p-40: #005db6;
  --color-p-50: #3481e5;
  --color-p-60: #4891f6;
  --color-p-70: #79acff;
  --color-p-80: #a9c7ff;
  --color-p-90: #d6e3ff;
  --color-p-95: #ecf0ff;
  --color-p-99: #fdfbff;
}

@theme {
  /* Light */
  --color-primary: theme(--color-p-50);
  --color-on-primary: theme(--color-white);
  --color-primary-container: theme(--color-p-90);
  --color-on-primary-container: theme(--color-p-10);
}