tailwindcss Architecture Docs
Home / Function/ toCss() — tailwindcss Function Reference

toCss() — tailwindcss Function Reference

Architecture documentation for the toCss() function in ast.ts from the tailwindcss codebase.

Function typescript NodeBridge Compiler calls 1 called by 18

Entity Profile

Dependency Diagram

graph TD
  2da63033_d079_7b37_5cfb_3877674a70b9["toCss()"]
  42640952_ea63_55f1_1ff1_00816e2980ae["ast.ts"]
  2da63033_d079_7b37_5cfb_3877674a70b9 -->|defined in| 42640952_ea63_55f1_1ff1_00816e2980ae
  fa6eaba6_9ce1_3f40_275c_1ab85a97a856["rewriteUrls()"]
  fa6eaba6_9ce1_3f40_275c_1ab85a97a856 -->|calls| 2da63033_d079_7b37_5cfb_3877674a70b9
  7e4891ad_b5c5_f083_e9e1_3dc43422517d["tailwindcss()"]
  7e4891ad_b5c5_f083_e9e1_3dc43422517d -->|calls| 2da63033_d079_7b37_5cfb_3877674a70b9
  96876152_5423_5f9b_9f88_1db666070351["substituteAtApply()"]
  96876152_5423_5f9b_9f88_1db666070351 -->|calls| 2da63033_d079_7b37_5cfb_3877674a70b9
  47b4c875_7e44_6ff9_fb06_16ecf9254223["optimizeAst()"]
  47b4c875_7e44_6ff9_fb06_16ecf9254223 -->|calls| 2da63033_d079_7b37_5cfb_3877674a70b9
  fb60e614_817a_db22_d8eb_2bde7cd29719["applyCompatibilityHooks()"]
  fb60e614_817a_db22_d8eb_2bde7cd29719 -->|calls| 2da63033_d079_7b37_5cfb_3877674a70b9
  9b965fd7_d8e9_0b43_cd5d_c9294ab598ed["buildDesignSystem()"]
  9b965fd7_d8e9_0b43_cd5d_c9294ab598ed -->|calls| 2da63033_d079_7b37_5cfb_3877674a70b9
  1e8a63fb_d767_393f_749f_708105a54264["expand()"]
  1e8a63fb_d767_393f_749f_708105a54264 -->|calls| 2da63033_d079_7b37_5cfb_3877674a70b9
  3970218d_3d6c_e455_87cc_45b4a094f0e9["parseCss()"]
  3970218d_3d6c_e455_87cc_45b4a094f0e9 -->|calls| 2da63033_d079_7b37_5cfb_3877674a70b9
  9c33d37f_aea4_85fa_1eb9_f13429950630["compile()"]
  9c33d37f_aea4_85fa_1eb9_f13429950630 -->|calls| 2da63033_d079_7b37_5cfb_3877674a70b9
  5bda8ff2_4761_4c27_d724_a4e36f403452["analyze()"]
  5bda8ff2_4761_4c27_d724_a4e36f403452 -->|calls| 2da63033_d079_7b37_5cfb_3877674a70b9
  e26bfad3_530e_6523_7463_161205321110["migrateTheme()"]
  e26bfad3_530e_6523_7463_161205321110 -->|calls| 2da63033_d079_7b37_5cfb_3877674a70b9
  a3c47427_743d_aeb5_9ea9_81bd29d83bb4["keyframesToCss()"]
  a3c47427_743d_aeb5_9ea9_81bd29d83bb4 -->|calls| 2da63033_d079_7b37_5cfb_3877674a70b9
  2efa0a66_c375_c031_24ad_1f7509bb9b14["buildPluginApi()"]
  2efa0a66_c375_c031_24ad_1f7509bb9b14 -->|calls| 2da63033_d079_7b37_5cfb_3877674a70b9
  style 2da63033_d079_7b37_5cfb_3877674a70b9 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/tailwindcss/src/ast.ts lines 682–887

export function toCss(ast: AstNode[], track?: boolean) {
  let pos = 0

  let source: Source = {
    file: null,
    code: '',
  }

  function stringify(node: AstNode, depth = 0): string {
    let css = ''
    let indent = '  '.repeat(depth)

    // Declaration
    if (node.kind === 'declaration') {
      css += `${indent}${node.property}: ${node.value}${node.important ? ' !important' : ''};\n`

      if (track) {
        // indent
        pos += indent.length

        // node.property
        let start = pos
        pos += node.property.length

        // `: `
        pos += 2

        // node.value
        pos += node.value?.length ?? 0

        // !important
        if (node.important) {
          pos += 11
        }

        let end = pos

        // `;\n`
        pos += 2

        node.dst = [source, start, end]
      }
    }

    // Rule
    else if (node.kind === 'rule') {
      css += `${indent}${node.selector} {\n`

      if (track) {
        // indent
        pos += indent.length

        // node.selector
        let start = pos
        pos += node.selector.length

        // ` `
        pos += 1

        let end = pos
        node.dst = [source, start, end]

        // `{\n`
        pos += 2
      }

      for (let child of node.nodes) {
        css += stringify(child, depth + 1)
      }

      css += `${indent}}\n`

      if (track) {
        // indent
        pos += indent.length

        // `}\n`
        pos += 2
      }
    }

Domain

Subdomains

Defined In

Calls

Called By

Source

Frequently Asked Questions

What does toCss() do?
toCss() is a function in the tailwindcss codebase, defined in packages/tailwindcss/src/ast.ts.
Where is toCss() defined?
toCss() is defined in packages/tailwindcss/src/ast.ts at line 682.
What does toCss() call?
toCss() calls 1 function(s): toCss.
What calls toCss()?
toCss() is called by 18 function(s): analyze, applyCompatibilityHooks, buildDesignSystem, buildPluginApi, compile, createUtilitySignatureCache, createVariantSignatureCache, expand, and 10 more.

Analyze Your Own Codebase

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

Try Supermodel Free