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.
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.
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;
}
});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)
}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;
}
);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)
}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>;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
}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.0docs
evals
scenario-1
scenario-2
scenario-3
scenario-4
scenario-5
scenario-6
scenario-7
scenario-8
scenario-9
scenario-10