metamorphosis/dist/tailwind.d.ts

A css variable management library that helps create and organize variables into easily configurable themes.

import { ControlVar } from "./ControlVar.js";
import { InterpolatedVars } from "./InterpolatedVars.js";
import type { Theme } from "./Theme.js";
/**
 * Creates a static Tailwind V4 CSS config using the given theme. This ensures things look ok (at least with the static defaults) before the js is loaded that sets the final theme variables.
 *
 * Vars should have a naming scheme like `{tailwindType}-{name}` (e.g. `colors-red`).
 *
 * For InterpolatedVars, `{name}` would be the instance's name. To name ControlVars, they should be added to the theme like so:
 *
 * ```
 * new Theme({"color-fancy-red": new ControlVar(...) })
 * ```
 *
 * You can make a ControlVar top level so it's not prefixed with the type (e.g. `color`) by adding it to the topLevel option:
 *
 * ```
 * new Theme({"number-spacing": new ControlVar(...) })
 *
 * createTailwindPlugin(baseTheme, {
 * 	topLevel: ["number-spacing"] // will output `--spacing: ...`
 * })
 * ```
 *
 * Since it's a bit weird to have variables named `--colors-red-000`, there is a `twTypeMap` option that allows you to map an extracted type to a tailwind config key. For example, you can pass `{color:"colors"}` to be able to call variables `color-*`.
 *
 * By default the following function is used as the value on the tailwind variables:
 *
 * ```
 * (key, value, _entry): string => `--${escapeKey(key, "-")}: ${value};`
 * ```
 *
 * You can change this per type by using the `convertValueMap` option.
 *
 * ```ts
 * import { escapeKey, createTailwindPlugin } from "metamorphosis/tailwind"
 * createTailwindPlugin(baseTheme, {
 * 	convertValueMap: {
 * 		color: (key, value, entry) => ...
 * 	}
 *  })
 * ```
 *
 *
 * You can also exclude variables from the tailwind config by setting `excludeTw`.
 *
 * Default versions of interpolated variables can be specified with the defaultsMap:
 *
 * ```ts
 *
 * createTailwindPlugin(baseTheme, {
 * 	defaultsMap: {
 * 		"color-neutral": "50",
 * 	   "color-red": "500"
 * 	},
 * })
 * ```
 */
export declare function themeAsTailwindCss(themeInstance: Theme<any>, options?: TailwindPluginOptions): string;
export type TailwindPluginOptions = {
    defaultsMap?: Record<string, string>;
    twTypeMap?: Record<string, string>;
    convertValueMap?: Record<string, (key: string, value: string, entry: InterpolatedVars | ControlVar) => string>;
    separator?: string;
    excludeTw?: string[];
    topLevel?: string[];
};
//# sourceMappingURL=tailwind.d.ts.map