themeKey() — tailwindcss Function Reference

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

Function typescript OxideEngine PreProcessors calls 3

Entity Profile

OxideEngine→ PreProcessors→ themeKey() — tailwindcss Function Reference

Dependency Diagram

graph TD
  93293d0f_8972_0a6a_eb24_f17846e7cfae["themeKey()"]
  734cf7ec_fb2a_2532_7b20_b3a815c7e3e6["Theme"]
  93293d0f_8972_0a6a_eb24_f17846e7cfae -->|defined in| 734cf7ec_fb2a_2532_7b20_b3a815c7e3e6
  21a2c14f_0801_6edc_2695_0f20586060e1["prefixKey()"]
  93293d0f_8972_0a6a_eb24_f17846e7cfae -->|calls| 21a2c14f_0801_6edc_2695_0f20586060e1
  378e03e8_d700_b258_53b3_5bd078db1e2b["get()"]
  93293d0f_8972_0a6a_eb24_f17846e7cfae -->|calls| 378e03e8_d700_b258_53b3_5bd078db1e2b
  433dc479_0296_0a89_fd12_79fc4ea2b8bd["escape()"]
  93293d0f_8972_0a6a_eb24_f17846e7cfae -->|calls| 433dc479_0296_0a89_fd12_79fc4ea2b8bd
  style 93293d0f_8972_0a6a_eb24_f17846e7cfae 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}` : ''})`
  }