tailwindcss Architecture Docs
Home / Class/ Utilities Class — tailwindcss Architecture

Utilities Class — tailwindcss Architecture

Architecture documentation for the Utilities class in utilities.ts from the tailwindcss codebase.

Class typescript OxideEngine

Entity Profile

Dependency Diagram

graph TD
  0c5b8668_83ec_35e3_3834_57140f6a2c3d["Utilities"]
  2bc6f8eb_6339_d09c_79df_e9025a479c97["utilities.ts"]
  0c5b8668_83ec_35e3_3834_57140f6a2c3d -->|defined in| 2bc6f8eb_6339_d09c_79df_e9025a479c97
  4a2b5031_db17_fbe0_90a9_6c25e35adc1c["static()"]
  0c5b8668_83ec_35e3_3834_57140f6a2c3d -->|method| 4a2b5031_db17_fbe0_90a9_6c25e35adc1c
  2a767b71_a71c_597d_598f_9de772a6094a["functional()"]
  0c5b8668_83ec_35e3_3834_57140f6a2c3d -->|method| 2a767b71_a71c_597d_598f_9de772a6094a
  df728a67_bdd0_0789_98a1_af70e5020cd5["has()"]
  0c5b8668_83ec_35e3_3834_57140f6a2c3d -->|method| df728a67_bdd0_0789_98a1_af70e5020cd5
  826fa88e_aa5d_5bf5_f2c6_9a0302d5b02f["get()"]
  0c5b8668_83ec_35e3_3834_57140f6a2c3d -->|method| 826fa88e_aa5d_5bf5_f2c6_9a0302d5b02f
  57a7faee_db52_fa84_f079_698f76ce0bcd["getCompletions()"]
  0c5b8668_83ec_35e3_3834_57140f6a2c3d -->|method| 57a7faee_db52_fa84_f079_698f76ce0bcd
  3bf47f1b_2209_a8a0_ee89_625a80aa3b7a["suggest()"]
  0c5b8668_83ec_35e3_3834_57140f6a2c3d -->|method| 3bf47f1b_2209_a8a0_ee89_625a80aa3b7a
  0dfe396e_290f_02ff_5c72_321290ae550b["keys()"]
  0c5b8668_83ec_35e3_3834_57140f6a2c3d -->|method| 0dfe396e_290f_02ff_5c72_321290ae550b

Relationship Graph

Source Code

packages/tailwindcss/src/utilities.ts lines 100–154

export class Utilities {
  private utilities = new DefaultMap<string, Utility[]>(() => [])

  private completions = new Map<string, () => SuggestionGroup[]>()

  static(name: string, compileFn: CompileFn<'static'>) {
    this.utilities.get(name).push({ kind: 'static', compileFn })
  }

  functional(name: string, compileFn: CompileFn<'functional'>, options?: UtilityOptions) {
    this.utilities.get(name).push({ kind: 'functional', compileFn, options })
  }

  has(name: string, kind: 'static' | 'functional') {
    return this.utilities.has(name) && this.utilities.get(name).some((fn) => fn.kind === kind)
  }

  get(name: string) {
    return this.utilities.has(name) ? this.utilities.get(name) : []
  }

  getCompletions(name: string): SuggestionGroup[] {
    if (this.has(name, 'static')) {
      return (
        this.completions.get(name)?.() ?? [{ supportsNegative: false, values: [], modifiers: [] }]
      )
    }

    return this.completions.get(name)?.() ?? []
  }

  suggest(name: string, groups: () => SuggestionGroup[]) {
    let existingGroups = this.completions.get(name)
    if (existingGroups) {
      this.completions.set(name, () => [...existingGroups?.(), ...groups?.()])
    } else {
      this.completions.set(name, groups)
    }
  }

  keys(kind: 'static' | 'functional') {
    let keys: string[] = []

    for (let [key, fns] of this.utilities.entries()) {
      for (let fn of fns) {
        if (fn.kind === kind) {
          keys.push(key)
          break
        }
      }
    }

    return keys
  }
}

Domain

Defined In

Source

Frequently Asked Questions

What is the Utilities class?
Utilities is a class in the tailwindcss codebase, defined in packages/tailwindcss/src/utilities.ts.
Where is Utilities defined?
Utilities is defined in packages/tailwindcss/src/utilities.ts at line 100.

Analyze Your Own Codebase

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

Try Supermodel Free