tailwindcss Architecture Docs
Home / File/ theme.ts — tailwindcss Source File

theme.ts — tailwindcss Source File

Architecture documentation for theme.ts, a typescript file in the tailwindcss codebase. 4 imports, 19 dependents.

File typescript Oxide PreProcessors 4 imports 19 dependents 1 functions 1 classes

Entity Profile

Dependency Diagram

graph LR
  e28cd4a7_4e1a_e79b_76f1_86c479c6640d["theme.ts"]
  b9cbffa4_c352_cf3c_268f_cbb174fb3a47["ast.ts"]
  e28cd4a7_4e1a_e79b_76f1_86c479c6640d --> b9cbffa4_c352_cf3c_268f_cbb174fb3a47
  efac73cf_6ebb_d715_c95b_77e505446ee2["escape.ts"]
  e28cd4a7_4e1a_e79b_76f1_86c479c6640d --> efac73cf_6ebb_d715_c95b_77e505446ee2
  3330a25c_8114_660c_a3c7_8f1aaa37457d["escape"]
  e28cd4a7_4e1a_e79b_76f1_86c479c6640d --> 3330a25c_8114_660c_a3c7_8f1aaa37457d
  87a17ea2_6c8d_3d38_bd46_25d9267eeac0["unescape"]
  e28cd4a7_4e1a_e79b_76f1_86c479c6640d --> 87a17ea2_6c8d_3d38_bd46_25d9267eeac0
  3cba0ed8_8a2c_6367_67e3_fed6b42249a5["ast.test.ts"]
  3cba0ed8_8a2c_6367_67e3_fed6b42249a5 --> e28cd4a7_4e1a_e79b_76f1_86c479c6640d
  b9cbffa4_c352_cf3c_268f_cbb174fb3a47["ast.ts"]
  b9cbffa4_c352_cf3c_268f_cbb174fb3a47 --> e28cd4a7_4e1a_e79b_76f1_86c479c6640d
  16bff9c7_34eb_6bfb_9f80_b116fde86d22["candidate.bench.ts"]
  16bff9c7_34eb_6bfb_9f80_b116fde86d22 --> e28cd4a7_4e1a_e79b_76f1_86c479c6640d
  56fc54c9_e3f7_43c4_13f0_a68e2a985753["candidate.test.ts"]
  56fc54c9_e3f7_43c4_13f0_a68e2a985753 --> e28cd4a7_4e1a_e79b_76f1_86c479c6640d
  f6c14bbb_2e42_58cc_18f1_c89a243da9c0["canonicalize-candidates.ts"]
  f6c14bbb_2e42_58cc_18f1_c89a243da9c0 --> e28cd4a7_4e1a_e79b_76f1_86c479c6640d
  a922bb33_3f2e_e308_4b32_7fce412f48e0["apply-config-to-theme.test.ts"]
  a922bb33_3f2e_e308_4b32_7fce412f48e0 --> e28cd4a7_4e1a_e79b_76f1_86c479c6640d
  8d84257d_f3b2_cdf8_542f_835967da0481["apply-config-to-theme.ts"]
  8d84257d_f3b2_cdf8_542f_835967da0481 --> e28cd4a7_4e1a_e79b_76f1_86c479c6640d
  941f96f9_7e58_b2b3_cebb_9e3b8be15d61["apply-keyframes-to-theme.test.ts"]
  941f96f9_7e58_b2b3_cebb_9e3b8be15d61 --> e28cd4a7_4e1a_e79b_76f1_86c479c6640d
  a0ec45fb_d162_d87d_7041_fadd217a3619["create-compat-config.ts"]
  a0ec45fb_d162_d87d_7041_fadd217a3619 --> e28cd4a7_4e1a_e79b_76f1_86c479c6640d
  5d5614c9_83db_a21f_81c8_e68be87c466d["resolve-config.test.ts"]
  5d5614c9_83db_a21f_81c8_e68be87c466d --> e28cd4a7_4e1a_e79b_76f1_86c479c6640d
  fc692362_201d_7126_85aa_6ae8a948d6cc["flatten-color-palette.ts"]
  fc692362_201d_7126_85aa_6ae8a948d6cc --> e28cd4a7_4e1a_e79b_76f1_86c479c6640d
  style e28cd4a7_4e1a_e79b_76f1_86c479c6640d fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

import { type AtRule, type Declaration } from './ast'
import { escape, unescape } from './utils/escape'

export const enum ThemeOptions {
  NONE = 0,
  INLINE = 1 << 0,
  REFERENCE = 1 << 1,
  DEFAULT = 1 << 2,

  STATIC = 1 << 3,
  USED = 1 << 4,
}

// In the future we may want to replace this with just a `Set` of known theme
// keys and let the computer sort out which keys should ignored which other keys
// based on overlapping prefixes.
const ignoredThemeKeyMap = new Map([
  ['--font', ['--font-weight', '--font-size']],
  ['--inset', ['--inset-shadow', '--inset-ring']],
  [
    '--text',
    [
      '--text-color',
      '--text-decoration-color',
      '--text-decoration-thickness',
      '--text-indent',
      '--text-shadow',
      '--text-underline-offset',
    ],
  ],
  ['--grid-column', ['--grid-column-start', '--grid-column-end']],
  ['--grid-row', ['--grid-row-start', '--grid-row-end']],
])

function isIgnoredThemeKey(themeKey: ThemeKey, namespace: ThemeKey) {
  return (ignoredThemeKeyMap.get(namespace) ?? []).some(
    (ignoredThemeKey) => themeKey === ignoredThemeKey || themeKey.startsWith(`${ignoredThemeKey}-`),
  )
}

export class Theme {
  public prefix: string | null = null

  constructor(
    private values = new Map<
      string,
      {
        value: string
        options: ThemeOptions
        src: Declaration['src']
      }
    >(),
    private keyframes = new Set<AtRule>([]),
  ) {}

  get size() {
    return this.values.size
  }

  add(key: string, value: string, options = ThemeOptions.NONE, src?: Declaration['src']): void {
// ... (245 more lines)

Domain

Subdomains

Functions

Classes

Types

Dependencies

Imported By

Source

Frequently Asked Questions

What does theme.ts do?
theme.ts is a source file in the tailwindcss codebase, written in typescript. It belongs to the Oxide domain, PreProcessors subdomain.
What functions are defined in theme.ts?
theme.ts defines 1 function(s): isIgnoredThemeKey.
What does theme.ts depend on?
theme.ts imports 4 module(s): ast.ts, escape, escape.ts, unescape.
What files import theme.ts?
theme.ts is imported by 19 file(s): apply-config-to-theme.test.ts, apply-config-to-theme.ts, apply-keyframes-to-theme.test.ts, ast.test.ts, ast.ts, candidate.bench.ts, candidate.test.ts, canonicalize-candidates.ts, and 11 more.
Where is theme.ts in the architecture?
theme.ts is located at packages/tailwindcss/src/theme.ts (domain: Oxide, subdomain: PreProcessors, directory: packages/tailwindcss/src).

Analyze Your Own Codebase

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

Try Supermodel Free