tailwindcss Architecture Docs
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 CompilerEngine AstTransformation calls 3

Entity Profile

Dependency Diagram

graph TD
  63d678ab_e176_afe3_714c_c0d55120dc20["themeKey()"]
  fd0b3d51_296f_d8dc_755c_ae2bc21124e9["prefixKey()"]
  63d678ab_e176_afe3_714c_c0d55120dc20 -->|calls| fd0b3d51_296f_d8dc_755c_ae2bc21124e9
  060c1795_30ba_0381_42f1_be224df086e8["get()"]
  63d678ab_e176_afe3_714c_c0d55120dc20 -->|calls| 060c1795_30ba_0381_42f1_be224df086e8
  22e232f7_919c_8490_d3d0_2af2fca034d5["escape()"]
  63d678ab_e176_afe3_714c_c0d55120dc20 -->|calls| 22e232f7_919c_8490_d3d0_2af2fca034d5
  style 63d678ab_e176_afe3_714c_c0d55120dc20 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