compound() — tailwindcss Function Reference

Architecture documentation for the compound() function in variants.ts from the tailwindcss codebase.

Function typescript OxideEngine PreProcessors calls 1 called by 1

Entity Profile

OxideEngine→ PreProcessors→ compound() — tailwindcss Function Reference

Dependency Diagram

graph TD
  47e70eea_1a5b_2b9b_d1b3_e2b1c34eec79["compound()"]
  ff716ee9_bd1e_1568_4100_c1d5b3ab8daa["Variants"]
  47e70eea_1a5b_2b9b_d1b3_e2b1c34eec79 -->|defined in| ff716ee9_bd1e_1568_4100_c1d5b3ab8daa
  c1a769fc_95ca_ceea_62f9_aedeeedf7c66["createVariants()"]
  c1a769fc_95ca_ceea_62f9_aedeeedf7c66 -->|calls| 47e70eea_1a5b_2b9b_d1b3_e2b1c34eec79
  e37ec412_58f3_7fbe_3589_99329ee9b910["set()"]
  47e70eea_1a5b_2b9b_d1b3_e2b1c34eec79 -->|calls| e37ec412_58f3_7fbe_3589_99329ee9b910
  style 47e70eea_1a5b_2b9b_d1b3_e2b1c34eec79 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/tailwindcss/src/variants.ts lines 126–139

  compound(
    name: string,
    compoundsWith: Compounds,
    applyFn: VariantFn<'compound'>,
    { compounds, order }: { compounds?: Compounds; order?: number } = {},
  ) {
    this.set(name, {
      kind: 'compound',
      applyFn,
      compoundsWith,
      compounds: compounds ?? Compounds.StyleRules,
      order,
    })
  }