tailwind-merge
Version:
Merge Tailwind CSS classes without style conflicts
1,095 lines (1,092 loc) • 107 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 = ClassNameValue[];
declare function 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, 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 ID of class group which creates conflict, values are IDs of class groups which receive a conflict.
* A class group ID is the key of a class group in 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[]>>>;
/**
* 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?: PartialPartial<ConfigGroupsPart<ClassGroupIds, ThemeGroupIds>>;
extend?: PartialPartial<ConfigGroupsPart<ClassGroupIds, ThemeGroupIds>>;
}
type PartialPartial<T> = {
[P in keyof T]?: T[P] extends any[] ? T[P] : Partial<T[P]>;
};
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];
/**
* 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' | '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' | 'blur' | 'border-collapse' | 'border-color-b' | '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-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' | 'content' | 'contrast' | 'cursor' | 'delay' | 'display' | 'divide-color' | 'divide-style' | 'divide-x-reverse' | 'divide-x' | 'divide-y-reverse' | 'divide-y' | 'drop-shadow' | 'duration' | 'ease' | 'end' | 'field-sizing' | 'fill' | 'filter' | 'flex-direction' | 'flex-wrap' | 'flex' | 'float' | 'font-family' | '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' | 'inset-ring-color' | 'inset-ring-w' | 'inset-shadow-color' | 'inset-shadow' | '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' | 'max-h' | 'max-w' | 'mb' | 'me' | 'min-h' | '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' | 'pe' | 'perspective-origin' | 'perspective' | 'pl' | 'place-content' | 'place-items' | 'place-self' | 'placeholder-color' | 'pointer-events' | 'position' | 'pr' | 'ps' | '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' | 'scroll-behavior' | 'scroll-m' | 'scroll-mb' | 'scroll-me' | 'scroll-ml' | 'scroll-mr' | 'scroll-ms' | 'scroll-mt' | 'scroll-mx' | 'scroll-my' | 'scroll-p' | 'scroll-pb' | 'scroll-pe' | 'scroll-pl' | 'scroll-pr' | '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' | 'text-alignment' | 'text-color' | 'text-decoration-color' | 'text-decoration-style' | 'text-decoration-thickness' | 'text-decoration' | 'text-overflow' | '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' | '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 function 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 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"];
/**
* 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 ["bottom", "center", "left", "left-bottom", "left-top", "right", "right-bottom", "right-top", "top", (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"];
/**
* Top / Right / Bottom / Left
* @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];
}];
/**
* Right / Left
* @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];
}];
/**
* Top / Bottom
* @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];
}];
/**
* Start
* @see https://tailwindcss.com/docs/top-right-bottom-left
*/
readonly start: readonly [{
readonly start: readonly [(value: string) => boolean, "full", "auto", (value: string) => boolean, (value: string) => boolean, ThemeGetter];
}];
/**
* End
* @see https://tailwindcss.com/docs/top-right-bottom-left
*/
readonly end: readonly [{
readonly end: 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", "normal"];
}];
/**
* Justify Items
* @see https://tailwindcss.com/docs/justify-items
*/
readonly 'justify-items': readonly [{
readonly 'justify-items': readonly ["start", "end", "center", "stretch", "normal"];
}];
/**
* Justify Self
* @see https://tailwindcss.com/docs/justify-self
*/
readonly 'justify-self': readonly [{
readonly 'justify-self': readonly ["auto", "start", "end", "center", "stretch"];
}];
/**
* 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"];
}];
/**
* Align Items
* @see https://tailwindcss.com/docs/align-items
*/
readonly 'align-items': readonly [{
readonly items: readonly ["start", "end", "center", "stretch", "baseline"];
}];
/**
* Align Self
* @see https://tailwindcss.com/docs/align-self
*/
readonly 'align-self': readonly [{
readonly self: readonly ["auto", "start", "end", "center", "stretch", "baseline"];
}];
/**
* 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"];
}];
/**
* Place Items
* @see https://tailwindcss.com/docs/place-items
*/
readonly 'place-items': readonly [{
readonly 'place-items': readonly ["start", "end", "center", "stretch", "baseline"];
}];
/**
* Place Self
* @see https://tailwindcss.com/docs/place-self
*/
readonly 'place-self': readonly [{
readonly 'place-self': readonly ["auto", "start", "end", "center", "stretch"];
}];
/**
* Padding
* @see https://tailwindcss.com/docs/padding
*/
readonly p: readonly [{
readonly p: readonly [(value: string) => boolean, (value: string) => boolean, ThemeGetter];
}];
/**
* Padding X
* @see https://tailwindcss.com/docs/padding
*/
readonly px: readonly [{
readonly px: readonly [(value: string) => boolean, (value: string) => boolean, ThemeGetter];
}];
/**
* Padding Y
* @see https://tailwindcss.com/docs/padding
*/
readonly py: readonly [{
readonly py: readonly [(value: string) => boolean, (value: string) => boolean, ThemeGetter];
}];
/**
* Padding Start
* @see https://tailwindcss.com/docs/padding
*/
readonly ps: readonly [{
readonly ps: readonly [(value: string) => boolean, (value: string) => boolean, ThemeGetter];
}];
/**
* Padding End
* @see https://tailwindcss.com/docs/padding
*/
readonly pe: readonly [{
readonly pe: 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 X
* @see https://tailwindcss.com/docs/margin
*/
readonly mx: readonly [{
readonly mx: readonly ["auto", (value: string) => boolean, (value: string) => boolean, ThemeGetter];
}];
/**
* Margin Y
* @see https://tailwindcss.com/docs/margin
*/
readonly my: readonly [{
readonly my: readonly ["auto", (value: string) => boolean, (value: string) => boolean, ThemeGetter];
}];
/**
* Margin Start
* @see https://tailwindcss.com/docs/margin
*/
readonly ms: readonly [{
readonly ms: readonly ["auto", (value: string) => boolean, (value: string) => boolean, ThemeGetter];
}];
/**
* Margin End
* @see https://tailwindcss.com/docs/margin
*/
readonly me: readonly [{
readonly me: 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];
}];
/**
* 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", (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", "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", (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"];
/**
* Font Style
* @see https://tailwindcss.com/docs/font-style
*/
readonly 'font-style': readonly ["italic", "not-italic"];
/**
* Font Weight
* @see https://tailwindcss.com/docs/font-weight
*/
readonly 'font-weight': readonly [{
readonly font: readonly [ThemeGetter, (value: string) => boolean, (value: string) => boolean];
}];
/**
* Font Stretch
* @see https://tailwindcss.com/docs/font-stretch
*/
readonly 'font-stretch': readonly [{
readonly 'font-stretch': readonly ["ultra-condensed", "extra-condensed", "condensed", "semi-condensed", "normal", "semi-expanded", "expanded", "extra-expanded", "ultra-expanded", (value: string) => boolean, (value: string) => boolean];
}];
/**
* Font Family
* @see https://tailwindcss.com/docs/font-family
*/
readonly 'font-family': readonly [{
readonly font: readonly [(value: string) => boolean, (value: string) => boolean, ThemeGetter];
}];
/**
* Font Variant Numeric
* @see https://tailwindcss.com/docs/font-variant-numeric
*/
readonly 'fvn-normal': readonly ["normal-nums"];
/**
* Font Variant Numeric
* @see https://tailwindcss.com/docs/font-variant-numeric
*/
readonly 'fvn-ordinal': readonly ["ordinal"];
/**
* Font Variant Numeric
* @see https://tailwindcss.com/docs/font-variant-numeric
*/
readonly 'fvn-slashed-zero': readonly ["slashed-zero"];
/**
* Font Variant Numeric
* @see https://tailwindcss.com/docs/font-variant-numeric
*/
readonly 'fvn-figure': readonly ["lining-nums", "oldstyle-nums"];
/**
* Font Variant Numeric
* @see https://tailwindcss.com/docs/font-variant-numeric
*/
readonly 'fvn-spacing': readonly ["proportional-nums", "tabular-nums"];
/**
* Font Variant Numeric
* @see https://tailwindcss.com/docs/font-variant-numeric
*/
readonly 'fvn-fraction': readonly ["diagonal-fractions", "stacked-fractions"];
/**
* Letter Spacing
* @see https://tailwindcss.com/docs/letter-spacing
*/
readonly tracking: readonly [{
readonly tracking: readonly [ThemeGetter, (value: string) => boolean, (value: string) => boolean];
}];
/**
* Line Clamp
* @see https://tailwindcss.com/docs/line-clamp
*/
readonly 'line-clamp': readonly [{
readonly 'line-clamp': readonly [(value: string) => boolean, "none", (value: string) => boolean, (value: string) => boolean];
}];
/**
* Line Height
* @see https://tailwindcss.com/docs/line-height
*/
readonly leading: readonly [{
readonly leading: readonly [ThemeGetter, (value: string) => boolean, (value: string) => boolean, ThemeGetter];
}];
/**
* List Style Image
* @see https://tailwindcss.com/docs/list-style-image
*/
readonly 'list-image': readonly [{
readonly 'list-image': readonly ["none", (value: string) => boolean, (value: string) => boolean];
}];
/**
* List Style Position
* @see https://tailwindcss.com/docs/list-style-position
*/
readonly 'list-style-position': readonly [{
readonly list: readonly ["inside", "outside"];
}];
/**
* List Style Type
* @see https://tailwindcss.com/docs/list-style-type
*/
readonly 'list-style-type': readonly [{
readonly list: readonly ["disc", "decimal", "none", (value: string) => boolean, (value: string) => boolean];
}];
/**
* Text Alignment
* @see https://tailwindcss.com/docs/text-align
*/
readonly 'text-alignment': readonly [{
readonly text: readonly ["left", "center", "right", "justify", "start", "end"];
}];
/**
* Placeholder Color
* @deprecated since Tailwind CSS v3.0.0
* @see https://v3.tailwindcss.com/docs/placeholder-color
*/
readonly 'placeholder-color': readonly [{
readonly placeholder: readonly [ThemeGetter, (value: string) => boolean, (value: string) => boolean];
}];
/**
* Text Color
* @see https://tailwindcss.com/docs/text-color
*/
readonly 'text-color': readonly [{
readonly text: readonly [ThemeGetter, (value: string) => boolean, (value: string) => boolean];
}];
/**
* Text Decoration
* @see https://tailwindcss.com/docs/text-decoration
*/
readonly 'text-decoration': readonly ["underline", "overline", "line-through", "no-underline"];
/**
* Text Decoration Style
* @see https://tailwindcss.com/docs/text-decoration-style
*/
readonly 'text-decoration-style': readonly [{
readonly decoration: readonly ["solid", "dashed", "dotted", "double", "wavy"];
}];
/**
* Text Decoration Thickness
* @see https://tailwindcss.com/docs/text-decoration-thickness
*/
readonly 'text-decoration-thickness': readonly [{
readonly decoration: readonly [(value: string) => boolean, "from-font", "auto", (value: string) => boolean, (value: string) => boolean];
}];
/**
* Text Decoration Color
* @see https://tailwindcss.com/docs/text-decoration-color
*/
readonly 'text-decoration-color': readonly [{
readonly decoration: readonly [ThemeGetter, (value: string) => boolean, (value: string) => boolean];
}];
/**
* Text Underline Offset
* @see https://tailwindcss.com/docs/text-underline-offset
*/
readonly 'underline-offset': readonly [{
readonly 'underline-offset': readonly [(value: string) => boolean, "auto", (value: string) => boolean, (value: string) => boolean];
}];
/**
* Text Transform
* @see https://tailwindcss.com/docs/text-transform
*/
readonly 'text-transform': readonly ["uppercase", "lowercase", "capitalize", "normal-case"];
/**
* Text Overflow
* @see https://tailwindcss.com/docs/text-overflow
*/
readonly 'text-overflow': readonly ["truncate", "text-ellipsis", "text-clip"];
/**
* Text Wrap
* @see https://tailwindcss.com/docs/text-wrap
*/
readonly 'text-wrap': readonly [{
readonly text: readonly ["wrap", "nowrap", "balance", "pretty"];
}];
/**
* Text Indent
* @see https://tailwindcss.com/docs/text-indent
*/
readonly indent: readonly [{
readonly indent: readonly [(value: string) => boolean, (value: string) => boolean, ThemeGetter];
}];
/**
* Vertical Alignment
* @see https://tailwindcss.com/docs/vertical-align
*/
readonly 'vertical-align': readonly [{
readonly align: readonly ["baseline", "top", "middle", "bottom", "text-top", "text-bottom", "sub", "super", (value: string) => boolean, (value: string) => boolean];
}];
/**
* Whitespace
* @see https://tailwindcss.com/docs/whitespace
*/
readonly whitespace: readonly [{
readonly whitespace: readonly ["normal", "nowrap", "pre", "pre-line", "pre-wrap", "break-spaces"];
}];
/**
* Word Break
* @see https://tailwindcss.com/docs/word-break
*/
readonly break: readonly [{
readonly break: readonly ["normal", "words", "all", "keep"];
}];
/**
* Hyphens
* @see https://tailwindcss.com/docs/hyphens
*/
readonly hyphens: readonly [{
readonly hyphens: readonly ["none", "manual", "auto"];
}];
/**
* Content
* @see https://tailwindcss.com/docs/content
*/
readonly content: readonly [{
readonly content: readonly ["none", (value: string) => boolean, (value: string) => boolean];
}];
/**
* Background Attachment
* @see https://tailwindcss.com/docs/background-attachment
*/
readonly 'bg-attachment': readonly [{
readonly bg: readonly ["fixed", "local", "scroll"];
}];
/**
* Background Clip
* @see https://tailwindcss.com/docs/background-clip
*/
readonly 'bg-clip': readonly [{
readonly 'bg-clip': readonly ["border", "padding", "content", "text"];
}];
/**
* Background Origin
* @see https://tailwindcss.com/docs/background-origin
*/
readonly 'bg-origin': readonly [{
readonly 'bg-origin': readonly ["border", "padding", "content"];
}];
/**
* Background Position
* @see https://tailwindcss.com/docs/background-position
*/
readonly