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 OxideEngine

Entity Profile

Dependency Diagram

graph TD
  734cf7ec_fb2a_2532_7b20_b3a815c7e3e6["Theme"]
  80295787_127f_69e6_91b3_4bea3a484544["theme.ts"]
  734cf7ec_fb2a_2532_7b20_b3a815c7e3e6 -->|defined in| 80295787_127f_69e6_91b3_4bea3a484544
  6d2ae036_c0b0_1c9d_e3ea_2183c093cee8["constructor()"]
  734cf7ec_fb2a_2532_7b20_b3a815c7e3e6 -->|method| 6d2ae036_c0b0_1c9d_e3ea_2183c093cee8
  414e5b1c_83c9_f5e6_eb39_b8af93a46366["size()"]
  734cf7ec_fb2a_2532_7b20_b3a815c7e3e6 -->|method| 414e5b1c_83c9_f5e6_eb39_b8af93a46366
  06ed9408_12cf_7ddd_a435_8cdd942de1d4["add()"]
  734cf7ec_fb2a_2532_7b20_b3a815c7e3e6 -->|method| 06ed9408_12cf_7ddd_a435_8cdd942de1d4
  43b980e4_33bc_5e85_f71f_8016b6d2e809["keysInNamespaces()"]
  734cf7ec_fb2a_2532_7b20_b3a815c7e3e6 -->|method| 43b980e4_33bc_5e85_f71f_8016b6d2e809
  378e03e8_d700_b258_53b3_5bd078db1e2b["get()"]
  734cf7ec_fb2a_2532_7b20_b3a815c7e3e6 -->|method| 378e03e8_d700_b258_53b3_5bd078db1e2b
  68bbe6c5_9c3c_9047_344a_8cb9610bab8e["hasDefault()"]
  734cf7ec_fb2a_2532_7b20_b3a815c7e3e6 -->|method| 68bbe6c5_9c3c_9047_344a_8cb9610bab8e
  dbf6b411_7522_4e41_ab49_f4e9c07a4751["getOptions()"]
  734cf7ec_fb2a_2532_7b20_b3a815c7e3e6 -->|method| dbf6b411_7522_4e41_ab49_f4e9c07a4751
  8a1ac231_1225_a863_301e_a2e539358b72["entries()"]
  734cf7ec_fb2a_2532_7b20_b3a815c7e3e6 -->|method| 8a1ac231_1225_a863_301e_a2e539358b72
  21a2c14f_0801_6edc_2695_0f20586060e1["prefixKey()"]
  734cf7ec_fb2a_2532_7b20_b3a815c7e3e6 -->|method| 21a2c14f_0801_6edc_2695_0f20586060e1
  26c86285_bab3_70fd_575a_6af471f7c77a["key()"]
  734cf7ec_fb2a_2532_7b20_b3a815c7e3e6 -->|method| 26c86285_bab3_70fd_575a_6af471f7c77a
  c418c4a6_69f1_be06_3756_ed0a7a88584f["clearNamespace()"]
  734cf7ec_fb2a_2532_7b20_b3a815c7e3e6 -->|method| c418c4a6_69f1_be06_3756_ed0a7a88584f
  738ba3c2_c059_fd39_1c9e_294bee381139["candidateValue()"]
  734cf7ec_fb2a_2532_7b20_b3a815c7e3e6 -->|method| 738ba3c2_c059_fd39_1c9e_294bee381139
  93293d0f_8972_0a6a_eb24_f17846e7cfae["themeKey()"]
  734cf7ec_fb2a_2532_7b20_b3a815c7e3e6 -->|method| 93293d0f_8972_0a6a_eb24_f17846e7cfae

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