Home / Function/ namespace() — tailwindcss Function Reference

namespace() — tailwindcss Function Reference

Architecture documentation for the namespace() function in theme.ts from the tailwindcss codebase.

Entity Profile

Dependency Diagram

graph TD
  1bd7a916_17c6_2bac_c425_cb1e63497cc9["namespace()"]
  734cf7ec_fb2a_2532_7b20_b3a815c7e3e6["Theme"]
  1bd7a916_17c6_2bac_c425_cb1e63497cc9 -->|defined in| 734cf7ec_fb2a_2532_7b20_b3a815c7e3e6
  00a6c74c_0751_dcea_d32a_e486a30355a4["readFromCss()"]
  00a6c74c_0751_dcea_d32a_e486a30355a4 -->|calls| 1bd7a916_17c6_2bac_c425_cb1e63497cc9
  c1a769fc_95ca_ceea_62f9_aedeeedf7c66["createVariants()"]
  c1a769fc_95ca_ceea_62f9_aedeeedf7c66 -->|calls| 1bd7a916_17c6_2bac_c425_cb1e63497cc9
  style 1bd7a916_17c6_2bac_c425_cb1e63497cc9 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/tailwindcss/src/theme.ts lines 276–293

  namespace(namespace: string) {
    let values = new Map<string | null, string>()
    let prefix = `${namespace}-`

    for (let [key, value] of this.values) {
      if (key === namespace) {
        values.set(null, value.value)
      } else if (key.startsWith(`${prefix}-`)) {
        // Preserve `--` prefix for sub-variables
        // e.g. `--font-size-sm--line-height`
        values.set(key.slice(namespace.length), value.value)
      } else if (key.startsWith(prefix)) {
        values.set(key.slice(prefix.length), value.value)
      }
    }

    return values
  }

Domain

Subdomains

Frequently Asked Questions

What does namespace() do?
namespace() is a function in the tailwindcss codebase, defined in packages/tailwindcss/src/theme.ts.
Where is namespace() defined?
namespace() is defined in packages/tailwindcss/src/theme.ts at line 276.
What calls namespace()?
namespace() is called by 2 function(s): createVariants, readFromCss.

Analyze Your Own Codebase

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

Try Supermodel Free