Home / Function/ themeKey() — tailwindcss Function Reference

themeKey() — tailwindcss Function Reference

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

Function typescript OxideCore PreProcessors calls 3

Entity Profile

Dependency Diagram

graph TD
  b919f693_c5ab_4ea4_053f_8f9a39ca4199["themeKey()"]
  67d7a4a7_43e7_6396_2f54_c4a22ca2291b["prefixKey()"]
  b919f693_c5ab_4ea4_053f_8f9a39ca4199 -->|calls| 67d7a4a7_43e7_6396_2f54_c4a22ca2291b
  3e179907_5f92_f314_14dc_f61853c74cad["get()"]
  b919f693_c5ab_4ea4_053f_8f9a39ca4199 -->|calls| 3e179907_5f92_f314_14dc_f61853c74cad
  7cf1fe2b_69a4_05dc_ae13_d3eebe4e10fc["escape()"]
  b919f693_c5ab_4ea4_053f_8f9a39ca4199 -->|calls| 7cf1fe2b_69a4_05dc_ae13_d3eebe4e10fc
  style b919f693_c5ab_4ea4_053f_8f9a39ca4199 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}` : ''})`
  }

Domain

Subdomains

Calls

Source

Frequently Asked Questions

What does themeKey() do?
themeKey() is a function in the tailwindcss codebase.
What does themeKey() call?
themeKey() calls 3 function(s): escape, get, prefixKey.

Analyze Your Own Codebase

Get architecture documentation, dependency graphs, and domain analysis for your codebase in minutes.

Try Supermodel Free