theme() — tailwindcss Function Reference

Architecture documentation for the theme() function in css-functions.ts from the tailwindcss codebase.

Function typescript OxideCore Extractor calls 4 called by 3

Entity Profile

OxideCore→ Extractor→ theme() — tailwindcss Function Reference

Dependency Diagram

graph TD
  957946b3_94ca_8f71_30eb_76a6281c51df["theme()"]
  b125fc67_5678_0420_003d_bf5a2aefd749["legacyTheme()"]
  b125fc67_5678_0420_003d_bf5a2aefd749 -->|calls| 957946b3_94ca_8f71_30eb_76a6281c51df
  c58d3214_88d6_f4fc_257f_8e84def5b24f["buildDesignSystem()"]
  c58d3214_88d6_f4fc_257f_8e84def5b24f -->|calls| 957946b3_94ca_8f71_30eb_76a6281c51df
  95cb326e_6b59_0903_0c96_d221fca5c2b1["parseCss()"]
  95cb326e_6b59_0903_0c96_d221fca5c2b1 -->|calls| 957946b3_94ca_8f71_30eb_76a6281c51df
  f4f92a3d_c13e_a751_8402_451ffa4c772f["rule()"]
  957946b3_94ca_8f71_30eb_76a6281c51df -->|calls| f4f92a3d_c13e_a751_8402_451ffa4c772f
  e5eb2faf_45a2_ac47_3404_8bd4e7eb6817["parse()"]
  957946b3_94ca_8f71_30eb_76a6281c51df -->|calls| e5eb2faf_45a2_ac47_3404_8bd4e7eb6817
  e2634a65_26cb_6344_621a_73314f88e232["injectFallbackForInitialFallback()"]
  957946b3_94ca_8f71_30eb_76a6281c51df -->|calls| e2634a65_26cb_6344_621a_73314f88e232
  c57928e0_95f9_bd68_c036_1186e1a4d345["toCss()"]
  957946b3_94ca_8f71_30eb_76a6281c51df -->|calls| c57928e0_95f9_bd68_c036_1186e1a4d345
  style 957946b3_94ca_8f71_30eb_76a6281c51df fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/tailwindcss/src/css-functions.ts lines 68–127

function theme(
  designSystem: DesignSystem,
  source: AstNode,
  path: string,
  ...fallback: string[]
): string {
  if (!path.startsWith('--')) {
    throw new Error(`The --theme(…) function can only be used with CSS variables from your theme.`)
  }

  let inline = false

  // Handle `--theme(… inline)` to force inline resolution
  if (path.endsWith(' inline')) {
    inline = true
    path = path.slice(0, -7)
  }

  // If the `--theme(…)` function is used within an at-rule (e.g. `@media (width >= --theme(…)))`,
  // we have to always inline the result since CSS does not support CSS variables in these positions
  if (source.kind === 'at-rule') {
    inline = true
  }

  let resolvedValue = designSystem.resolveThemeValue(path, inline)

  if (!resolvedValue) {
    if (fallback.length > 0) return fallback.join(', ')
    throw new Error(
      `Could not resolve value for theme function: \`theme(${path})\`. Consider checking if the variable name is correct or provide a fallback value to silence this error.`,
    )
  }

  if (fallback.length === 0) {
    return resolvedValue
  }

  let joinedFallback = fallback.join(', ')
  if (joinedFallback === 'initial') return resolvedValue

  // When the resolved value returns `initial`, resolve with the fallback value
  if (resolvedValue === 'initial') return joinedFallback

  // Inject the fallback of a `--theme(…)` function into the fallback of a referenced `--theme(…)`
  // function or `var(…)` declaration. If the referenced function already defines a fallback, we use
  // a potential fallback value of `initial` in the referenced function to determine if we should
  // inject the fallback value of the caller. If that's not the case, we keep the fallback as-is
  // (this is needed for theme variables in reference-mode).
  if (
    resolvedValue.startsWith('var(') ||
    resolvedValue.startsWith('theme(') ||
    resolvedValue.startsWith('--theme(')
  ) {
    let valueAst = ValueParser.parse(resolvedValue)
    injectFallbackForInitialFallback(valueAst, joinedFallback)
    return ValueParser.toCss(valueAst)
  }

  return resolvedValue
}