tailwindcss Architecture Docs
Home / Class/ Theme Class — tailwindcss Architecture

Theme Class — tailwindcss Architecture

Architecture documentation for the Theme class in theme.ts from the tailwindcss codebase.

Class typescript Oxide

Entity Profile

Dependency Diagram

graph TD
  e7a2e966_188e_28f5_d9d6_e54e27e0d0f2["Theme"]
  e28cd4a7_4e1a_e79b_76f1_86c479c6640d["theme.ts"]
  e7a2e966_188e_28f5_d9d6_e54e27e0d0f2 -->|defined in| e28cd4a7_4e1a_e79b_76f1_86c479c6640d
  408d8ad4_6d93_993a_810f_8a7eba386e12["constructor()"]
  e7a2e966_188e_28f5_d9d6_e54e27e0d0f2 -->|method| 408d8ad4_6d93_993a_810f_8a7eba386e12
  c766bdc8_b4cb_915b_c8ea_d983d395a3a4["size()"]
  e7a2e966_188e_28f5_d9d6_e54e27e0d0f2 -->|method| c766bdc8_b4cb_915b_c8ea_d983d395a3a4
  e7db6358_7af5_e4b2_792d_749691a304cc["add()"]
  e7a2e966_188e_28f5_d9d6_e54e27e0d0f2 -->|method| e7db6358_7af5_e4b2_792d_749691a304cc
  e92f4f42_1861_fe27_1d37_feb4a5f1e9ad["keysInNamespaces()"]
  e7a2e966_188e_28f5_d9d6_e54e27e0d0f2 -->|method| e92f4f42_1861_fe27_1d37_feb4a5f1e9ad
  c6703f6a_b776_5326_6e96_8faaab8a851f["get()"]
  e7a2e966_188e_28f5_d9d6_e54e27e0d0f2 -->|method| c6703f6a_b776_5326_6e96_8faaab8a851f
  83e4da67_668a_2a3c_0974_1ee12d26f5ef["hasDefault()"]
  e7a2e966_188e_28f5_d9d6_e54e27e0d0f2 -->|method| 83e4da67_668a_2a3c_0974_1ee12d26f5ef
  45cb4617_2116_e947_4a90_d9e2642b9325["getOptions()"]
  e7a2e966_188e_28f5_d9d6_e54e27e0d0f2 -->|method| 45cb4617_2116_e947_4a90_d9e2642b9325
  333e8e98_491a_3493_516c_169c024de8d8["entries()"]
  e7a2e966_188e_28f5_d9d6_e54e27e0d0f2 -->|method| 333e8e98_491a_3493_516c_169c024de8d8
  7d80bf29_fbd8_157c_53c6_1be9105005cc["prefixKey()"]
  e7a2e966_188e_28f5_d9d6_e54e27e0d0f2 -->|method| 7d80bf29_fbd8_157c_53c6_1be9105005cc
  f57da9b2_7570_6ad4_eb26_4ab605e09971["key()"]
  e7a2e966_188e_28f5_d9d6_e54e27e0d0f2 -->|method| f57da9b2_7570_6ad4_eb26_4ab605e09971
  13c79f13_36f5_873e_8a2a_7d72eb200030["clearNamespace()"]
  e7a2e966_188e_28f5_d9d6_e54e27e0d0f2 -->|method| 13c79f13_36f5_873e_8a2a_7d72eb200030
  4dd03b32_d6c0_17e9_28a2_23655bd4448e["candidateValue()"]
  e7a2e966_188e_28f5_d9d6_e54e27e0d0f2 -->|method| 4dd03b32_d6c0_17e9_28a2_23655bd4448e
  86530d3b_8bf7_83f5_43db_f717b3ab4ece["themeKey()"]
  e7a2e966_188e_28f5_d9d6_e54e27e0d0f2 -->|method| 86530d3b_8bf7_83f5_43db_f717b3ab4ece

Relationship Graph

Source Code

packages/tailwindcss/src/theme.ts lines 41–302

export class Theme {
  public prefix: string | null = null

  constructor(
    private values = new Map<
      string,
      {
        value: string
        options: ThemeOptions
        src: Declaration['src']
      }
    >(),
    private keyframes = new Set<AtRule>([]),
  ) {}

  get size() {
    return this.values.size
  }

  add(key: string, value: string, options = ThemeOptions.NONE, src?: Declaration['src']): void {
    if (key.endsWith('-*')) {
      if (value !== 'initial') {
        throw new Error(`Invalid theme value \`${value}\` for namespace \`${key}\``)
      }
      if (key === '--*') {
        this.values.clear()
      } else {
        this.clearNamespace(
          key.slice(0, -2),
          // `--${key}-*: initial;` should clear _all_ theme values
          ThemeOptions.NONE,
        )
      }
    }

    if (options & ThemeOptions.DEFAULT) {
      let existing = this.values.get(key)
      if (existing && !(existing.options & ThemeOptions.DEFAULT)) return
    }

    if (value === 'initial') {
      this.values.delete(key)
    } else {
      this.values.set(key, { value, options, src })
    }
  }

  keysInNamespaces(themeKeys: Iterable<ThemeKey>): string[] {
    let keys: string[] = []

    for (let namespace of themeKeys) {
      let prefix = `${namespace}-`

      for (let key of this.values.keys()) {
        if (!key.startsWith(prefix)) continue

        if (key.indexOf('--', 2) !== -1) continue

        if (isIgnoredThemeKey(key as ThemeKey, namespace)) {
          continue
        }

        keys.push(key.slice(prefix.length))
      }
    }

    return keys
  }

  get(themeKeys: ThemeKey[]): string | null {
    for (let key of themeKeys) {
      let value = this.values.get(key)
      if (value) {
        return value.value
      }
    }

    return null
  }

  hasDefault(key: string): boolean {

Domain

Defined In

Source

Frequently Asked Questions

What is the Theme class?
Theme is a class in the tailwindcss codebase, defined in packages/tailwindcss/src/theme.ts.
Where is Theme defined?
Theme is defined in packages/tailwindcss/src/theme.ts at line 41.

Analyze Your Own Codebase

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

Try Supermodel Free