build() — tailwindcss Function Reference

Architecture documentation for the build() function in index.ts from the tailwindcss codebase.

Function typescript Oxide PreProcessors calls 2 called by 1

Entity Profile

Oxide→ PreProcessors→ build() — tailwindcss Function Reference

Dependency Diagram

graph TD
  6e8698d4_c1fb_e530_f050_a2d8cf983c58["build()"]
  23d03804_a9a2_99ea_5362_f402708f8ba3["index.ts"]
  6e8698d4_c1fb_e530_f050_a2d8cf983c58 -->|defined in| 23d03804_a9a2_99ea_5362_f402708f8ba3
  0047fefc_fb51_ceb3_8560_c129cba933be["rebuild()"]
  0047fefc_fb51_ceb3_8560_c129cba933be -->|calls| 6e8698d4_c1fb_e530_f050_a2d8cf983c58
  22d4c2e8_dc90_1645_f8f6_7cf2d4b3c368["start()"]
  6e8698d4_c1fb_e530_f050_a2d8cf983c58 -->|calls| 22d4c2e8_dc90_1645_f8f6_7cf2d4b3c368
  b9dcd96f_6821_b870_253e_1083d8548c8a["end()"]
  6e8698d4_c1fb_e530_f050_a2d8cf983c58 -->|calls| b9dcd96f_6821_b870_253e_1083d8548c8a
  style 6e8698d4_c1fb_e530_f050_a2d8cf983c58 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/@tailwindcss-browser/src/index.ts lines 177–206

async function build(kind: 'full' | 'incremental') {
  if (!compiler) return

  // 1. Refresh the known list of classes
  let newClasses = new Set<string>()

  I.start(`Collect classes`)

  for (let element of document.querySelectorAll('[class]')) {
    for (let c of element.classList) {
      if (classes.has(c)) continue

      classes.add(c)
      newClasses.add(c)
    }
  }

  I.end(`Collect classes`, {
    count: newClasses.size,
  })

  if (newClasses.size === 0 && kind === 'incremental') return

  // 2. Compile the CSS
  I.start(`Build utilities`)

  sheet.textContent = compiler.build(Array.from(newClasses))

  I.end(`Build utilities`)
}