tailwindcss-in-browser/dist/index.d.ts

Building CSS directly in the browser using Tailwind CSS 4.

/**
 * Compiles partial CSS that uses `@apply` directives.
 * @see https://tailwindcss.com/docs/functions-and-directives#apply-directive
 *
 * @param css - The CSS containing `@apply` directives. Normally this
 *     would also contain `@reference` to the Tailwind configuration, but here
 *     the configuration is provided via `configurationCss` parameter.
 *     @see https://tailwindcss.com/docs/functions-and-directives#reference-directive
 * @param configurationCss - CSS that acts as the Tailwind V4 configuration,
 *     as well as any additional CSS. This is where you would normally add
 *     `@import "tailwindcss"`, which imports the followings:
 *       - the default theme,
 *         @see https://tailwindcss.com/docs/theme#default-theme-variable-reference
 *       - the `base`/`preflight` layer,
 *       - the `components` layer, and
 *       - the `utilities` layer.
 *     All of the above are already taken care of in this function. All you need
 *     to do is add your customizations with a `@theme` directive. See what you
 *     can override in Tailwind 4's default theme.
 *     @see https://tailwindcss.com/docs/theme#default-theme-variable-reference
 */
declare function compilePartialCss(css: string, configurationCss: string): Promise<string>;
/**
 * Options for compiling CSS.
 * @see {compileCss}
 */
interface CompileCssOptions {
    /**
     * Whether to add Tailwind's Preflight, a set of base styles and CSS reset.
     * @see https://tailwindcss.com/docs/preflight
     */
    addPreflight?: boolean;
    /**
     * Array of utility class names where the compiled definitions should not be
     * placed in a CSS cascade layer (i.e. `@layer utilities`).
     * Class name candidates that end with any of these utility names (e.g., "block",
     * "md:block", "dark:block" would all match "block") will not be placed in the
     * `utilities` layer.
     */
    unlayeredUtilities?: string[];
}
/**
 * Compiles CSS from class name candidates and Tailwind 4 configuration CSS.
 *
 * Uses Tailwind 4 where configuration is done via CSS variables.
 * @see https://tailwindcss.com/docs/configuration
 * @see https://github.com/tailwindlabs/tailwindcss/blob/v4.1.13/packages/tailwindcss/src/index.ts#L699
 *
 * @param classNameCandidates - The class name candidates for compilation.
 * @param configurationCss - CSS that acts as the Tailwind V4 configuration,
 *     as well as any additional CSS. This is where you would normally add
 *     `@import "tailwindcss"`, which imports the followings:
 *       - the default theme,
 *         @see https://tailwindcss.com/docs/theme#default-theme-variable-reference
 *       - the `base`/`preflight` layer,
 *       - the `components` layer, and
 *       - the `utilities` layer.
 *     All of the above are already taken care of in this function. All you need
 *     to do is add your customizations with a `@theme` directive. See what you
 *     can override in Tailwind 4's default theme.
 *     @see https://tailwindcss.com/docs/theme#default-theme-variable-reference
 *     You also have the option to skip adding the `base`/`preflight` layer.
 *     @see {CompileCssOptions.addPreflight}
 * @param options - Options for compiling the CSS.
 * @param [options.addPreflight=true] - @see {CompileCssOptions.addPreflight}
 * @param [options.unlayeredUtilities] - @see {CompileCssOptions.unlayeredUtilities}
 *
 * @returns The compiled CSS. The syntax is modern CSS syntax that needs to be
 * transformed to ensure compatibility with older browsers.
 */
declare function compileCss(classNameCandidates: string[], configurationCss: string, { addPreflight, unlayeredUtilities }?: CompileCssOptions): Promise<string>;

/**
 * Options for transforming CSS.
 * @see {transformCss}
 */
interface TransformCssOptions {
    /**
     * Whether to minify the CSS.
     *
     * @default true
     */
    minify?: boolean;
}
/**
 * Transforms CSS to ensure compatibility with older browsers.
 *
 * Uses the WASM build of Lightning CSS to match the behavior of Tailwind 4's
 * CLI.
 *
 * @see https://github.com/tailwindlabs/tailwindcss/blob/v4.1.13/packages/%40tailwindcss-node/src/optimize.ts
 *
 * @param css - The CSS to transform.
 * @param options - Options for transforming the CSS.
 * @param [options.minify=true] - @see {TransformCssOptions.minify}
 *
 * @returns The transformed CSS.
 */
declare function transformCss(css: string, { minify }?: TransformCssOptions): Promise<string>;

/**
 * Builds CSS with Tailwind V4 using the given markup and CSS configuration.
 *
 * Process: extract class names from markup → Compile CSS → Transform CSS.
 * - @see {extractClassNameCandidates}
 * - @see {compileCss}
 * - @see {transformCss}
 * For more granular control, use the individual functions.
 *
 * @param markup - The markup from which to extract Tailwind classes for
 *     generating the CSS.
 * @param configurationCss - CSS that acts as the Tailwind V4 configuration, as
 *     well as any additional CSS.
 *     @see {compileCss}
 * @param [options] - Options to use for compiling and transforming the CSS.
 * @param [options.compileCssOptions] - @see {CompileCssOptions}
 * @param [options.transformCssOptions] - @see {TransformCssOptions}
 *
 * @returns Compiled and transformed CSS.
 */
declare function buildCss(markup: string, configurationCss: string, { compileCssOptions, transformCssOptions, }?: {
    compileCssOptions?: CompileCssOptions;
    transformCssOptions?: TransformCssOptions;
}): Promise<string>;

/**
 * Extracts class name candidates from the given markup.
 *
 * Uses the implementation from Tailwind V3, because it can run in the browser.
 * In Tailwind V4, this is handled by the Oxide engine that's written in Rust
 * and requires a Node.js runtime.
 *
 * @see https://github.com/tailwindlabs/tailwindcss/blob/v3.4.14/src/lib/defaultExtractor.js
 *
 * @param markup - The markup from which to extract class name candidates.
 *
 * @returns The class name candidates extracted from the markup. Note that there
 *     can be invalid utility class names in the result, and that is expected.
 */
declare function extractClassNameCandidates(markup: string): string[];

export { type CompileCssOptions, type TransformCssOptions, compileCss, compilePartialCss, buildCss as default, extractClassNameCandidates, transformCss };