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 Oxide

Entity Profile

Dependency Diagram

graph TD
  e0663e8a_2f7d_8f2f_d3e7_62f07eccc486["Utilities"]
  ffde8eb7_7def_91ee_918c_be4f250f76a2["utilities.ts"]
  e0663e8a_2f7d_8f2f_d3e7_62f07eccc486 -->|defined in| ffde8eb7_7def_91ee_918c_be4f250f76a2
  9821918d_33d8_f395_5ca4_3fff65996d72["static()"]
  e0663e8a_2f7d_8f2f_d3e7_62f07eccc486 -->|method| 9821918d_33d8_f395_5ca4_3fff65996d72
  a5656dd3_93ce_c98d_6cec_38309e85d053["functional()"]
  e0663e8a_2f7d_8f2f_d3e7_62f07eccc486 -->|method| a5656dd3_93ce_c98d_6cec_38309e85d053
  a63f95f1_044a_f4fa_d577_48c385d0d0cb["has()"]
  e0663e8a_2f7d_8f2f_d3e7_62f07eccc486 -->|method| a63f95f1_044a_f4fa_d577_48c385d0d0cb
  0e687735_200d_7212_bbf6_504ebc1bfe77["get()"]
  e0663e8a_2f7d_8f2f_d3e7_62f07eccc486 -->|method| 0e687735_200d_7212_bbf6_504ebc1bfe77
  7ed57b2d_198a_e481_f364_5511e5dbdd4f["getCompletions()"]
  e0663e8a_2f7d_8f2f_d3e7_62f07eccc486 -->|method| 7ed57b2d_198a_e481_f364_5511e5dbdd4f
  523b2aa9_cd79_cdf0_dba9_b6b81fa6b149["suggest()"]
  e0663e8a_2f7d_8f2f_d3e7_62f07eccc486 -->|method| 523b2aa9_cd79_cdf0_dba9_b6b81fa6b149
  24bbf7d9_ff21_752d_5669_1a8f911d9ad1["keys()"]
  e0663e8a_2f7d_8f2f_d3e7_62f07eccc486 -->|method| 24bbf7d9_ff21_752d_5669_1a8f911d9ad1

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