compoundsWith() — tailwindcss Function Reference
Architecture documentation for the compoundsWith() function in variants.ts from the tailwindcss codebase.
Entity Profile
Dependency Diagram
graph TD f5fdf8c5_9ef2_b78b_1247_5ede58487336["compoundsWith()"] 67c140cd_3928_7c30_7f6d_c67052da2a02["Variants"] f5fdf8c5_9ef2_b78b_1247_5ede58487336 -->|defined in| 67c140cd_3928_7c30_7f6d_c67052da2a02 876035d0_94a8_cf2f_314a_d520aaae6e4b["createVariants()"] 876035d0_94a8_cf2f_314a_d520aaae6e4b -->|calls| f5fdf8c5_9ef2_b78b_1247_5ede58487336 553e63f4_f172_3689_a5a7_f8cf3b0bd124["get()"] f5fdf8c5_9ef2_b78b_1247_5ede58487336 -->|calls| 553e63f4_f172_3689_a5a7_f8cf3b0bd124 ed286c50_134b_5b5b_ff58_76456160010c["compoundsForSelectors()"] f5fdf8c5_9ef2_b78b_1247_5ede58487336 -->|calls| ed286c50_134b_5b5b_ff58_76456160010c style f5fdf8c5_9ef2_b78b_1247_5ede58487336 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
Defined In
Called By
Source
Frequently Asked Questions
What does compoundsWith() do?
compoundsWith() is a function in the tailwindcss codebase, defined in packages/tailwindcss/src/variants.ts.
Where is compoundsWith() defined?
compoundsWith() is defined in packages/tailwindcss/src/variants.ts at line 160.
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