Tailwind Compilation Helper

Create a helper that compiles Tailwind-oriented CSS sources into final CSS while tracking every dependency and optionally rewriting asset URLs.

Capabilities

Compile CSS source with dependency tracking

• Given CSS containing Tailwind layer directives and an @import "./fixtures/buttons.css" statement plus utility usage (for example @apply p-4 bg-white), compiling with a base directory that contains the imported file returns final CSS with those utilities expanded and records both the entry file and imported stylesheet as dependencies. @test

Compile pre-parsed AST

• Providing the same stylesheet as a parsed AST produces identical CSS output and dependency collection as the string-based input when the same base and from values are supplied. @test

Toggle URL rewriting

• When rewriteUrls is false, a rule like background-image: url("../images/icon.svg") remains unchanged; when rewriteUrls is true and a project root is supplied, the URL is rewritten relative to that root. @test

Expose detected source root

• When a source root glob does not match the input path, the helper reports no match through its root field; when it matches, it surfaces the pattern in the result. @test

Implementation

@generates

API

export type CssSource =
  | { type: "string"; css: string; from?: string }
  | { type: "ast"; ast: any; from?: string };

export interface BuildOptions {
  /** Base directory used for resolving @import paths and modules */
  base: string;
  /** Whether to rewrite relative asset URLs */
  rewriteUrls?: boolean;
  /** Project root to use as the rewrite target */
  projectRoot?: string;
  /** Optional glob describing valid source roots to surface in the result */
  sourceRoot?: { pattern: string } | "none";
}

export interface BuildResult {
  /** Final compiled CSS */
  css: string;
  /** Absolute file paths discovered during compilation */
  dependencies: string[];
  /** Source root match status */
  root?: { pattern: string } | "none";
}

export async function buildTailwindStyles(
  source: CssSource,
  options: BuildOptions
): Promise<BuildResult>;

Dependencies { .dependencies }

@tailwindcss/node { .dependency }

Provides Tailwind-aware compilation helpers with Node-based module resolution, dependency callbacks, and optional URL rewriting.