Home / Function/ compound() — tailwindcss Function Reference

compound() — tailwindcss Function Reference

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

Entity Profile

Dependency Diagram

graph TD
  7a418a11_25ee_a4c5_13e5_b5effc024d85["compound()"]
  c067616f_e276_458d_2166_c9f10e6fcc93["createVariants()"]
  c067616f_e276_458d_2166_c9f10e6fcc93 -->|calls| 7a418a11_25ee_a4c5_13e5_b5effc024d85
  34278c80_0fb5_dbdf_08de_b896b9703f2c["set()"]
  7a418a11_25ee_a4c5_13e5_b5effc024d85 -->|calls| 34278c80_0fb5_dbdf_08de_b896b9703f2c
  style 7a418a11_25ee_a4c5_13e5_b5effc024d85 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,
    })
  }

Domain

Subdomains

Calls

Called By

Frequently Asked Questions

What does compound() do?
compound() is a function in the tailwindcss codebase.
What does compound() call?
compound() calls 1 function(s): set.
What calls compound()?
compound() is called by 1 function(s): createVariants.

Analyze Your Own Codebase

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

Try Supermodel Free