CtrlK
CommunityDocumentationLog inGet started
Tessl Logo

tessl/npm-tailwindcss--node

Node.js-specific utilities and runtime functionality for Tailwind CSS v4, providing compilation tools, module dependency analysis, source map handling, path normalization, and optimization utilities.

43%

Overall

Evaluation43%

1.16x

Agent success when using this tile

Overview
Eval results
Files

compilation.mddocs/

CSS Compilation

Core Tailwind CSS compilation functionality with Node.js-specific module loading, dependency tracking, and file system integration. Supports both string-based CSS and AST-based compilation with comprehensive configuration options.

Capabilities

Compile Function

Compiles CSS strings with Tailwind CSS processing, including dependency tracking and custom resolvers.

/**
 * Compiles CSS with Tailwind CSS processing
 * @param css - CSS string to compile (typically containing @tailwind directives)
 * @param options - Compilation configuration options
 * @returns Promise resolving to a Compiler instance
 */
function compile(css: string, options: CompileOptions): Promise<Compiler>;

interface CompileOptions {
  /** Base directory for resolving relative paths */
  base: string;
  /** Source file path for better error reporting */
  from?: string;
  /** Callback invoked for each discovered dependency */
  onDependency: (path: string) => void;
  /** Whether to rewrite relative URLs in CSS */
  shouldRewriteUrls?: boolean;
  /** CSS polyfill configuration */
  polyfills?: Polyfills;
  /** Custom resolver for CSS imports */
  customCssResolver?: Resolver;
  /** Custom resolver for JavaScript/TypeScript modules */
  customJsResolver?: Resolver;
}

interface Compiler {
  /** Generates the final CSS output */
  build(): string;
  /** Source detection configuration (if any) */
  root?: { pattern: string } | 'none';
}

Usage Examples:

import { compile, CompileOptions } from "@tailwindcss/node";

// Basic compilation
const compiler = await compile(`
  @tailwind base;
  @tailwind components;
  @tailwind utilities;
`, {
  base: process.cwd(),
  onDependency: (path) => console.log("Dependency:", path)
});

const css = compiler.build();

// Advanced compilation with custom resolvers
const advancedCompiler = await compile(`
  @import "./components.css";
  @tailwind utilities;
`, {
  base: "/path/to/project",
  from: "/path/to/project/src/styles.css",
  onDependency: (path) => {
    // Track dependencies for hot reloading
    watchedFiles.add(path);
  },
  shouldRewriteUrls: true,
  customCssResolver: async (id, base) => {
    // Custom CSS resolution logic
    if (id.startsWith("@/")) {
      return path.resolve(base, "src", id.slice(2));
    }
    return undefined;
  }
});

Compile AST Function

Compiles pre-parsed AST nodes directly, useful for advanced use cases where CSS has already been parsed.

/**
 * Compiles AST nodes with Tailwind CSS processing
 * @param ast - Array of parsed AST nodes
 * @param options - Compilation configuration options
 * @returns Promise resolving to a Compiler instance
 */
function compileAst(ast: AstNode[], options: CompileOptions): Promise<Compiler>;

interface AstNode {
  // AST node structure (implementation details from tailwindcss package)
}

Load Module Function

Loads JavaScript/TypeScript modules with dependency tracking and custom resolution.

/**
 * Loads a JavaScript/TypeScript module with dependency tracking
 * @param id - Module identifier (relative or package name)
 * @param base - Base directory for resolution
 * @param onDependency - Callback for each discovered dependency
 * @param customJsResolver - Optional custom module resolver
 * @returns Promise resolving to module information
 */
function loadModule(
  id: string,
  base: string,
  onDependency: (path: string) => void,
  customJsResolver?: Resolver
): Promise<ModuleResult>;

interface ModuleResult {
  /** Absolute path to the loaded module */
  path: string;
  /** Directory containing the module */
  base: string;
  /** The loaded module's exports */
  module: any;
}

Usage Examples:

import { loadModule } from "@tailwindcss/node";

// Load a config file
const configModule = await loadModule(
  "./tailwind.config.js",
  process.cwd(),
  (path) => console.log("Config dependency:", path)
);

const config = configModule.module;

// Load with custom resolver
const themeModule = await loadModule(
  "@/theme",
  "/path/to/project",
  (path) => dependencies.add(path),
  async (id, base) => {
    if (id.startsWith("@/")) {
      return path.resolve(base, "src", id.slice(2));
    }
    return undefined;
  }
);

Unstable Design System Loader

Loads design system configuration (experimental API subject to change).

/**
 * Loads design system configuration (unstable API)
 * @param css - CSS containing design system definitions
 * @param options - Configuration with base directory
 * @returns Promise resolving to design system configuration
 */
function __unstable__loadDesignSystem(
  css: string, 
  options: { base: string }
): Promise<DesignSystem>;

interface DesignSystem {
  // Design system structure (implementation details may change)
}

Resolver Type

Custom resolver function type for module and CSS resolution.

/**
 * Custom resolver function for modules or CSS files
 * @param id - The identifier to resolve
 * @param base - Base directory for resolution
 * @returns Promise resolving to resolved path, false if not found, or undefined to defer to default resolver
 */
type Resolver = (id: string, base: string) => Promise<string | false | undefined>;

Re-exported Types

The compilation module re-exports key types from the core Tailwind CSS package:

/** CSS feature flags for compilation control */
enum Features {
  // Specific feature values are defined in the tailwindcss package
}

/** CSS polyfill configuration options */
interface Polyfills {
  // Polyfill options are defined in the tailwindcss package
}

Global Hooks

The package supports global hooks for custom environments (e.g. bundlers, test frameworks):

// Global functions that can be defined to customize behavior
declare global {
  var __tw_readFile: ((path: string, encoding: string) => Promise<string | null>) | undefined;
  var __tw_load: ((path: string) => Promise<any | null>) | undefined;
  var __tw_resolve: ((id: string, base: string) => string | null) | undefined;
}

These globals allow build tools and frameworks to provide custom implementations for file reading, module loading, and resolution.

tessl i tessl/npm-tailwindcss--node@4.1.0

docs

cache-management.md

compilation.md

index.md

instrumentation.md

module-analysis.md

optimization.md

path-utils.md

source-maps.md

url-processing.md

tile.json