createUtilities() — tailwindcss Function Reference

Architecture documentation for the createUtilities() function in utilities.ts from the tailwindcss codebase.

Function typescript OxideEngine PreProcessors called by 1

Entity Profile

OxideEngine→ PreProcessors→ createUtilities() — tailwindcss Function Reference

Dependency Diagram

graph TD
  0ce247c0_4edf_7255_2fe4_6eb777680bdf["createUtilities()"]
  2bc6f8eb_6339_d09c_79df_e9025a479c97["utilities.ts"]
  0ce247c0_4edf_7255_2fe4_6eb777680bdf -->|defined in| 2bc6f8eb_6339_d09c_79df_e9025a479c97
  9b965fd7_d8e9_0b43_cd5d_c9294ab598ed["buildDesignSystem()"]
  9b965fd7_d8e9_0b43_cd5d_c9294ab598ed -->|calls| 0ce247c0_4edf_7255_2fe4_6eb777680bdf
  style 0ce247c0_4edf_7255_2fe4_6eb777680bdf fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/tailwindcss/src/utilities.ts lines 291–5929

export function createUtilities(theme: Theme) {
  let utilities = new Utilities()

  /**
   * Register list of suggestions for a class
   */
  function suggest(classRoot: string, defns: () => SuggestionDefinition[]) {
    function* resolve(themeKeys: ThemeKey[]) {
      for (let value of theme.keysInNamespaces(themeKeys)) {
        yield value.replace(LEGACY_NUMERIC_KEY, (_, a, b) => {
          return `${a}.${b}`
        })
      }
    }

    let suggestedFractions = [
      '1/2',
      '1/3',
      '2/3',
      '1/4',
      '2/4',
      '3/4',
      '1/5',
      '2/5',
      '3/5',
      '4/5',
      '1/6',
      '2/6',
      '3/6',
      '4/6',
      '5/6',
      '1/12',
      '2/12',
      '3/12',
      '4/12',
      '5/12',
      '6/12',
      '7/12',
      '8/12',
      '9/12',
      '10/12',
      '11/12',
    ]

    utilities.suggest(classRoot, () => {
      let groups: SuggestionGroup[] = []

      for (let defn of defns()) {
        if (typeof defn === 'string') {
          groups.push({ values: [defn], modifiers: [] })
          continue
        }

        let values: (string | null)[] = [
          ...(defn.values ?? []),
          ...resolve(defn.valueThemeKeys ?? []),
        ]

        let modifiers = [...(defn.modifiers ?? []), ...resolve(defn.modifierThemeKeys ?? [])]

        if (defn.supportsFractions) {
          values.push(...suggestedFractions)
        }

        if (defn.hasDefaultValue) {
          values.unshift(null)
        }

        groups.push({ supportsNegative: defn.supportsNegative, values, modifiers })
      }

      return groups
    })
  }

  /**
   * Register a static utility class like `justify-center`.
   */
  function staticUtility(className: string, declarations: ([string, string] | (() => AstNode))[]) {
    utilities.static(className, () => {
      return declarations.map((node) => {