compound() — tailwindcss Function Reference

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

Function typescript Oxide PreProcessors calls 1 called by 1

Entity Profile

Oxide→ PreProcessors→ compound() — tailwindcss Function Reference

Dependency Diagram

graph TD
  1414bfb2_d251_dd0b_535b_ae5531c73cdb["compound()"]
  67c140cd_3928_7c30_7f6d_c67052da2a02["Variants"]
  1414bfb2_d251_dd0b_535b_ae5531c73cdb -->|defined in| 67c140cd_3928_7c30_7f6d_c67052da2a02
  876035d0_94a8_cf2f_314a_d520aaae6e4b["createVariants()"]
  876035d0_94a8_cf2f_314a_d520aaae6e4b -->|calls| 1414bfb2_d251_dd0b_535b_ae5531c73cdb
  ab94dcde_768f_3d99_6111_8043865014ab["set()"]
  1414bfb2_d251_dd0b_535b_ae5531c73cdb -->|calls| ab94dcde_768f_3d99_6111_8043865014ab
  style 1414bfb2_d251_dd0b_535b_ae5531c73cdb 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,
    })
  }