keyframesToRules() — tailwindcss Function Reference

Architecture documentation for the keyframesToRules() function in apply-keyframes-to-theme.ts from the tailwindcss codebase.

Function typescript CompilerEngine AstTransformation calls 2 called by 2

Entity Profile

CompilerEngine→ AstTransformation→ keyframesToRules() — tailwindcss Function Reference

Dependency Diagram

graph TD
  9fbfbf7d_7486_16f1_14be_06acdc92b2cb["keyframesToRules()"]
  d4865106_45da_0461_2954_69ab7533f3ba["keyframesToCss()"]
  d4865106_45da_0461_2954_69ab7533f3ba -->|calls| 9fbfbf7d_7486_16f1_14be_06acdc92b2cb
  15c35223_4bac_dcb1_403b_78f4fe4852da["applyKeyframesToTheme()"]
  15c35223_4bac_dcb1_403b_78f4fe4852da -->|calls| 9fbfbf7d_7486_16f1_14be_06acdc92b2cb
  a9af385a_fd12_f1d8_7cf0_ccb9b281ca18["atRule()"]
  9fbfbf7d_7486_16f1_14be_06acdc92b2cb -->|calls| a9af385a_fd12_f1d8_7cf0_ccb9b281ca18
  a073a4cd_758b_23aa_b3d4_216815e4dd3d["objectToAst()"]
  9fbfbf7d_7486_16f1_14be_06acdc92b2cb -->|calls| a073a4cd_758b_23aa_b3d4_216815e4dd3d
  style 9fbfbf7d_7486_16f1_14be_06acdc92b2cb fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/tailwindcss/src/compat/apply-keyframes-to-theme.ts lines 15–23

export function keyframesToRules(resolvedConfig: Pick<ResolvedConfig, 'theme'>): AtRule[] {
  let rules: AtRule[] = []
  if ('keyframes' in resolvedConfig.theme) {
    for (let [name, keyframe] of Object.entries(resolvedConfig.theme.keyframes)) {
      rules.push(atRule('@keyframes', name, objectToAst(keyframe as any)))
    }
  }
  return rules
}