Home / Class/ Root Class — tailwindcss Architecture

Root Class — tailwindcss Architecture

Architecture documentation for the Root class in index.ts from the tailwindcss codebase.

Entity Profile

Dependency Diagram

graph TD
  83ec979e_3b39_d4e7_8258_76d6f894ddf7["Root"]
  f29c4414_c466_4d28_48df_f0e54acbee4d["index.ts"]
  83ec979e_3b39_d4e7_8258_76d6f894ddf7 -->|defined in| f29c4414_c466_4d28_48df_f0e54acbee4d
  0ac5faaf_6273_37ce_7c4a_628c280d1dae["constructor()"]
  83ec979e_3b39_d4e7_8258_76d6f894ddf7 -->|method| 0ac5faaf_6273_37ce_7c4a_628c280d1dae
  b67e45c0_c12e_4110_8571_4aae09401670["generate()"]
  83ec979e_3b39_d4e7_8258_76d6f894ddf7 -->|method| b67e45c0_c12e_4110_8571_4aae09401670
  a5d72d57_d23e_d4a0_790b_7872da6c34d1["addBuildDependency()"]
  83ec979e_3b39_d4e7_8258_76d6f894ddf7 -->|method| a5d72d57_d23e_d4a0_790b_7872da6c34d1
  f882fe51_12ba_0eae_b8af_ca3a42cb72a8["requiresBuild()"]
  83ec979e_3b39_d4e7_8258_76d6f894ddf7 -->|method| f882fe51_12ba_0eae_b8af_ca3a42cb72a8

Relationship Graph

Source Code

packages/@tailwindcss-vite/src/index.ts lines 247–454

class Root {
  // The lazily-initialized Tailwind compiler components. These are persisted
  // throughout rebuilds but will be re-initialized if the rebuild strategy is
  // set to `full`.
  private compiler?: Awaited<ReturnType<typeof compile>>

  // The lazily-initialized Tailwind scanner.
  private scanner?: Scanner

  // List of all candidates that were being returned by the root scanner during
  // the lifetime of the root.
  private candidates: Set<string> = new Set<string>()

  // List of all build dependencies (e.g. imported  stylesheets or plugins) and
  // their last modification timestamp. If no mtime can be found, we need to
  // assume the file has always changed.
  private buildDependencies = new Map<string, number | null>()

  constructor(
    private id: string,
    private base: string,

    private enableSourceMaps: boolean,
    private customCssResolver: (id: string, base: string) => Promise<string | false | undefined>,
    private customJsResolver: (id: string, base: string) => Promise<string | false | undefined>,
  ) {}

  // Generate the CSS for the root file. This can return false if the file is
  // not considered a Tailwind root. When this happened, the root can be GCed.
  public async generate(
    content: string,
    _addWatchFile: (file: string) => void,
    I: Instrumentation,
  ): Promise<
    | {
        code: string
        map: string | undefined
      }
    | false
  > {
    let inputPath = idToPath(this.id)

    function addWatchFile(file: string) {
      // Don't watch the input file since it's already a dependency and causes
      // issues with some setups (e.g. Qwik).
      if (file === inputPath) {
        return
      }

      // Scanning `.svg` file containing a `#` or `?` in the path will
      // crash Vite. We work around this for now by ignoring updates to them.
      //
      // https://github.com/tailwindlabs/tailwindcss/issues/16877
      if (/[\#\?].*\.svg$/.test(file)) {
        return
      }
      _addWatchFile(file)
    }

    let requiresBuildPromise = this.requiresBuild()
    let inputBase = path.dirname(path.resolve(inputPath))

    if (!this.compiler || !this.scanner || (await requiresBuildPromise)) {
      clearRequireCache(Array.from(this.buildDependencies.keys()))
      this.buildDependencies.clear()

      this.addBuildDependency(idToPath(inputPath))

      DEBUG && I.start('Setup compiler')
      let addBuildDependenciesPromises: Promise<void>[] = []
      this.compiler = await compile(content, {
        from: this.enableSourceMaps ? this.id : undefined,
        base: inputBase,
        shouldRewriteUrls: true,
        onDependency: (path) => {
          addWatchFile(path)
          addBuildDependenciesPromises.push(this.addBuildDependency(path))
        },

        customCssResolver: this.customCssResolver,
        customJsResolver: this.customJsResolver,

Frequently Asked Questions

What is the Root class?
Root is a class in the tailwindcss codebase, defined in packages/@tailwindcss-vite/src/index.ts.
Where is Root defined?
Root is defined in packages/@tailwindcss-vite/src/index.ts at line 247.

Analyze Your Own Codebase

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

Try Supermodel Free