designSystems() — tailwindcss Function Reference

Architecture documentation for the designSystems() function in canonicalize-candidates.test.ts from the tailwindcss codebase.

Function typescript OxideEngine Extractor

Entity Profile

OxideEngine→ Extractor→ designSystems() — tailwindcss Function Reference

Dependency Diagram

graph TD
  f0ca5450_dcc1_f711_bc32_57dc77efaf97["designSystems()"]
  978ac7fd_340e_c735_63b8_28b3651a84e1["canonicalize-candidates.test.ts"]
  f0ca5450_dcc1_f711_bc32_57dc77efaf97 -->|defined in| 978ac7fd_340e_c735_63b8_28b3651a84e1
  style f0ca5450_dcc1_f711_bc32_57dc77efaf97 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/tailwindcss/src/canonicalize-candidates.test.ts lines 13–49

const designSystems = new DefaultMap((base: string) => {
  return new DefaultMap((input: string) => {
    return __unstable__loadDesignSystem(input, {
      base,
      async loadStylesheet() {
        return {
          path: '',
          base: '',
          content: css`
            @tailwind utilities;

            ${defaultTheme}

            /* TODO(perf): Only here to speed up the tests */
            @theme {
              --*: initial;
              --breakpoint-lg: 64rem;
              --breakpoint-md: 48rem;
              --color-blue-200: oklch(88.2% 0.059 254.128);
              --color-blue-500: oklch(62.3% 0.214 259.815);
              --color-red-500: oklch(63.7% 0.237 25.331);
              --color-white: #fff;
              --container-md: 28rem;
              --font-weight-normal: 400;
              --leading-relaxed: 1.625;
              --spacing: 0.25rem;
              --text-sm--line-height: calc(1.25 / 0.875);
              --text-sm: 0.875rem;
              --text-xs--line-height: calc(1 / 0.75);
              --text-xs: 0.75rem;
            }
          `,
        }
      },
    })
  })
})