Home / Function/ loadDesignSystem() — tailwindcss Function Reference

loadDesignSystem() — tailwindcss Function Reference

Architecture documentation for the loadDesignSystem() function in intellisense.bench.ts from the tailwindcss codebase.

Function typescript OxideCore PreProcessors calls 2

Entity Profile

Dependency Diagram

graph TD
  36ae79a2_b20d_13c7_4f6b_8f43bb0d702f["loadDesignSystem()"]
  24d95be4_356f_a1f9_9702_2a4f413db0f5["add()"]
  36ae79a2_b20d_13c7_4f6b_8f43bb0d702f -->|calls| 24d95be4_356f_a1f9_9702_2a4f413db0f5
  c58d3214_88d6_f4fc_257f_8e84def5b24f["buildDesignSystem()"]
  36ae79a2_b20d_13c7_4f6b_8f43bb0d702f -->|calls| c58d3214_88d6_f4fc_257f_8e84def5b24f
  style 36ae79a2_b20d_13c7_4f6b_8f43bb0d702f fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/tailwindcss/src/intellisense.bench.ts lines 5–22

function loadDesignSystem() {
  let theme = new Theme()
  theme.add('--spacing-0_5', '0.125rem')
  theme.add('--spacing-1', '0.25rem')
  theme.add('--spacing-3', '0.75rem')
  theme.add('--spacing-4', '1rem')
  theme.add('--width-4', '1rem')
  theme.add('--colors-red-500', 'red')
  theme.add('--colors-blue-500', 'blue')
  theme.add('--breakpoint-sm', '640px')
  theme.add('--font-size-xs', '0.75rem')
  theme.add('--font-size-xs--line-height', '1rem')
  theme.add('--perspective-dramatic', '100px')
  theme.add('--perspective-normal', '500px')
  theme.add('--opacity-background', '0.3')

  return buildDesignSystem(theme)
}

Domain

Subdomains

Calls

Source

Frequently Asked Questions

What does loadDesignSystem() do?
loadDesignSystem() is a function in the tailwindcss codebase.
What does loadDesignSystem() call?
loadDesignSystem() calls 2 function(s): add, buildDesignSystem.

Analyze Your Own Codebase

Get architecture documentation, dependency graphs, and domain analysis for your codebase in minutes.

Try Supermodel Free