[v4] Use of @theme and @theme inline

[severinlandolt]

Hi! I have a question regarding a css stylesheet.

In my current version, I am using @theme inline for everything:

@import "tailwindcss";

:root {
  --ds-gray-100: oklch(0.961 0 0);
}

.dark {
  --ds-gray-100: oklch(0.218 0 0);
}

@theme inline {
  --radius-*: initial;
  --spacing: 0.25rem;
  --animation-delay-0: 0ms;

  --color-gray-100: var(--ds-gray-100);
}

Is this a OK practice? Or should I split the theming into both, @theme and @theme inline? → Only use @theme inline when css variables are referenced?

@import "tailwindcss";

:root {
  --ds-gray-100: oklch(0.961 0 0);
}

.dark {
  --ds-gray-100: oklch(0.218 0 0);
}

@theme {
  --radius-*: initial;
  --spacing: 0.25rem;
  --animation-delay-0: 0ms;
}

@theme inline {
  --color-gray-100: var(--ds-gray-100);
}

Thanks for any hints!

[adamwathan]

Hey! The main difference is in the output of utilities that are derived from the theme values. If you use inline, the actual value of the theme variable is inlined into the utility, instead of referencing a variable:

/* Input */
@import "tailwindcss";

@theme {
  --color-potato: #d2a062;
}

/* Output */
:root, :host {
  --color-potato: #d2a062;
}

.bg-potato {
  background-color: var(--color-potato);
}

Here's the same thing with inline:

/* Input */
@import "tailwindcss";

@theme inline {
  --color-potato: #d2a062;
}

/* Output */
:root, :host {
  --color-potato: #d2a062;
}

.bg-potato {
  background-color: #d2a062;
}

You can always use inline if you want but in my mind it's more idiomatic in v4 for the actual generated CSS to reference your theme variables. I would personally only use inline when things don't work without it 👍