themeKey() — tailwindcss Function Reference

Architecture documentation for the themeKey() function in theme.ts from the tailwindcss codebase.

Function typescript Oxide Extractor calls 3

Entity Profile

Oxide→ Extractor→ themeKey() — tailwindcss Function Reference

Dependency Diagram

graph TD
  86530d3b_8bf7_83f5_43db_f717b3ab4ece["themeKey()"]
  e7a2e966_188e_28f5_d9d6_e54e27e0d0f2["Theme"]
  86530d3b_8bf7_83f5_43db_f717b3ab4ece -->|defined in| e7a2e966_188e_28f5_d9d6_e54e27e0d0f2
  7d80bf29_fbd8_157c_53c6_1be9105005cc["prefixKey()"]
  86530d3b_8bf7_83f5_43db_f717b3ab4ece -->|calls| 7d80bf29_fbd8_157c_53c6_1be9105005cc
  c6703f6a_b776_5326_6e96_8faaab8a851f["get()"]
  86530d3b_8bf7_83f5_43db_f717b3ab4ece -->|calls| c6703f6a_b776_5326_6e96_8faaab8a851f
  3330a25c_8114_660c_a3c7_8f1aaa37457d["escape()"]
  86530d3b_8bf7_83f5_43db_f717b3ab4ece -->|calls| 3330a25c_8114_660c_a3c7_8f1aaa37457d
  style 86530d3b_8bf7_83f5_43db_f717b3ab4ece fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/tailwindcss/src/theme.ts lines 193–208

  #var(themeKey: string) {
    let value = this.values.get(themeKey)
    if (!value) {
      return null
    }

    // Since @theme blocks in reference mode do not emit the CSS variables, we can not assume that
    // the values will eventually be set up in the browser (e.g. when using `@apply` inside roots
    // that use `@reference`). Ensure we set up a fallback in these cases.
    let fallback = null
    if (value.options & ThemeOptions.REFERENCE) {
      fallback = value.value
    }

    return `var(${escape(this.prefixKey(themeKey))}${fallback ? `, ${fallback}` : ''})`
  }