registerLegacyUtilities() — tailwindcss Function Reference

Architecture documentation for the registerLegacyUtilities() function in legacy-utilities.ts from the tailwindcss codebase.

Function typescript OxideEngine Scanner calls 4 called by 1

Entity Profile

OxideEngine→ Scanner→ registerLegacyUtilities() — tailwindcss Function Reference

Dependency Diagram

graph TD
  474da8ab_bb82_dc1d_4a87_5aea9d83e92b["registerLegacyUtilities()"]
  13af74f3_f39e_86e7_a3f9_c2738431bca0["legacy-utilities.ts"]
  474da8ab_bb82_dc1d_4a87_5aea9d83e92b -->|defined in| 13af74f3_f39e_86e7_a3f9_c2738431bca0
  fb60e614_817a_db22_d8eb_2bde7cd29719["applyCompatibilityHooks()"]
  fb60e614_817a_db22_d8eb_2bde7cd29719 -->|calls| 474da8ab_bb82_dc1d_4a87_5aea9d83e92b
  c203f636_607a_d332_b4c5_6a40c108f778["decl()"]
  474da8ab_bb82_dc1d_4a87_5aea9d83e92b -->|calls| c203f636_607a_d332_b4c5_6a40c108f778
  4e39f1e7_ebcb_7f62_4a59_b645e71d50fd["isPositiveInteger()"]
  474da8ab_bb82_dc1d_4a87_5aea9d83e92b -->|calls| 4e39f1e7_ebcb_7f62_4a59_b645e71d50fd
  f712ed47_45d4_4e5a_dd73_fdefa1da71da["segment()"]
  474da8ab_bb82_dc1d_4a87_5aea9d83e92b -->|calls| f712ed47_45d4_4e5a_dd73_fdefa1da71da
  a15b3c4a_76ff_0090_fc86_bac24f0a4135["isValidSpacingMultiplier()"]
  474da8ab_bb82_dc1d_4a87_5aea9d83e92b -->|calls| a15b3c4a_76ff_0090_fc86_bac24f0a4135
  style 474da8ab_bb82_dc1d_4a87_5aea9d83e92b fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/tailwindcss/src/compat/legacy-utilities.ts lines 6–179

export function registerLegacyUtilities(designSystem: DesignSystem) {
  for (let [value, direction] of [
    ['t', 'top'],
    ['tr', 'top right'],
    ['r', 'right'],
    ['br', 'bottom right'],
    ['b', 'bottom'],
    ['bl', 'bottom left'],
    ['l', 'left'],
    ['tl', 'top left'],
  ]) {
    designSystem.utilities.suggest(`bg-gradient-to-${value}`, () => [])
    designSystem.utilities.static(`bg-gradient-to-${value}`, () => [
      decl('--tw-gradient-position', `to ${direction} in oklab`),
      decl('background-image', `linear-gradient(var(--tw-gradient-stops))`),
    ])
  }

  // Legacy `background-position` utilities for compatibility with v4.0 and earlier
  designSystem.utilities.suggest('bg-left-top', () => [])
  designSystem.utilities.static('bg-left-top', () => [decl('background-position', 'left top')])
  designSystem.utilities.suggest('bg-right-top', () => [])
  designSystem.utilities.static('bg-right-top', () => [decl('background-position', 'right top')])
  designSystem.utilities.suggest('bg-left-bottom', () => [])
  designSystem.utilities.static('bg-left-bottom', () => [
    decl('background-position', 'left bottom'),
  ])
  designSystem.utilities.suggest('bg-right-bottom', () => [])
  designSystem.utilities.static('bg-right-bottom', () => [
    decl('background-position', 'right bottom'),
  ])

  // Legacy `object-position` utilities for compatibility with v4.0 and earlier
  designSystem.utilities.suggest('object-left-top', () => [])
  designSystem.utilities.static('object-left-top', () => [decl('object-position', 'left top')])
  designSystem.utilities.suggest('object-right-top', () => [])
  designSystem.utilities.static('object-right-top', () => [decl('object-position', 'right top')])
  designSystem.utilities.suggest('object-left-bottom', () => [])
  designSystem.utilities.static('object-left-bottom', () => [
    decl('object-position', 'left bottom'),
  ])
  designSystem.utilities.suggest('object-right-bottom', () => [])
  designSystem.utilities.static('object-right-bottom', () => [
    decl('object-position', 'right bottom'),
  ])

  designSystem.utilities.suggest('max-w-screen', () => [])
  designSystem.utilities.functional('max-w-screen', (candidate) => {
    if (!candidate.value) return
    if (candidate.value.kind === 'arbitrary') return
    let value = designSystem.theme.resolve(candidate.value.value, ['--breakpoint'])
    if (!value) return
    return [decl('max-width', value)]
  })

  designSystem.utilities.suggest('overflow-ellipsis', () => [])
  designSystem.utilities.static(`overflow-ellipsis`, () => [decl('text-overflow', `ellipsis`)])

  designSystem.utilities.suggest('decoration-slice', () => [])
  designSystem.utilities.static(`decoration-slice`, () => [
    decl('-webkit-box-decoration-break', `slice`),
    decl('box-decoration-break', `slice`),
  ])

  designSystem.utilities.suggest('decoration-clone', () => [])
  designSystem.utilities.static(`decoration-clone`, () => [
    decl('-webkit-box-decoration-break', `clone`),
    decl('box-decoration-break', `clone`),
  ])

  designSystem.utilities.suggest('flex-shrink', () => [])
  designSystem.utilities.functional('flex-shrink', (candidate) => {
    if (candidate.modifier) return

    if (!candidate.value) {
      return [decl('flex-shrink', '1')]
    }

    if (candidate.value.kind === 'arbitrary') {
      return [decl('flex-shrink', candidate.value.value)]
    }