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 PostCSSPlugin AST calls 1 called by 18

Entity Profile

Dependency Diagram

graph TD
  9b49f3c6_0c8d_5c62_965c_30a1db6499f8["toCss()"]
  b9cbffa4_c352_cf3c_268f_cbb174fb3a47["ast.ts"]
  9b49f3c6_0c8d_5c62_965c_30a1db6499f8 -->|defined in| b9cbffa4_c352_cf3c_268f_cbb174fb3a47
  7ac5591b_df87_a0ae_2005_4d18e64a288f["rewriteUrls()"]
  7ac5591b_df87_a0ae_2005_4d18e64a288f -->|calls| 9b49f3c6_0c8d_5c62_965c_30a1db6499f8
  6d05b300_c6ad_6d9d_74a4_394205536160["tailwindcss()"]
  6d05b300_c6ad_6d9d_74a4_394205536160 -->|calls| 9b49f3c6_0c8d_5c62_965c_30a1db6499f8
  7ad9d996_c0ff_47f5_d131_ab2ead06506e["substituteAtApply()"]
  7ad9d996_c0ff_47f5_d131_ab2ead06506e -->|calls| 9b49f3c6_0c8d_5c62_965c_30a1db6499f8
  9f2a64dc_05ff_3425_1af8_f2dbd33c3b9a["optimizeAst()"]
  9f2a64dc_05ff_3425_1af8_f2dbd33c3b9a -->|calls| 9b49f3c6_0c8d_5c62_965c_30a1db6499f8
  5701b75f_30db_85c0_f5db_cc19be325e05["applyCompatibilityHooks()"]
  5701b75f_30db_85c0_f5db_cc19be325e05 -->|calls| 9b49f3c6_0c8d_5c62_965c_30a1db6499f8
  e557c8a4_bb27_ee44_c462_9e238157ad04["buildDesignSystem()"]
  e557c8a4_bb27_ee44_c462_9e238157ad04 -->|calls| 9b49f3c6_0c8d_5c62_965c_30a1db6499f8
  6f4989fd_689b_7bce_afb3_9718fc06d93c["expand()"]
  6f4989fd_689b_7bce_afb3_9718fc06d93c -->|calls| 9b49f3c6_0c8d_5c62_965c_30a1db6499f8
  f7f9b3da_5977_1aa6_3bcb_bfc607af4e8f["parseCss()"]
  f7f9b3da_5977_1aa6_3bcb_bfc607af4e8f -->|calls| 9b49f3c6_0c8d_5c62_965c_30a1db6499f8
  c59be670_b950_e897_c2ef_f6a86119dcc3["compile()"]
  c59be670_b950_e897_c2ef_f6a86119dcc3 -->|calls| 9b49f3c6_0c8d_5c62_965c_30a1db6499f8
  8ef22b30_0ed6_09d2_959d_163f9c650639["analyze()"]
  8ef22b30_0ed6_09d2_959d_163f9c650639 -->|calls| 9b49f3c6_0c8d_5c62_965c_30a1db6499f8
  253815a9_405f_ff30_32b6_577fe2d91fb2["migrateTheme()"]
  253815a9_405f_ff30_32b6_577fe2d91fb2 -->|calls| 9b49f3c6_0c8d_5c62_965c_30a1db6499f8
  e01d9b91_28ef_ca30_15e9_dad1881235ce["keyframesToCss()"]
  e01d9b91_28ef_ca30_15e9_dad1881235ce -->|calls| 9b49f3c6_0c8d_5c62_965c_30a1db6499f8
  31653e23_464a_3652_4a48_0c82332a92c4["buildPluginApi()"]
  31653e23_464a_3652_4a48_0c82332a92c4 -->|calls| 9b49f3c6_0c8d_5c62_965c_30a1db6499f8
  style 9b49f3c6_0c8d_5c62_965c_30a1db6499f8 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