theme() — tailwindcss Function Reference

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

Function typescript OxideEngine Extractor calls 4 called by 3

Entity Profile

OxideEngine→ Extractor→ theme() — tailwindcss Function Reference

Dependency Diagram

graph TD
  a14450c0_b6d2_d918_cff3_c3396641b12d["theme()"]
  2189e39a_5595_cbd9_3bbe_eaf87ccf42a2["css-functions.ts"]
  a14450c0_b6d2_d918_cff3_c3396641b12d -->|defined in| 2189e39a_5595_cbd9_3bbe_eaf87ccf42a2
  d3d61624_a27e_43e1_2242_240e76a1e1c8["legacyTheme()"]
  d3d61624_a27e_43e1_2242_240e76a1e1c8 -->|calls| a14450c0_b6d2_d918_cff3_c3396641b12d
  9b965fd7_d8e9_0b43_cd5d_c9294ab598ed["buildDesignSystem()"]
  9b965fd7_d8e9_0b43_cd5d_c9294ab598ed -->|calls| a14450c0_b6d2_d918_cff3_c3396641b12d
  3970218d_3d6c_e455_87cc_45b4a094f0e9["parseCss()"]
  3970218d_3d6c_e455_87cc_45b4a094f0e9 -->|calls| a14450c0_b6d2_d918_cff3_c3396641b12d
  66319c06_7c38_f9ea_4bf0_2a0e18bac1a4["rule()"]
  a14450c0_b6d2_d918_cff3_c3396641b12d -->|calls| 66319c06_7c38_f9ea_4bf0_2a0e18bac1a4
  2d6c8361_96d8_df0d_ca51_c62f179fdc73["parse()"]
  a14450c0_b6d2_d918_cff3_c3396641b12d -->|calls| 2d6c8361_96d8_df0d_ca51_c62f179fdc73
  458bfcd1_938b_83be_3795_72dc8e839505["injectFallbackForInitialFallback()"]
  a14450c0_b6d2_d918_cff3_c3396641b12d -->|calls| 458bfcd1_938b_83be_3795_72dc8e839505
  e79308d2_473f_b6d6_3b04_e4e55c2708d3["toCss()"]
  a14450c0_b6d2_d918_cff3_c3396641b12d -->|calls| e79308d2_473f_b6d6_3b04_e4e55c2708d3
  style a14450c0_b6d2_d918_cff3_c3396641b12d 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
}