tailwind-merge
Version:
Merge Tailwind CSS classes without style conflicts
994 lines (991 loc) • 135 kB
TypeScript
/**
* The code in this file is copied from https://github.com/lukeed/clsx and modified to suit the needs of tailwind-merge better.
*
* Specifically:
* - Runtime code from https://github.com/lukeed/clsx/blob/v1.2.1/src/index.js
* - TypeScript types from https://github.com/lukeed/clsx/blob/v1.2.1/clsx.d.ts
*
* Original code has MIT license: Copyright (c) Luke Edwards <luke.edwards05@gmail.com> (lukeed.com)
*/
type ClassNameValue = ClassNameArray | string | null | undefined | 0 | 0n | false;
type ClassNameArray = readonly ClassNameValue[];
declare const twJoin: (...classLists: ClassNameValue[]) => string;
/**
* Type the tailwind-merge configuration adheres to.
*/
interface Config<ClassGroupIds extends string, ThemeGroupIds extends string> extends ConfigStaticPart, ConfigGroupsPart<ClassGroupIds, ThemeGroupIds> {
}
/**
* The static part of the tailwind-merge configuration. When merging multiple configurations, the properties of this interface are always overridden.
*/
interface ConfigStaticPart {
/**
* Integer indicating size of LRU cache used for memoizing results.
* - Cache might be up to twice as big as `cacheSize`
* - No cache is used for values <= 0
*/
cacheSize: number;
/**
* Prefix added to Tailwind-generated classes
* @see https://tailwindcss.com/docs/configuration#prefix
*/
prefix?: string;
/**
* Allows to customize parsing of individual classes passed to `twMerge`.
* All classes passed to `twMerge` outside of cache hits are passed to this function before it is determined whether the class is a valid Tailwind CSS class.
*
* This is an experimental feature and may introduce breaking changes in any minor version update.
*/
experimentalParseClassName?(param: ExperimentalParseClassNameParam): ParsedClassName;
}
/**
* Type of param passed to the `experimentalParseClassName` function.
*
* This is an experimental feature and may introduce breaking changes in any minor version update.
*/
interface ExperimentalParseClassNameParam {
className: string;
parseClassName(className: string): ParsedClassName;
}
/**
* Type of the result returned by the `experimentalParseClassName` function.
*
* This is an experimental feature and may introduce breaking changes in any minor version update.
*/
interface ParsedClassName {
/**
* Whether the class is external and merging logic should be sipped.
*
* If this is `true`, the class will be treated as if it wasn't a Tailwind class and will be passed through as is.
*/
isExternal?: boolean;
/**
* Modifiers of the class in the order they appear in the class.
*
* @example ['hover', 'dark'] // for `hover:dark:bg-gray-100`
*/
modifiers: string[];
/**
* Whether the class has an `!important` modifier.
*
* @example true // for `hover:dark:!bg-gray-100`
*/
hasImportantModifier: boolean;
/**
* Base class without preceding modifiers.
*
* @example 'bg-gray-100' // for `hover:dark:bg-gray-100`
*/
baseClassName: string;
/**
* Index position of a possible postfix modifier in the class.
* If the class has no postfix modifier, this is `undefined`.
*
* This property is prefixed with "maybe" because tailwind-merge does not know whether something is a postfix modifier or part of the base class since it's possible to configure Tailwind CSS classes which include a `/` in the base class name.
*
* If a `maybePostfixModifierPosition` is present, tailwind-merge first tries to match the `baseClassName` without the possible postfix modifier to a class group. If that fails or the matched class group is configured in `postfixLookupClassGroups`, it tries again with the possible postfix modifier.
*
* @example 11 // for `bg-gray-100/50`
*/
maybePostfixModifierPosition: number | undefined;
}
/**
* The dynamic part of the tailwind-merge configuration. When merging multiple configurations, the user can choose to either override or extend the properties of this interface.
*/
interface ConfigGroupsPart<ClassGroupIds extends string, ThemeGroupIds extends string> {
/**
* Theme scales used in classGroups.
*
* The keys are the same as in the Tailwind config but the values are sometimes defined more broadly.
*/
theme: NoInfer<ThemeObject<ThemeGroupIds>>;
/**
* Object with groups of classes.
*
* @example
* {
* // Creates group of classes `group`, `of` and `classes`
* 'group-id': ['group', 'of', 'classes'],
* // Creates group of classes `look-at-me-other` and `look-at-me-group`.
* 'other-group': [{ 'look-at-me': ['other', 'group']}]
* }
*/
classGroups: NoInfer<Record<ClassGroupIds, ClassGroup<ThemeGroupIds>>>;
/**
* Conflicting classes across groups.
*
* The key is the ID of a class group which creates a conflict, values are IDs of class groups which receive a conflict. That means if a class from from the key ID is present, all preceding classes from the values are removed.
*
* A class group ID is the key of a class group in the classGroups object.
*
* @example { gap: ['gap-x', 'gap-y'] }
*/
conflictingClassGroups: NoInfer<Partial<Record<ClassGroupIds, readonly ClassGroupIds[]>>>;
/**
* Postfix modifiers conflicting with other class groups.
*
* A class group ID is the key of a class group in classGroups object.
*
* @example { 'font-size': ['leading'] }
*/
conflictingClassGroupModifiers: NoInfer<Partial<Record<ClassGroupIds, readonly ClassGroupIds[]>>>;
/**
* Class group IDs which should be resolved again with their postfix modifier attached.
*
* This is needed when a slash can make the full class name belong to a different class group than the part before the slash.
*
* @example ['container-type'] // `@container-size/sidebar` should resolve differently from `@container-size`
*/
postfixLookupClassGroups?: readonly NoInferString<ClassGroupIds>[];
/**
* Modifiers whose order among multiple modifiers should be preserved because their order changes which element gets targeted.
*
* tailwind-merge makes sure that classes with these modifiers are not overwritten by classes with the same modifiers with order-sensitive modifiers being in a different position.
*/
orderSensitiveModifiers: string[];
}
/**
* Type of the configuration object that can be passed to `extendTailwindMerge`.
*/
interface ConfigExtension<ClassGroupIds extends string, ThemeGroupIds extends string> extends Partial<ConfigStaticPart> {
override?: PartialConfigGroupsPart<ClassGroupIds, ThemeGroupIds>;
extend?: PartialConfigGroupsPart<ClassGroupIds, ThemeGroupIds>;
}
interface PartialConfigGroupsPart<ClassGroupIds extends string, ThemeGroupIds extends string> {
theme?: NoInfer<Partial<ThemeObject<ThemeGroupIds>>>;
classGroups?: NoInfer<Partial<Record<ClassGroupIds, ClassGroup<ThemeGroupIds>>>>;
conflictingClassGroups?: NoInfer<Partial<Record<ClassGroupIds, readonly ClassGroupIds[]>>>;
conflictingClassGroupModifiers?: NoInfer<Partial<Record<ClassGroupIds, readonly ClassGroupIds[]>>>;
postfixLookupClassGroups?: readonly NoInferString<ClassGroupIds>[];
orderSensitiveModifiers?: string[];
}
type ThemeObject<ThemeGroupIds extends string> = Record<ThemeGroupIds, ClassGroup<ThemeGroupIds>>;
type ClassGroup<ThemeGroupIds extends string> = readonly ClassDefinition<ThemeGroupIds>[];
type ClassDefinition<ThemeGroupIds extends string> = string | ClassValidator | ThemeGetter | ClassObject<ThemeGroupIds>;
type ClassValidator = (classPart: string) => boolean;
interface ThemeGetter {
(theme: ThemeObject<AnyThemeGroupIds>): ClassGroup<AnyClassGroupIds>;
isThemeGetter: true;
}
type ClassObject<ThemeGroupIds extends string> = Record<string, readonly ClassDefinition<ThemeGroupIds>[]>;
/**
* Hack from https://stackoverflow.com/questions/56687668/a-way-to-disable-type-argument-inference-in-generics/56688073#56688073
*
* Could be replaced with NoInfer utility type from TypeScript (https://www.typescriptlang.org/docs/handbook/utility-types.html#noinfertype), but that is only supported in TypeScript 5.4 or higher, so I should wait some time before using it.
*/
type NoInfer<T> = [T][T extends any ? 0 : never];
/**
* Special-purpose NoInfer variant for string unions used in array item positions.
*
* The NoInfer helper above doesn't prevent inference from array items in all cases, so this keeps config arrays like `postfixLookupClassGroups` from defining or narrowing class group IDs. Once tailwind-merge only supports TypeScript 5.4 and newer, this can be replaced with TypeScript's built-in NoInfer utility type.
*/
type NoInferString<T extends string> = T extends infer S ? S & string : never;
/**
* Theme group IDs included in the default configuration of tailwind-merge.
*
* If you want to use a scale that is not supported in the `ThemeObject` type,
* consider using `classGroups` instead of `theme`.
*
* @see https://github.com/dcastil/tailwind-merge/blob/main/docs/configuration.md#theme
* (the list of supported keys may vary between `tailwind-merge` versions)
*/
type DefaultThemeGroupIds = 'animate' | 'aspect' | 'blur' | 'breakpoint' | 'color' | 'container' | 'drop-shadow' | 'ease' | 'font-weight' | 'font' | 'inset-shadow' | 'leading' | 'perspective' | 'radius' | 'shadow' | 'spacing' | 'text' | 'text-shadow' | 'tracking';
/**
* Class group IDs included in the default configuration of tailwind-merge.
*/
type DefaultClassGroupIds = 'accent' | 'align-content' | 'align-items' | 'align-self' | 'animate' | 'appearance' | 'aspect' | 'auto-cols' | 'auto-rows' | 'backdrop-blur' | 'backdrop-brightness' | 'backdrop-contrast' | 'backdrop-filter' | 'backdrop-grayscale' | 'backdrop-hue-rotate' | 'backdrop-invert' | 'backdrop-opacity' | 'backdrop-saturate' | 'backdrop-sepia' | 'backface' | 'basis' | 'bg-attachment' | 'bg-blend' | 'bg-clip' | 'bg-color' | 'bg-image' | 'bg-origin' | 'bg-position' | 'bg-repeat' | 'bg-size' | 'block-size' | 'blur' | 'border-collapse' | 'border-color-b' | 'border-color-be' | 'border-color-bs' | 'border-color-e' | 'border-color-l' | 'border-color-r' | 'border-color-s' | 'border-color-t' | 'border-color-x' | 'border-color-y' | 'border-color' | 'border-spacing-x' | 'border-spacing-y' | 'border-spacing' | 'border-style' | 'border-w-b' | 'border-w-be' | 'border-w-bs' | 'border-w-e' | 'border-w-l' | 'border-w-r' | 'border-w-s' | 'border-w-t' | 'border-w-x' | 'border-w-y' | 'border-w' | 'bottom' | 'box-decoration' | 'box' | 'break-after' | 'break-before' | 'break-inside' | 'break' | 'brightness' | 'caption' | 'caret-color' | 'clear' | 'col-end' | 'col-start-end' | 'col-start' | 'color-scheme' | 'columns' | 'container' | 'container-named' | 'container-type' | 'content' | 'contrast' | 'cursor' | 'delay' | 'display' | 'divide-color' | 'divide-style' | 'divide-x-reverse' | 'divide-x' | 'divide-y-reverse' | 'divide-y' | 'drop-shadow' | 'drop-shadow-color' | 'duration' | 'ease' | 'end' | 'field-sizing' | 'fill' | 'filter' | 'flex-direction' | 'flex-wrap' | 'flex' | 'float' | 'font-family' | 'font-features' | 'font-size' | 'font-smoothing' | 'font-stretch' | 'font-style' | 'font-weight' | 'forced-color-adjust' | 'fvn-figure' | 'fvn-fraction' | 'fvn-normal' | 'fvn-ordinal' | 'fvn-slashed-zero' | 'fvn-spacing' | 'gap-x' | 'gap-y' | 'gap' | 'gradient-from-pos' | 'gradient-from' | 'gradient-to-pos' | 'gradient-to' | 'gradient-via-pos' | 'gradient-via' | 'grayscale' | 'grid-cols' | 'grid-flow' | 'grid-rows' | 'grow' | 'h' | 'hue-rotate' | 'hyphens' | 'indent' | 'inline-size' | 'inset-ring-color' | 'inset-ring-w' | 'inset-shadow-color' | 'inset-shadow' | 'inset-be' | 'inset-bs' | 'inset-x' | 'inset-y' | 'inset' | 'invert' | 'isolation' | 'justify-content' | 'justify-items' | 'justify-self' | 'leading' | 'left' | 'line-clamp' | 'list-image' | 'list-style-position' | 'list-style-type' | 'm' | 'mask-clip' | 'mask-composite' | 'mask-image-b-from-color' | 'mask-image-b-from-pos' | 'mask-image-b-to-color' | 'mask-image-b-to-pos' | 'mask-image-conic-from-color' | 'mask-image-conic-from-pos' | 'mask-image-conic-pos' | 'mask-image-conic-to-color' | 'mask-image-conic-to-pos' | 'mask-image-l-from-color' | 'mask-image-l-from-pos' | 'mask-image-l-to-color' | 'mask-image-l-to-pos' | 'mask-image-linear-from-color' | 'mask-image-linear-from-pos' | 'mask-image-linear-pos' | 'mask-image-linear-to-color' | 'mask-image-linear-to-pos' | 'mask-image-r-from-color' | 'mask-image-r-from-pos' | 'mask-image-r-to-color' | 'mask-image-r-to-pos' | 'mask-image-radial-from-color' | 'mask-image-radial-from-pos' | 'mask-image-radial-pos' | 'mask-image-radial-shape' | 'mask-image-radial-size' | 'mask-image-radial-to-color' | 'mask-image-radial-to-pos' | 'mask-image-radial' | 'mask-image-t-from-color' | 'mask-image-t-from-pos' | 'mask-image-t-to-color' | 'mask-image-t-to-pos' | 'mask-image-x-from-color' | 'mask-image-x-from-pos' | 'mask-image-x-to-color' | 'mask-image-x-to-pos' | 'mask-image-y-from-color' | 'mask-image-y-from-pos' | 'mask-image-y-to-color' | 'mask-image-y-to-pos' | 'mask-image' | 'mask-mode' | 'mask-origin' | 'mask-position' | 'mask-repeat' | 'mask-size' | 'mask-type' | 'max-block-size' | 'max-h' | 'max-inline-size' | 'max-w' | 'mb' | 'mbe' | 'mbs' | 'me' | 'min-block-size' | 'min-h' | 'min-inline-size' | 'min-w' | 'mix-blend' | 'ml' | 'mr' | 'ms' | 'mt' | 'mx' | 'my' | 'object-fit' | 'object-position' | 'opacity' | 'order' | 'outline-color' | 'outline-offset' | 'outline-style' | 'outline-w' | 'overflow-x' | 'overflow-y' | 'overflow' | 'overscroll-x' | 'overscroll-y' | 'overscroll' | 'p' | 'pb' | 'pbe' | 'pe' | 'perspective-origin' | 'perspective' | 'pl' | 'place-content' | 'place-items' | 'place-self' | 'placeholder-color' | 'pointer-events' | 'position' | 'pr' | 'ps' | 'pbs' | 'pt' | 'px' | 'py' | 'resize' | 'right' | 'ring-color' | 'ring-offset-color' | 'ring-offset-w' | 'ring-w-inset' | 'ring-w' | 'rotate-x' | 'rotate-y' | 'rotate-z' | 'rotate' | 'rounded-b' | 'rounded-bl' | 'rounded-br' | 'rounded-e' | 'rounded-ee' | 'rounded-es' | 'rounded-l' | 'rounded-r' | 'rounded-s' | 'rounded-se' | 'rounded-ss' | 'rounded-t' | 'rounded-tl' | 'rounded-tr' | 'rounded' | 'row-end' | 'row-start-end' | 'row-start' | 'saturate' | 'scale-3d' | 'scale-x' | 'scale-y' | 'scale-z' | 'scale' | 'scrollbar-gutter' | 'scrollbar-thumb-color' | 'scrollbar-track-color' | 'scrollbar-w' | 'scroll-behavior' | 'scroll-m' | 'scroll-mb' | 'scroll-mbe' | 'scroll-me' | 'scroll-ml' | 'scroll-mr' | 'scroll-mbs' | 'scroll-ms' | 'scroll-mt' | 'scroll-mx' | 'scroll-my' | 'scroll-p' | 'scroll-pb' | 'scroll-pbe' | 'scroll-pe' | 'scroll-pl' | 'scroll-pr' | 'scroll-pbs' | 'scroll-ps' | 'scroll-pt' | 'scroll-px' | 'scroll-py' | 'select' | 'sepia' | 'shadow-color' | 'shadow' | 'shrink' | 'size' | 'skew-x' | 'skew-y' | 'skew' | 'snap-align' | 'snap-stop' | 'snap-strictness' | 'snap-type' | 'space-x-reverse' | 'space-x' | 'space-y-reverse' | 'space-y' | 'sr' | 'start' | 'stroke-w' | 'stroke' | 'table-layout' | 'tab-size' | 'text-alignment' | 'text-color' | 'text-decoration-color' | 'text-decoration-style' | 'text-decoration-thickness' | 'text-decoration' | 'text-overflow' | 'text-shadow' | 'text-shadow-color' | 'text-transform' | 'text-wrap' | 'top' | 'touch-pz' | 'touch-x' | 'touch-y' | 'touch' | 'tracking' | 'transform-origin' | 'transform-style' | 'transform' | 'transition-behavior' | 'transition' | 'translate-none' | 'translate-x' | 'translate-y' | 'translate-z' | 'translate' | 'underline-offset' | 'vertical-align' | 'visibility' | 'w' | 'whitespace' | 'will-change' | 'wrap' | 'zoom' | 'z';
type AnyClassGroupIds = string;
type AnyThemeGroupIds = string;
/**
* type of the tailwind-merge configuration that allows for any possible configuration.
*/
type AnyConfig = Config<AnyClassGroupIds, AnyThemeGroupIds>;
type CreateConfigFirst = () => AnyConfig;
type CreateConfigSubsequent$1 = (config: AnyConfig) => AnyConfig;
type TailwindMerge = (...classLists: ClassNameValue[]) => string;
declare const createTailwindMerge: (createConfigFirst: CreateConfigFirst, ...createConfigRest: CreateConfigSubsequent$1[]) => TailwindMerge;
declare const getDefaultConfig: () => {
readonly cacheSize: 500;
readonly theme: {
readonly animate: readonly ["spin", "ping", "pulse", "bounce"];
readonly aspect: readonly ["video"];
readonly blur: readonly [(value: string) => boolean];
readonly breakpoint: readonly [(value: string) => boolean];
readonly color: readonly [() => boolean];
readonly container: readonly [(value: string) => boolean];
readonly 'drop-shadow': readonly [(value: string) => boolean];
readonly ease: readonly ["in", "out", "in-out"];
readonly font: readonly [(value: string) => boolean];
readonly 'font-weight': readonly ["thin", "extralight", "light", "normal", "medium", "semibold", "bold", "extrabold", "black"];
readonly 'inset-shadow': readonly [(value: string) => boolean];
readonly leading: readonly ["none", "tight", "snug", "normal", "relaxed", "loose"];
readonly perspective: readonly ["dramatic", "near", "normal", "midrange", "distant", "none"];
readonly radius: readonly [(value: string) => boolean];
readonly shadow: readonly [(value: string) => boolean];
readonly spacing: readonly ["px", (value: string) => boolean];
readonly text: readonly [(value: string) => boolean];
readonly 'text-shadow': readonly [(value: string) => boolean];
readonly tracking: readonly ["tighter", "tight", "normal", "wide", "wider", "widest"];
};
readonly classGroups: {
/**
* Aspect Ratio
* @see https://tailwindcss.com/docs/aspect-ratio
*/
readonly aspect: readonly [{
readonly aspect: readonly ["auto", "square", (value: string) => boolean, (value: string) => boolean, (value: string) => boolean, ThemeGetter];
}];
/**
* Container
* @see https://tailwindcss.com/docs/container
* @deprecated since Tailwind CSS v4.0.0
*/
readonly container: readonly ["container"];
/**
* Container Type
* @see https://tailwindcss.com/docs/responsive-design#container-queries
*/
readonly 'container-type': readonly [{
readonly '@container': readonly ["", "normal", "size", (value: string) => boolean, (value: string) => boolean];
}];
/**
* Container Name
* @see https://tailwindcss.com/docs/responsive-design#named-containers
*/
readonly 'container-named': readonly [(value: string) => boolean];
/**
* Columns
* @see https://tailwindcss.com/docs/columns
*/
readonly columns: readonly [{
readonly columns: readonly [(value: string) => boolean, (value: string) => boolean, (value: string) => boolean, ThemeGetter];
}];
/**
* Break After
* @see https://tailwindcss.com/docs/break-after
*/
readonly 'break-after': readonly [{
readonly 'break-after': readonly ["auto", "avoid", "all", "avoid-page", "page", "left", "right", "column"];
}];
/**
* Break Before
* @see https://tailwindcss.com/docs/break-before
*/
readonly 'break-before': readonly [{
readonly 'break-before': readonly ["auto", "avoid", "all", "avoid-page", "page", "left", "right", "column"];
}];
/**
* Break Inside
* @see https://tailwindcss.com/docs/break-inside
*/
readonly 'break-inside': readonly [{
readonly 'break-inside': readonly ["auto", "avoid", "avoid-page", "avoid-column"];
}];
/**
* Box Decoration Break
* @see https://tailwindcss.com/docs/box-decoration-break
*/
readonly 'box-decoration': readonly [{
readonly 'box-decoration': readonly ["slice", "clone"];
}];
/**
* Box Sizing
* @see https://tailwindcss.com/docs/box-sizing
*/
readonly box: readonly [{
readonly box: readonly ["border", "content"];
}];
/**
* Display
* @see https://tailwindcss.com/docs/display
*/
readonly display: readonly ["block", "inline-block", "inline", "flex", "inline-flex", "table", "inline-table", "table-caption", "table-cell", "table-column", "table-column-group", "table-footer-group", "table-header-group", "table-row-group", "table-row", "flow-root", "grid", "inline-grid", "contents", "list-item", "hidden"];
/**
* Screen Reader Only
* @see https://tailwindcss.com/docs/display#screen-reader-only
*/
readonly sr: readonly ["sr-only", "not-sr-only"];
/**
* Floats
* @see https://tailwindcss.com/docs/float
*/
readonly float: readonly [{
readonly float: readonly ["right", "left", "none", "start", "end"];
}];
/**
* Clear
* @see https://tailwindcss.com/docs/clear
*/
readonly clear: readonly [{
readonly clear: readonly ["left", "right", "both", "none", "start", "end"];
}];
/**
* Isolation
* @see https://tailwindcss.com/docs/isolation
*/
readonly isolation: readonly ["isolate", "isolation-auto"];
/**
* Object Fit
* @see https://tailwindcss.com/docs/object-fit
*/
readonly 'object-fit': readonly [{
readonly object: readonly ["contain", "cover", "fill", "none", "scale-down"];
}];
/**
* Object Position
* @see https://tailwindcss.com/docs/object-position
*/
readonly 'object-position': readonly [{
readonly object: readonly ["center", "top", "bottom", "left", "right", "top-left", "left-top", "top-right", "right-top", "bottom-right", "right-bottom", "bottom-left", "left-bottom", (value: string) => boolean, (value: string) => boolean];
}];
/**
* Overflow
* @see https://tailwindcss.com/docs/overflow
*/
readonly overflow: readonly [{
readonly overflow: readonly ["auto", "hidden", "clip", "visible", "scroll"];
}];
/**
* Overflow X
* @see https://tailwindcss.com/docs/overflow
*/
readonly 'overflow-x': readonly [{
readonly 'overflow-x': readonly ["auto", "hidden", "clip", "visible", "scroll"];
}];
/**
* Overflow Y
* @see https://tailwindcss.com/docs/overflow
*/
readonly 'overflow-y': readonly [{
readonly 'overflow-y': readonly ["auto", "hidden", "clip", "visible", "scroll"];
}];
/**
* Overscroll Behavior
* @see https://tailwindcss.com/docs/overscroll-behavior
*/
readonly overscroll: readonly [{
readonly overscroll: readonly ["auto", "contain", "none"];
}];
/**
* Overscroll Behavior X
* @see https://tailwindcss.com/docs/overscroll-behavior
*/
readonly 'overscroll-x': readonly [{
readonly 'overscroll-x': readonly ["auto", "contain", "none"];
}];
/**
* Overscroll Behavior Y
* @see https://tailwindcss.com/docs/overscroll-behavior
*/
readonly 'overscroll-y': readonly [{
readonly 'overscroll-y': readonly ["auto", "contain", "none"];
}];
/**
* Position
* @see https://tailwindcss.com/docs/position
*/
readonly position: readonly ["static", "fixed", "absolute", "relative", "sticky"];
/**
* Inset
* @see https://tailwindcss.com/docs/top-right-bottom-left
*/
readonly inset: readonly [{
readonly inset: readonly [(value: string) => boolean, "full", "auto", (value: string) => boolean, (value: string) => boolean, ThemeGetter];
}];
/**
* Inset Inline
* @see https://tailwindcss.com/docs/top-right-bottom-left
*/
readonly 'inset-x': readonly [{
readonly 'inset-x': readonly [(value: string) => boolean, "full", "auto", (value: string) => boolean, (value: string) => boolean, ThemeGetter];
}];
/**
* Inset Block
* @see https://tailwindcss.com/docs/top-right-bottom-left
*/
readonly 'inset-y': readonly [{
readonly 'inset-y': readonly [(value: string) => boolean, "full", "auto", (value: string) => boolean, (value: string) => boolean, ThemeGetter];
}];
/**
* Inset Inline Start
* @see https://tailwindcss.com/docs/top-right-bottom-left
* @todo class group will be renamed to `inset-s` in next major release
*/
readonly start: readonly [{
readonly 'inset-s': readonly [(value: string) => boolean, "full", "auto", (value: string) => boolean, (value: string) => boolean, ThemeGetter];
/**
* @deprecated since Tailwind CSS v4.2.0 in favor of `inset-s-*` utilities.
* @see https://github.com/tailwindlabs/tailwindcss/pull/19613
*/
readonly start: readonly [(value: string) => boolean, "full", "auto", (value: string) => boolean, (value: string) => boolean, ThemeGetter];
}];
/**
* Inset Inline End
* @see https://tailwindcss.com/docs/top-right-bottom-left
* @todo class group will be renamed to `inset-e` in next major release
*/
readonly end: readonly [{
readonly 'inset-e': readonly [(value: string) => boolean, "full", "auto", (value: string) => boolean, (value: string) => boolean, ThemeGetter];
/**
* @deprecated since Tailwind CSS v4.2.0 in favor of `inset-e-*` utilities.
* @see https://github.com/tailwindlabs/tailwindcss/pull/19613
*/
readonly end: readonly [(value: string) => boolean, "full", "auto", (value: string) => boolean, (value: string) => boolean, ThemeGetter];
}];
/**
* Inset Block Start
* @see https://tailwindcss.com/docs/top-right-bottom-left
*/
readonly 'inset-bs': readonly [{
readonly 'inset-bs': readonly [(value: string) => boolean, "full", "auto", (value: string) => boolean, (value: string) => boolean, ThemeGetter];
}];
/**
* Inset Block End
* @see https://tailwindcss.com/docs/top-right-bottom-left
*/
readonly 'inset-be': readonly [{
readonly 'inset-be': readonly [(value: string) => boolean, "full", "auto", (value: string) => boolean, (value: string) => boolean, ThemeGetter];
}];
/**
* Top
* @see https://tailwindcss.com/docs/top-right-bottom-left
*/
readonly top: readonly [{
readonly top: readonly [(value: string) => boolean, "full", "auto", (value: string) => boolean, (value: string) => boolean, ThemeGetter];
}];
/**
* Right
* @see https://tailwindcss.com/docs/top-right-bottom-left
*/
readonly right: readonly [{
readonly right: readonly [(value: string) => boolean, "full", "auto", (value: string) => boolean, (value: string) => boolean, ThemeGetter];
}];
/**
* Bottom
* @see https://tailwindcss.com/docs/top-right-bottom-left
*/
readonly bottom: readonly [{
readonly bottom: readonly [(value: string) => boolean, "full", "auto", (value: string) => boolean, (value: string) => boolean, ThemeGetter];
}];
/**
* Left
* @see https://tailwindcss.com/docs/top-right-bottom-left
*/
readonly left: readonly [{
readonly left: readonly [(value: string) => boolean, "full", "auto", (value: string) => boolean, (value: string) => boolean, ThemeGetter];
}];
/**
* Visibility
* @see https://tailwindcss.com/docs/visibility
*/
readonly visibility: readonly ["visible", "invisible", "collapse"];
/**
* Z-Index
* @see https://tailwindcss.com/docs/z-index
*/
readonly z: readonly [{
readonly z: readonly [(value: string) => boolean, "auto", (value: string) => boolean, (value: string) => boolean];
}];
/**
* Flex Basis
* @see https://tailwindcss.com/docs/flex-basis
*/
readonly basis: readonly [{
readonly basis: readonly [(value: string) => boolean, "full", "auto", ThemeGetter, (value: string) => boolean, (value: string) => boolean, ThemeGetter];
}];
/**
* Flex Direction
* @see https://tailwindcss.com/docs/flex-direction
*/
readonly 'flex-direction': readonly [{
readonly flex: readonly ["row", "row-reverse", "col", "col-reverse"];
}];
/**
* Flex Wrap
* @see https://tailwindcss.com/docs/flex-wrap
*/
readonly 'flex-wrap': readonly [{
readonly flex: readonly ["nowrap", "wrap", "wrap-reverse"];
}];
/**
* Flex
* @see https://tailwindcss.com/docs/flex
*/
readonly flex: readonly [{
readonly flex: readonly [(value: string) => boolean, (value: string) => boolean, "auto", "initial", "none", (value: string) => boolean];
}];
/**
* Flex Grow
* @see https://tailwindcss.com/docs/flex-grow
*/
readonly grow: readonly [{
readonly grow: readonly ["", (value: string) => boolean, (value: string) => boolean, (value: string) => boolean];
}];
/**
* Flex Shrink
* @see https://tailwindcss.com/docs/flex-shrink
*/
readonly shrink: readonly [{
readonly shrink: readonly ["", (value: string) => boolean, (value: string) => boolean, (value: string) => boolean];
}];
/**
* Order
* @see https://tailwindcss.com/docs/order
*/
readonly order: readonly [{
readonly order: readonly [(value: string) => boolean, "first", "last", "none", (value: string) => boolean, (value: string) => boolean];
}];
/**
* Grid Template Columns
* @see https://tailwindcss.com/docs/grid-template-columns
*/
readonly 'grid-cols': readonly [{
readonly 'grid-cols': readonly [(value: string) => boolean, "none", "subgrid", (value: string) => boolean, (value: string) => boolean];
}];
/**
* Grid Column Start / End
* @see https://tailwindcss.com/docs/grid-column
*/
readonly 'col-start-end': readonly [{
readonly col: readonly ["auto", {
readonly span: readonly ["full", (value: string) => boolean, (value: string) => boolean, (value: string) => boolean];
}, (value: string) => boolean, (value: string) => boolean, (value: string) => boolean];
}];
/**
* Grid Column Start
* @see https://tailwindcss.com/docs/grid-column
*/
readonly 'col-start': readonly [{
readonly 'col-start': readonly [(value: string) => boolean, "auto", (value: string) => boolean, (value: string) => boolean];
}];
/**
* Grid Column End
* @see https://tailwindcss.com/docs/grid-column
*/
readonly 'col-end': readonly [{
readonly 'col-end': readonly [(value: string) => boolean, "auto", (value: string) => boolean, (value: string) => boolean];
}];
/**
* Grid Template Rows
* @see https://tailwindcss.com/docs/grid-template-rows
*/
readonly 'grid-rows': readonly [{
readonly 'grid-rows': readonly [(value: string) => boolean, "none", "subgrid", (value: string) => boolean, (value: string) => boolean];
}];
/**
* Grid Row Start / End
* @see https://tailwindcss.com/docs/grid-row
*/
readonly 'row-start-end': readonly [{
readonly row: readonly ["auto", {
readonly span: readonly ["full", (value: string) => boolean, (value: string) => boolean, (value: string) => boolean];
}, (value: string) => boolean, (value: string) => boolean, (value: string) => boolean];
}];
/**
* Grid Row Start
* @see https://tailwindcss.com/docs/grid-row
*/
readonly 'row-start': readonly [{
readonly 'row-start': readonly [(value: string) => boolean, "auto", (value: string) => boolean, (value: string) => boolean];
}];
/**
* Grid Row End
* @see https://tailwindcss.com/docs/grid-row
*/
readonly 'row-end': readonly [{
readonly 'row-end': readonly [(value: string) => boolean, "auto", (value: string) => boolean, (value: string) => boolean];
}];
/**
* Grid Auto Flow
* @see https://tailwindcss.com/docs/grid-auto-flow
*/
readonly 'grid-flow': readonly [{
readonly 'grid-flow': readonly ["row", "col", "dense", "row-dense", "col-dense"];
}];
/**
* Grid Auto Columns
* @see https://tailwindcss.com/docs/grid-auto-columns
*/
readonly 'auto-cols': readonly [{
readonly 'auto-cols': readonly ["auto", "min", "max", "fr", (value: string) => boolean, (value: string) => boolean];
}];
/**
* Grid Auto Rows
* @see https://tailwindcss.com/docs/grid-auto-rows
*/
readonly 'auto-rows': readonly [{
readonly 'auto-rows': readonly ["auto", "min", "max", "fr", (value: string) => boolean, (value: string) => boolean];
}];
/**
* Gap
* @see https://tailwindcss.com/docs/gap
*/
readonly gap: readonly [{
readonly gap: readonly [(value: string) => boolean, (value: string) => boolean, ThemeGetter];
}];
/**
* Gap X
* @see https://tailwindcss.com/docs/gap
*/
readonly 'gap-x': readonly [{
readonly 'gap-x': readonly [(value: string) => boolean, (value: string) => boolean, ThemeGetter];
}];
/**
* Gap Y
* @see https://tailwindcss.com/docs/gap
*/
readonly 'gap-y': readonly [{
readonly 'gap-y': readonly [(value: string) => boolean, (value: string) => boolean, ThemeGetter];
}];
/**
* Justify Content
* @see https://tailwindcss.com/docs/justify-content
*/
readonly 'justify-content': readonly [{
readonly justify: readonly ["start", "end", "center", "between", "around", "evenly", "stretch", "baseline", "center-safe", "end-safe", "normal"];
}];
/**
* Justify Items
* @see https://tailwindcss.com/docs/justify-items
*/
readonly 'justify-items': readonly [{
readonly 'justify-items': readonly ["start", "end", "center", "stretch", "center-safe", "end-safe", "normal"];
}];
/**
* Justify Self
* @see https://tailwindcss.com/docs/justify-self
*/
readonly 'justify-self': readonly [{
readonly 'justify-self': readonly ["auto", "start", "end", "center", "stretch", "center-safe", "end-safe"];
}];
/**
* Align Content
* @see https://tailwindcss.com/docs/align-content
*/
readonly 'align-content': readonly [{
readonly content: readonly ["normal", "start", "end", "center", "between", "around", "evenly", "stretch", "baseline", "center-safe", "end-safe"];
}];
/**
* Align Items
* @see https://tailwindcss.com/docs/align-items
*/
readonly 'align-items': readonly [{
readonly items: readonly ["start", "end", "center", "stretch", "center-safe", "end-safe", {
readonly baseline: readonly ["", "last"];
}];
}];
/**
* Align Self
* @see https://tailwindcss.com/docs/align-self
*/
readonly 'align-self': readonly [{
readonly self: readonly ["auto", "start", "end", "center", "stretch", "center-safe", "end-safe", {
readonly baseline: readonly ["", "last"];
}];
}];
/**
* Place Content
* @see https://tailwindcss.com/docs/place-content
*/
readonly 'place-content': readonly [{
readonly 'place-content': readonly ["start", "end", "center", "between", "around", "evenly", "stretch", "baseline", "center-safe", "end-safe"];
}];
/**
* Place Items
* @see https://tailwindcss.com/docs/place-items
*/
readonly 'place-items': readonly [{
readonly 'place-items': readonly ["start", "end", "center", "stretch", "center-safe", "end-safe", "baseline"];
}];
/**
* Place Self
* @see https://tailwindcss.com/docs/place-self
*/
readonly 'place-self': readonly [{
readonly 'place-self': readonly ["auto", "start", "end", "center", "stretch", "center-safe", "end-safe"];
}];
/**
* Padding
* @see https://tailwindcss.com/docs/padding
*/
readonly p: readonly [{
readonly p: readonly [(value: string) => boolean, (value: string) => boolean, ThemeGetter];
}];
/**
* Padding Inline
* @see https://tailwindcss.com/docs/padding
*/
readonly px: readonly [{
readonly px: readonly [(value: string) => boolean, (value: string) => boolean, ThemeGetter];
}];
/**
* Padding Block
* @see https://tailwindcss.com/docs/padding
*/
readonly py: readonly [{
readonly py: readonly [(value: string) => boolean, (value: string) => boolean, ThemeGetter];
}];
/**
* Padding Inline Start
* @see https://tailwindcss.com/docs/padding
*/
readonly ps: readonly [{
readonly ps: readonly [(value: string) => boolean, (value: string) => boolean, ThemeGetter];
}];
/**
* Padding Inline End
* @see https://tailwindcss.com/docs/padding
*/
readonly pe: readonly [{
readonly pe: readonly [(value: string) => boolean, (value: string) => boolean, ThemeGetter];
}];
/**
* Padding Block Start
* @see https://tailwindcss.com/docs/padding
*/
readonly pbs: readonly [{
readonly pbs: readonly [(value: string) => boolean, (value: string) => boolean, ThemeGetter];
}];
/**
* Padding Block End
* @see https://tailwindcss.com/docs/padding
*/
readonly pbe: readonly [{
readonly pbe: readonly [(value: string) => boolean, (value: string) => boolean, ThemeGetter];
}];
/**
* Padding Top
* @see https://tailwindcss.com/docs/padding
*/
readonly pt: readonly [{
readonly pt: readonly [(value: string) => boolean, (value: string) => boolean, ThemeGetter];
}];
/**
* Padding Right
* @see https://tailwindcss.com/docs/padding
*/
readonly pr: readonly [{
readonly pr: readonly [(value: string) => boolean, (value: string) => boolean, ThemeGetter];
}];
/**
* Padding Bottom
* @see https://tailwindcss.com/docs/padding
*/
readonly pb: readonly [{
readonly pb: readonly [(value: string) => boolean, (value: string) => boolean, ThemeGetter];
}];
/**
* Padding Left
* @see https://tailwindcss.com/docs/padding
*/
readonly pl: readonly [{
readonly pl: readonly [(value: string) => boolean, (value: string) => boolean, ThemeGetter];
}];
/**
* Margin
* @see https://tailwindcss.com/docs/margin
*/
readonly m: readonly [{
readonly m: readonly ["auto", (value: string) => boolean, (value: string) => boolean, ThemeGetter];
}];
/**
* Margin Inline
* @see https://tailwindcss.com/docs/margin
*/
readonly mx: readonly [{
readonly mx: readonly ["auto", (value: string) => boolean, (value: string) => boolean, ThemeGetter];
}];
/**
* Margin Block
* @see https://tailwindcss.com/docs/margin
*/
readonly my: readonly [{
readonly my: readonly ["auto", (value: string) => boolean, (value: string) => boolean, ThemeGetter];
}];
/**
* Margin Inline Start
* @see https://tailwindcss.com/docs/margin
*/
readonly ms: readonly [{
readonly ms: readonly ["auto", (value: string) => boolean, (value: string) => boolean, ThemeGetter];
}];
/**
* Margin Inline End
* @see https://tailwindcss.com/docs/margin
*/
readonly me: readonly [{
readonly me: readonly ["auto", (value: string) => boolean, (value: string) => boolean, ThemeGetter];
}];
/**
* Margin Block Start
* @see https://tailwindcss.com/docs/margin
*/
readonly mbs: readonly [{
readonly mbs: readonly ["auto", (value: string) => boolean, (value: string) => boolean, ThemeGetter];
}];
/**
* Margin Block End
* @see https://tailwindcss.com/docs/margin
*/
readonly mbe: readonly [{
readonly mbe: readonly ["auto", (value: string) => boolean, (value: string) => boolean, ThemeGetter];
}];
/**
* Margin Top
* @see https://tailwindcss.com/docs/margin
*/
readonly mt: readonly [{
readonly mt: readonly ["auto", (value: string) => boolean, (value: string) => boolean, ThemeGetter];
}];
/**
* Margin Right
* @see https://tailwindcss.com/docs/margin
*/
readonly mr: readonly [{
readonly mr: readonly ["auto", (value: string) => boolean, (value: string) => boolean, ThemeGetter];
}];
/**
* Margin Bottom
* @see https://tailwindcss.com/docs/margin
*/
readonly mb: readonly [{
readonly mb: readonly ["auto", (value: string) => boolean, (value: string) => boolean, ThemeGetter];
}];
/**
* Margin Left
* @see https://tailwindcss.com/docs/margin
*/
readonly ml: readonly [{
readonly ml: readonly ["auto", (value: string) => boolean, (value: string) => boolean, ThemeGetter];
}];
/**
* Space Between X
* @see https://tailwindcss.com/docs/margin#adding-space-between-children
*/
readonly 'space-x': readonly [{
readonly 'space-x': readonly [(value: string) => boolean, (value: string) => boolean, ThemeGetter];
}];
/**
* Space Between X Reverse
* @see https://tailwindcss.com/docs/margin#adding-space-between-children
*/
readonly 'space-x-reverse': readonly ["space-x-reverse"];
/**
* Space Between Y
* @see https://tailwindcss.com/docs/margin#adding-space-between-children
*/
readonly 'space-y': readonly [{
readonly 'space-y': readonly [(value: string) => boolean, (value: string) => boolean, ThemeGetter];
}];
/**
* Space Between Y Reverse
* @see https://tailwindcss.com/docs/margin#adding-space-between-children
*/
readonly 'space-y-reverse': readonly ["space-y-reverse"];
/**
* Size
* @see https://tailwindcss.com/docs/width#setting-both-width-and-height
*/
readonly size: readonly [{
readonly size: readonly [(value: string) => boolean, "auto", "full", "dvw", "dvh", "lvw", "lvh", "svw", "svh", "min", "max", "fit", (value: string) => boolean, (value: string) => boolean, ThemeGetter];
}];
/**
* Inline Size
* @see https://tailwindcss.com/docs/width
*/
readonly 'inline-size': readonly [{
readonly inline: readonly ["auto", (value: string) => boolean, "screen", "full", "dvw", "lvw", "svw", "min", "max", "fit", (value: string) => boolean, (value: string) => boolean, ThemeGetter];
}];
/**
* Min-Inline Size
* @see https://tailwindcss.com/docs/min-width
*/
readonly 'min-inline-size': readonly [{
readonly 'min-inline': readonly ["auto", (value: string) => boolean, "screen", "full", "dvw", "lvw", "svw", "min", "max", "fit", (value: string) => boolean, (value: string) => boolean, ThemeGetter];
}];
/**
* Max-Inline Size
* @see https://tailwindcss.com/docs/max-width
*/
readonly 'max-inline-size': readonly [{
readonly 'max-inline': readonly ["none", (value: string) => boolean, "screen", "full", "dvw", "lvw", "svw", "min", "max", "fit", (value: string) => boolean, (value: string) => boolean, ThemeGetter];
}];
/**
* Block Size
* @see https://tailwindcss.com/docs/height
*/
readonly 'block-size': readonly [{
readonly block: readonly ["auto", (value: string) => boolean, "screen", "full", "lh", "dvh", "lvh", "svh", "min", "max", "fit", (value: string) => boolean, (value: string) => boolean, ThemeGetter];
}];
/**
* Min-Block Size
* @see https://tailwindcss.com/docs/min-height
*/
readonly 'min-block-size': readonly [{
readonly 'min-block': readonly ["auto", (value: string) => boolean, "screen", "full", "lh", "dvh", "lvh", "svh", "min", "max", "fit", (value: string) => boolean, (value: string) => boolean, ThemeGetter];
}];
/**
* Max-Block Size
* @see https://tailwindcss.com/docs/max-height
*/
readonly 'max-block-size': readonly [{
readonly 'max-block': readonly ["none", (value: string) => boolean, "screen", "full", "lh", "dvh", "lvh", "svh", "min", "max", "fit", (value: string) => boolean, (value: string) => boolean, ThemeGetter];
}];
/**
* Width
* @see https://tailwindcss.com/docs/width
*/
readonly w: readonly [{
readonly w: readonly [ThemeGetter, "screen", (value: string) => boolean, "auto", "full", "dvw", "dvh", "lvw", "lvh", "svw", "svh", "min", "max", "fit", (value: string) => boolean, (value: string) => boolean, ThemeGetter];
}];
/**
* Min-Width
* @see https://tailwindcss.com/docs/min-width
*/
readonly 'min-w': readonly [{
readonly 'min-w': readonly [ThemeGetter, "screen", "none", (value: string) => boolean, "auto", "full", "dvw", "dvh", "lvw", "lvh", "svw", "svh", "min", "max", "fit", (value: string) => boolean, (value: string) => boolean, ThemeGetter];
}];
/**
* Max-Width
* @see https://tailwindcss.com/docs/max-width
*/
readonly 'max-w': readonly [{
readonly 'max-w': readonly [ThemeGetter, "screen", "none", "prose", {
readonly screen: readonly [ThemeGetter];
}, (value: string) => boolean, "auto", "full", "dvw", "dvh", "lvw", "lvh", "svw", "svh", "min", "max", "fit", (value: string) => boolean, (value: string) => boolean, ThemeGetter];
}];
/**
* Height
* @see https://tailwindcss.com/docs/height
*/
readonly h: readonly [{
readonly h: readonly ["screen", "lh", (value: string) => boolean, "auto", "full", "dvw", "dvh", "lvw", "lvh", "svw", "svh", "min", "max", "fit", (value: string) => boolean, (value: string) => boolean, ThemeGetter];
}];
/**
* Min-Height
* @see https://tailwindcss.com/docs/min-height
*/
readonly 'min-h': readonly [{
readonly 'min-h': readonly ["screen", "lh", "none", (value: string) => boolean, "auto", "full", "dvw", "dvh", "lvw", "lvh", "svw", "svh", "min", "max", "fit", (value: string) => boolean, (value: string) => boolean, ThemeGetter];
}];
/**
* Max-Height
* @see https://tailwindcss.com/docs/max-height
*/
readonly 'max-h': readonly [{
readonly 'max-h': readonly ["screen", "lh", (value: string) => boolean, "auto", "full", "dvw", "dvh", "lvw", "lvh", "svw", "svh", "min", "max", "fit", (value: string) => boolean, (value: string) => boolean, ThemeGetter];
}];
/**
* Font Size
* @see https://tailwindcss.com/docs/font-size
*/
readonly 'font-size': readonly [{
readonly text: readonly ["base", ThemeGetter, (value: string) => boolean, (value: string) => boolean];
}];
/**
* Font Smoothing
* @see https://tailwindcss.com/docs/font-smoothing
*/
readonly 'font-smoothing': readonly ["antialiased", "subpixel-antialiased"];
/**
* Fo