Home / Function/ compoundsWith() — tailwindcss Function Reference

compoundsWith() — tailwindcss Function Reference

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

Function typescript OxideCore Scanner calls 2 called by 1

Entity Profile

Dependency Diagram

graph TD
  fd3adc32_3109_75f1_7942_d8cb145512d7["compoundsWith()"]
  c067616f_e276_458d_2166_c9f10e6fcc93["createVariants()"]
  c067616f_e276_458d_2166_c9f10e6fcc93 -->|calls| fd3adc32_3109_75f1_7942_d8cb145512d7
  591a738c_045a_d84d_5f74_336f1c5339ce["get()"]
  fd3adc32_3109_75f1_7942_d8cb145512d7 -->|calls| 591a738c_045a_d84d_5f74_336f1c5339ce
  3a207375_0c4d_0a9e_f1f0_05b2b56ac8a7["compoundsForSelectors()"]
  fd3adc32_3109_75f1_7942_d8cb145512d7 -->|calls| 3a207375_0c4d_0a9e_f1f0_05b2b56ac8a7
  style fd3adc32_3109_75f1_7942_d8cb145512d7 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/tailwindcss/src/variants.ts lines 160–193

  compoundsWith(parent: string, child: string | Variant) {
    let parentInfo = this.variants.get(parent)
    let childInfo =
      typeof child === 'string'
        ? this.variants.get(child)
        : child.kind === 'arbitrary'
          ? // This isn't strictly necessary but it'll allow us to bail quickly
            // when parsing candidates
            { compounds: compoundsForSelectors([child.selector]) }
          : this.variants.get(child.root)

    // One of the variants don't exist
    if (!parentInfo || !childInfo) return false

    // The parent variant is not a compound variant
    if (parentInfo.kind !== 'compound') return false

    // The variant `parent` may _compound with_ `child` if `parent` supports the
    // rules that `child` generates. We instead use static registration metadata
    // about what `parent` and `child` support instead of trying to apply the
    // variant at runtime to see if the rules are compatible.

    // The `child` variant cannot compound *ever*
    if (childInfo.compounds === Compounds.Never) return false

    // The `parent` variant cannot compound *ever*
    // This shouldn't ever happen because `kind` is `compound`
    if (parentInfo.compoundsWith === Compounds.Never) return false

    // Any rule that `child` may generate must be supported by `parent`
    if ((parentInfo.compoundsWith & childInfo.compounds) === 0) return false

    return true
  }

Domain

Subdomains

Called By

Frequently Asked Questions

What does compoundsWith() do?
compoundsWith() is a function in the tailwindcss codebase.
What does compoundsWith() call?
compoundsWith() calls 2 function(s): compoundsForSelectors, get.
What calls compoundsWith()?
compoundsWith() 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