tailwindest/dist/index.d.mts

typesafe, reusable tailwind

type Truthy = "true";
type Falsy = "false";
/**
 * @description Get valid `object` key type
 * @returns `boolean` | `string` | `number`
 * @example
 * ```ts
 * type Inferred = GetVariantsKey<'true'>
 * // true
 * type Inferred = GetVariantsKey<'false'>
 * // false
 * type Inferred = GetVariantsKey<'true' | 'false'>
 * // boolean
 * type Inferred = GetVariantsKey<'true' | 'false' | 'hi'>
 * // boolean | 'hi'
 * type Inferred = GetVariantsKey<'true' | 'false' | 'hi' | 1>
 * // boolean | 'hi' | 1
 * type Inferred = GetVariantsKey<undefined>
 * // 'Error: typeof variants key should be <string> | <number> | <'true' | 'false'>'
 * ```
 */
type GetVariantsKey<VariantsKey> = VariantsKey extends string | number ? VariantsKey extends Truthy ? VariantsKey extends Falsy ? boolean : true : VariantsKey extends Falsy ? false : VariantsKey : "Error: typeof variants key should be <string> | <number> | <'true' | 'false'>";
type UndefinableString = string | undefined;

declare const createTools: <StyleType>() => {
    /**
     * @description Create `tailwind` style
     * @example
     * ```tsx
     * // Define tailwind style
     * const box = tw.style({
     *      display: "flex",
     *      alignItems: "items-center",
     *      justifyContent: "justify-center",
     * })
     *
     * // Use it in component
     * const Box = ({ children }) => {
     *      return <div className={box.class}>{children}</div>
     * }
     * ```
     */
    style: (style: StyleType) => {
        class: string;
        style: StyleType;
        compose: (...styles: Array<StyleType>) => {
            class: string;
            style: StyleType;
        };
    };
    /**
     * @description Create `toggle` style function
     * @example
     * ```tsx
     * // Define toggle style
     * const themeBtn = tw.toggle({
     *      truthy: {}, // 🌝 light mode
     *      falsy: {}, // 🌚 dark mode
     *      base: {}, // [optional] base style
     * })
     *
     * // Use it in component
     * const ThemeBtn = ({
     *      children,
     * }) => {
     *      const [isLight, setIsLight] = useState(false)
     *      return (
     *          <button
     *              className={themeBtn.class(isLight)}
     *          >
     *              {children}
     *          </button>
     *      )
     * }
     * ```
     */
    toggle: (toggleVariants: {
        truthy: StyleType;
        falsy: StyleType;
        base?: StyleType;
    }) => {
        class: (styleArgs: boolean) => string;
        style: (styleArgs: boolean) => StyleType;
        compose: (...styles: Array<StyleType>) => {
            class: (styleArgs: boolean) => string;
            style: (styleArgs: boolean) => StyleType;
        };
    };
    /**
     * @description Create `rotary` style function
     * @example
     * ```tsx
     * // Define rotary style
     * const btnType = tw.rotary({
     *      default: {},
     *      success: {},
     *      warning: {},
     *      base: {}, // [optional] base style
     * })
     *
     * // Get rotary type with GetVariants
     * interface BtnProps {
     *      onClick: () => void
     *      children: ReactNode
     *      type?: GetVariants<typeof btnType>
     * }
     *
     * // Use it in component
     * const Btn = ({
     *      onClick,
     *      children,
     *      type = "default",
     * }: BtnProps) => (
     *      <button
     *          className={btn.class(type)}
     *          onClick={onClick}
     *      >
     *          {children}
     *      </button>
     * )
     * ```
     */
    rotary: <VariantsStylesType>({ base, ...styles }: { [key in keyof VariantsStylesType]: StyleType; } & {
        base?: StyleType;
    }) => {
        class: (styleArgs: GetVariantsKey<Exclude<keyof VariantsStylesType, "base">>) => string;
        style: (styleArgs: GetVariantsKey<Exclude<keyof VariantsStylesType, "base">>) => StyleType;
        compose: (...styles: Array<StyleType>) => {
            class: (styleArgs: GetVariantsKey<Exclude<keyof VariantsStylesType, "base">>) => string;
            style: (styleArgs: GetVariantsKey<Exclude<keyof VariantsStylesType, "base">>) => StyleType;
        };
    };
    /**
     * @description Create `variants` style function. `variants` are combination of rotary switch.
     * @example
     * ```tsx
     * // Define variants style
     * const btn = tw.variants({
     *      variants: {
     *          type: {
     *              default: {},
     *              success: {},
     *              warning: {},
     *          },
     *          size: {
     *              sm: {},
     *              md: {},
     *              lg: {},
     *          },
     *          light: {
     *              true: {}, // truthy boolean
     *              false: {}, // falsy boolean
     *          }
     *      },
     *      base: {}, // [optional] base style
     * })
     *
     * // Get variants type with GetVariants
     * interface BtnProps extends GetVariants<typeof btn> {
     *      onClick: () => void
     *      children: ReactNode
     * }
     *
     * // Use it in component
     * const Btn = ({
     *      children,
     *      size = "md",
     *      type = "default",
     *      light = false,
     *      onClick,
     * }: BtnProps) => (
     *      <button
     *          className={btn.class({ size, type, light })}
     *          onClick={onClick}
     *      >
     *          {children}
     *      </button>
     * )
     * ```
     */
    variants: <Variants>({ base, variants, }: {
        variants: { [VariantsKey in keyof Variants]: Record<keyof Variants[VariantsKey], StyleType>; };
    } & {
        base?: StyleType;
    }) => {
        class: (styleArgs: { [VariantsKey in keyof Variants]: GetVariantsKey<keyof Variants[VariantsKey]>; }) => string;
        style: (styleArgs: { [VariantsKey in keyof Variants]: GetVariantsKey<keyof Variants[VariantsKey]>; }) => StyleType;
        compose: (...styles: Array<StyleType>) => {
            class: (styleArgs: { [VariantsKey in keyof Variants]: GetVariantsKey<keyof Variants[VariantsKey]>; }) => string;
            style: (styleArgs: { [VariantsKey in keyof Variants]: GetVariantsKey<keyof Variants[VariantsKey]>; }) => StyleType;
        };
    };
    /**
     * @description Override style property
     * @returns Merged className `string`
     * @example
     * ```tsx
     * // Add specific style props
     * const Text = ({
     *      children,
     *      ...option
     * }: PropsWithChildren<Pick<Tailwindest, "color" | "fontWeight">>) => {
     *    return (
     *        <p
     *            className={mergeProps(
     *                {
     *                    // base style
     *                    color: "text-gray-950",
     *                    fontWeight: "font-bold",
     *                    fontSize: "text-base",
     *                },
     *                // override color and fontWeight
     *                option
     *            )}
     *        >
     *            {children}
     *        </p>
     *    )
     * }
     * ```
     */
    mergeProps: (baseStyle: StyleType, styleProps: StyleType) => string;
};

/**
 * @description Get variants type of `rotary` and `variants`
 * @example
 * ```ts
 * // 🛠️ rotary
 * const rotaryBtn = tw.rotary({
 *      success: {},
 *      fail: {},
 *      true: {}, // only truthy boolean
 * })
 * type InferredRotary = GetVariants<typeof rotaryBtn>
 * type InferredRotary = "success" | "fail" | true
 *
 * // 🛠️ variants
 * const complexBtn = tw.variants({
 *      variants: {
 *          size: {
 *              sm: {},
 *              md: {},
 *              lg: {},
 *          },
 *          fail: {
 *              success: {},
 *              fail: {},
 *          },
 *          light: {
 *              true: {}, // truthy boolean
 *              false: {}, // falsy boolean
 *          }
 *      }
 * })
 * type InferredVariants = GetVariants<typeof complexBtn>
 * type InferredVariants = {
 *      size?: "sm" | "md" | "lg"
 *      type?: "success" | "fail"
 *      light?: boolean
 * }
 *
 * // 🚫 never
 * const never = tw.toggle({
 *      truthy: {},
 *      falsy: {}
 * })
 * type InferredToggle = GetVariants<typeof never>
 * type InferredToggle = never
 * ```
 */
type GetVariants<TypeofVariants> = TypeofVariants extends {
    class: (variants: infer Variants) => unknown;
} ? Variants extends string ? Variants : Partial<Variants> : never;

type TailwindBreakConditions = "contrast-more" | "contrast-less" | "motion-reduce" | "motion-safe" | "portrait" | "landscape" | "print" | "rtl" | "ltr" | "forced-colors" | "sm" | "md" | "lg" | "xl" | "2xl" | "max-sm" | "max-md" | "max-lg" | "max-xl" | "max-2xl" | "aria-checked" | "aria-disabled" | "aria-expanded" | "aria-hidden" | "aria-pressed" | "aria-readonly" | "aria-required" | "aria-selected" | "dark";

type TailwindGlobalConditions = "*";

type TailwindPseudoClassConditions = "hover" | "active" | "first" | "last" | "only" | "odd" | "even" | "first-of-type" | "last-of-type" | "only-of-type" | "empty" | "enabled" | "indeterminate" | "default" | "required" | "valid" | "invalid" | "in-range" | "out-of-range" | "placeholder-shown" | "autofill" | "read-only" | "checked" | "disabled" | "visited" | "target" | "focus" | "focus-within" | "focus-visible" | "optional";

type TailwindPseudoElementConditions = "before" | "after" | "placeholder" | "file" | "marker" | "backdrop" | "selection" | "first-line" | "first-letter";

type Literalize<Literal> = Literal extends string ? string extends Literal ? never : Literal : never;
type RecordWithPartial<Key extends string, Value> = {
    [P in Key]?: Value;
};
type PlugBase = string | undefined;
type Pluggable<Plug> = Literalize<Exclude<Plug, "">>;
type PluginOption<OptionKey extends string, OptionValueType = string> = RecordWithPartial<OptionKey, OptionValueType>;
type PluginVariants<Title extends string, Value extends string> = `${Title}-${Value}`;
type PluginVariantsWithDirection<Title extends string, Value extends string> = PluginVariants<Title | `-${Title}`, Value>;
type ToPlugin<Value extends string, Plug extends PlugBase = ""> = Value | Pluggable<Plug>;
type ToPluginWithTitle<Title extends string, Value extends string, Plug extends PlugBase = ""> = PluginVariants<Title, ToPlugin<Value, Plug>>;

type TailwindNestConditionIdentifierOption = {
    /**
     * @description break condition identifier
     * @example break condition list
     * ```ts
     * type TailwindBreakConditions =
            | "contrast-more"
            | "contrast-less"
            | "motion-reduce"
            | "motion-safe"
            | "portrait"
            | "landscape"
            | "print"
            | "rtl"
            | "ltr"
            | "sm"
            | "md"
            | "lg"
            | "xl"
            | "2xl"
            | "max-sm"
            | "max-md"
            | "max-lg"
            | "max-xl"
            | "max-2xl"
            | "aria-checked"
            | "aria-disabled"
            | "aria-expanded"
            | "aria-hidden"
            | "aria-pressed"
            | "aria-readonly"
            | "aria-required"
            | "aria-selected"
            | "dark"
     * ```
     */
    breakIdentifier: string;
    /**
     * @description pseudo class condition identifier
     * @example pseudo class condition list
     * ```ts
     * type TailwindPseudoClassConditions =
            | "hover"
            | "active"
            | "first"
            | "last"
            | "only"
            | "odd"
            | "even"
            | "first-of-type"
            | "last-of-type"
            | "only-of-type"
            | "empty"
            | "enabled"
            | "indeterminate"
            | "default"
            | "required"
            | "valid"
            | "invalid"
            | "in-range"
            | "out-of-range"
            | "placeholder-shown"
            | "autofill"
            | "read-only"
            | "checked"
            | "disabled"
            | "visited"
            | "target"
            | "focus"
            | "focus-within"
            | "focus-visible"
            | "optional"
     * ```
     */
    pseudoClassIdentifier: string;
    /**
     * @description pseudo element condition identifier
     * @example pseudo element condition list
     * ```ts
     * type TailwindPseudoElementConditions =
            | "before"
            | "after"
            | "placeholder"
            | "file"
            | "marker"
            | "backdrop"
            | "selection"
            | "first-line"
            | "first-letter"

     * ```
     */
    pseudoElementIdentifier: string;
};
type TailwindestNestConditions = {
    break: string;
    pseudoClass: string;
    pseudoElement: string;
};
type GetTailwindestBaseNestKeys<IdentifierOption extends TailwindNestConditionIdentifierOption, NestConditions extends TailwindestNestConditions> = `${IdentifierOption["breakIdentifier"]}${NestConditions["break"]}` | `${IdentifierOption["pseudoClassIdentifier"]}${NestConditions["pseudoClass"]}` | `${IdentifierOption["pseudoElementIdentifier"]}${NestConditions["pseudoElement"]}`;
type GetTailwindestCustomScreenKeys<IdentifierOption extends TailwindNestConditionIdentifierOption, PluginOptions extends TailwindestNestPluginOptions> = `${IdentifierOption["breakIdentifier"]}${Pluggable<PluginOptions["screens"]>}`;
/**
 * @description aria prefix of custom properties
 * @example
 * ```ts
 * type MyAria = "checked" | "disabled"
 * type Result = "aria-checked" | "aria-disabled"
 * ```
 */
type ARIA_PREFIX = "aria-";
type GetTailwindestCustomAriaKeys<IdentifierOption extends TailwindNestConditionIdentifierOption, PluginOptions extends TailwindestNestPluginOptions> = `${IdentifierOption["breakIdentifier"]}${ARIA_PREFIX}${Pluggable<PluginOptions["aria"]>}`;
type TailwindestNestPluginOptions = {
    screens: UndefinableString;
    aria: UndefinableString;
};
type TailwindestNestKeys<IdentifierOption extends TailwindNestConditionIdentifierOption, PluginOptions extends TailwindestNestPluginOptions> = TailwindGlobalConditions | GetTailwindestBaseNestKeys<IdentifierOption, {
    break: TailwindBreakConditions;
    pseudoClass: TailwindPseudoClassConditions;
    pseudoElement: TailwindPseudoElementConditions;
}> | GetTailwindestCustomScreenKeys<IdentifierOption, PluginOptions> | GetTailwindestCustomAriaKeys<IdentifierOption, PluginOptions>;

type TailwindForcedColorAdjust = "auto" | "none";
type TailwindForcedColorAdjustType = {
    /**
     *@description Utilities for opting in and out of forced colors.
     *@see {@link https://tailwindcss.com/docs/forced-color-adjust forced color adjust}
     */
    forcedColorAdjust: `forced-color-adjust-${TailwindForcedColorAdjust}`;
};

type TailwindScreenReaders = "sr-only" | "not-sr-only";
type TailwindScreenReadersType = {
    /**
     *@description Utilities for improving accessibility with screen readers.
     *@see {@link https://tailwindcss.com/docs/screen-readers screen readers}
     */
    screenReaders: TailwindScreenReaders;
};

interface TailwindAccessibility extends TailwindScreenReadersType, TailwindForcedColorAdjustType {
}

type TailwindBackgroundAttachmentVariants$1 = "fixed" | "local" | "scroll";
type TailwindBackgroundAttachment$1 = `bg-${TailwindBackgroundAttachmentVariants$1}`;
type TailwindBackgroundAttachmentType = {
    /**
     *@description Utilities for controlling how a background image behaves when scrolling.
     *@see {@link https://tailwindcss.com/docs/background-attachment background attachment}
     */
    backgroundAttachment: TailwindBackgroundAttachment$1;
};

type TailwindBackgroundClipVariants$1 = "border" | "padding" | "content" | "text";
type TailwindBackgroundClip$1 = `bg-clip-${TailwindBackgroundClipVariants$1}`;
type TailwindBackgroundClipType = {
    /**
     *@description Utilities for controlling the bounding box of an element's background.
     *@see {@link https://tailwindcss.com/docs/background-clip background clip}
     */
    backgroundClip: TailwindBackgroundClip$1;
};

type TailwindBackgroundColorType<TailwindColor extends string, Plug extends PlugBase = ""> = {
    /**
     *@description Utilities for controlling an element's background color.
     *@see {@link https://tailwindcss.com/docs/background-color background color}
     */
    backgroundColor: `bg-${TailwindColor | Pluggable<Plug>}`;
};

type TailwindBackgroundOriginVariants$1 = "border" | "padding" | "content";
type TailwindBackgroundOrigin$1 = `bg-origin-${TailwindBackgroundOriginVariants$1}`;
type TailwindBackgroundOriginType = {
    /**
     *@description Utilities for controlling how an element's background is positioned relative to borders, padding, and content.
     *@see {@link https://tailwindcss.com/docs/background-origin background origin}
     */
    backgroundOrigin: TailwindBackgroundOrigin$1;
};

type TailwindArbitrary = `[${string}]`;

type TailwindBackgroundPositionVariants$1<Plug extends PlugBase = ""> = "bottom" | "top" | "center" | "left" | "left-bottom" | "left-top" | "right" | "right-bottom" | "right-top" | TailwindArbitrary | Pluggable<Plug>;
type TailwindBackgroundPosition$1<Plug extends PlugBase = ""> = `bg-${TailwindBackgroundPositionVariants$1<Plug>}`;
type TailwindBackgroundPositionType<Plug extends PlugBase = ""> = {
    /**
     *@description Utilities for controlling the position of an element's background image.
     *@see {@link https://tailwindcss.com/docs/background-position background position}
     */
    backgroundPosition: TailwindBackgroundPosition$1<Plug>;
};

type TailwindBackgroundRepeatVariants$1 = "x" | "y" | "round" | "space";
type TailwindBackgroundRepeat$1 = "bg-repeat" | "bg-no-repeat" | `bg-repeat-${TailwindBackgroundRepeatVariants$1}`;
type TailwindBackgroundRepeatType = {
    /**
     *@description Utilities for controlling the repetition of an element's background image.
     *@see {@link https://tailwindcss.com/docs/background-repeat background repeat}
     */
    backgroundRepeat: TailwindBackgroundRepeat$1;
};

type TailwindBackgroundSizeVariants$1<Plug extends PlugBase = ""> = "auto" | "cover" | "contain" | TailwindArbitrary | Pluggable<Plug>;
type TailwindBackgroundSize$1<Plug extends PlugBase = ""> = `bg-${TailwindBackgroundSizeVariants$1<Plug>}`;
type TailwindBackgroundSizeType<Plug extends PlugBase = ""> = {
    /**
     *@description Utilities for controlling the background size of an element's background image.
     *@see {@link https://tailwindcss.com/docs/background-size background size}
     */
    backgroundSize: TailwindBackgroundSize$1<Plug>;
};

type TailwindGradientVariants<Plug extends PlugBase = ""> = "t" | "tr" | "r" | "br" | "b" | "bl" | "l" | "tl" | Pluggable<Plug> | TailwindArbitrary;
type TailwindGradient<Plug extends PlugBase = ""> = "bg-none" | `bg-gradient-to-${TailwindGradientVariants<Plug>}`;
type TailwindBackgroundImageType<Plug extends PlugBase = ""> = {
    /**
     *@description Utilities for controlling an element's gradient background image.
     *@see {@link https://tailwindcss.com/docs/background-image gradient}
     */
    gradient: TailwindGradient<Plug>;
};

type GradientPosition = "0%" | "5%" | "10%" | "15%" | "20%" | "25%" | "30%" | "35%" | "40%" | "45%" | "50%" | "55%" | "60%" | "65%" | "70%" | "75%" | "80%" | "85%" | "90%" | "95%" | "100%";
type TailwindGradientColorStopsType<GradientColor extends string> = {
    /**
     *@description Utilities for controlling the color stops in gradient background image.
     *@see {@link https://tailwindcss.com/docs/gradient-color-stops gradient color start}
     */
    gradientStart: PluginVariants<"from", GradientColor>;
    /**
     *@description Utilities for controlling the color stops in gradient background image.
     *@see {@link https://tailwindcss.com/docs/gradient-color-stops gradient color middle}
     */
    gradientMiddle: PluginVariants<"via", GradientColor>;
    /**
     *@description Utilities for controlling the color stops in gradient background image.
     *@see {@link https://tailwindcss.com/docs/gradient-color-stops gradient color end}
     */
    gradientEnd: PluginVariants<"to", GradientColor>;
    /**
     *@description Utilities for controlling the color stops position in gradient background image.
     *@see {@link https://tailwindcss.com/docs/gradient-color-stops gradient color start position}
     */
    gradientStartPosition: PluginVariants<"from", GradientPosition>;
    /**
     *@description Utilities for controlling the color stops position in gradient background image.
     *@see {@link https://tailwindcss.com/docs/gradient-color-stops gradient color middle position}
     */
    gradientMiddlePosition: PluginVariants<"via", GradientPosition>;
    /**
     *@description Utilities for controlling the color stops position in gradient background image.
     *@see {@link https://tailwindcss.com/docs/gradient-color-stops gradient color end position}
     */
    gradientEndPosition: PluginVariants<"to", GradientPosition>;
};

interface TailwindBackgroundPlug {
    backgroundSize?: string;
    backgroundColor?: string;
    backgroundImage?: string;
    backgroundPosition?: string;
    gradientColorStops?: string;
}
interface TailwindBackgrounds<TailwindColor extends string, BackgroundsPlug extends TailwindBackgroundPlug = {
    backgroundSize: "";
    backgroundColor: "";
    backgroundImage: "";
    backgroundPosition: "";
    gradientColorStops: "";
}> extends TailwindBackgroundClipType, TailwindBackgroundRepeatType, TailwindBackgroundOriginType, TailwindBackgroundAttachmentType, TailwindBackgroundSizeType<BackgroundsPlug["backgroundSize"]>, TailwindBackgroundImageType<BackgroundsPlug["backgroundImage"]>, TailwindBackgroundPositionType<BackgroundsPlug["backgroundPosition"]>, TailwindBackgroundColorType<TailwindColor, BackgroundsPlug["backgroundColor"]>, TailwindGradientColorStopsType<TailwindColor | Pluggable<BackgroundsPlug["gradientColorStops"]>> {
}

type TailwindBackgroundAttachmentVariants = "fixed" | "local" | "scroll";
type TailwindBackgroundAttachment = `bg-${TailwindBackgroundAttachmentVariants}`;
type ShortTailwindBackgroundAttachmentType = {
    /**
     *@description Utilities for controlling how a background image behaves when scrolling.
     *@see {@link https://tailwindcss.com/docs/background-attachment background attachment}
     */
    bgAttachment: TailwindBackgroundAttachment;
};

type TailwindBackgroundClipVariants = "border" | "padding" | "content" | "text";
type TailwindBackgroundClip = `bg-clip-${TailwindBackgroundClipVariants}`;
type ShortTailwindBackgroundClipType = {
    /**
     *@description Utilities for controlling the bounding box of an element's background.
     *@see {@link https://tailwindcss.com/docs/background-clip background clip}
     */
    bgClip: TailwindBackgroundClip;
};

type ShortTailwindBackgroundColorType<TailwindColor extends string, Plug extends PlugBase = ""> = {
    /**
     *@description Utilities for controlling an element's background color.
     *@see {@link https://tailwindcss.com/docs/background-color background color}
     */
    bg: `bg-${TailwindColor | Pluggable<Plug>}`;
};

type TailwindBackgroundOriginVariants = "border" | "padding" | "content";
type TailwindBackgroundOrigin = `bg-origin-${TailwindBackgroundOriginVariants}`;
type ShortTailwindBackgroundOriginType = {
    /**
     *@description Utilities for controlling how an element's background is positioned relative to borders, padding, and content.
     *@see {@link https://tailwindcss.com/docs/background-origin background origin}
     */
    bgOrigin: TailwindBackgroundOrigin;
};

type TailwindBackgroundPositionVariants<Plug extends PlugBase = ""> = "bottom" | "top" | "center" | "left" | "left-bottom" | "left-top" | "right" | "right-bottom" | "right-top" | TailwindArbitrary | Pluggable<Plug>;
type TailwindBackgroundPosition<Plug extends PlugBase = ""> = `bg-${TailwindBackgroundPositionVariants<Plug>}`;
type ShortTailwindBackgroundPositionType<Plug extends PlugBase = ""> = {
    /**
     *@description Utilities for controlling the position of an element's background image.
     *@see {@link https://tailwindcss.com/docs/background-position background position}
     */
    bgPosition: TailwindBackgroundPosition<Plug>;
};

type TailwindBackgroundRepeatVariants = "x" | "y" | "round" | "space";
type TailwindBackgroundRepeat = "bg-repeat" | "bg-no-repeat" | `bg-repeat-${TailwindBackgroundRepeatVariants}`;
type ShortTailwindBackgroundRepeatType = {
    /**
     *@description Utilities for controlling the repetition of an element's background image.
     *@see {@link https://tailwindcss.com/docs/background-repeat background repeat}
     */
    bgRepeat: TailwindBackgroundRepeat;
};

type TailwindBackgroundSizeVariants<Plug extends PlugBase = ""> = "auto" | "cover" | "contain" | TailwindArbitrary | Pluggable<Plug>;
type TailwindBackgroundSize<Plug extends PlugBase = ""> = `bg-${TailwindBackgroundSizeVariants<Plug>}`;
type ShortTailwindBackgroundSizeType<Plug extends PlugBase = ""> = {
    /**
     *@description Utilities for controlling the background size of an element's background image.
     *@see {@link https://tailwindcss.com/docs/background-size background size}
     */
    bgSize: TailwindBackgroundSize<Plug>;
};

interface ShortTailwindBackgrounds<TailwindColor extends string, BackgroundsPlug extends {
    backgroundSize?: string;
    backgroundColor?: string;
    backgroundImage?: string;
    backgroundPosition?: string;
    gradientColorStops?: string;
} = {
    backgroundSize: "";
    backgroundColor: "";
    backgroundImage: "";
    backgroundPosition: "";
    gradientColorStops: "";
}> extends ShortTailwindBackgroundClipType, ShortTailwindBackgroundRepeatType, ShortTailwindBackgroundOriginType, ShortTailwindBackgroundAttachmentType, ShortTailwindBackgroundSizeType<BackgroundsPlug["backgroundSize"]>, ShortTailwindBackgroundPositionType<BackgroundsPlug["backgroundPosition"]>, ShortTailwindBackgroundColorType<TailwindColor, BackgroundsPlug["backgroundColor"]>, TailwindBackgroundImageType<BackgroundsPlug["backgroundImage"]>, TailwindGradientColorStopsType<TailwindColor | Pluggable<BackgroundsPlug["gradientColorStops"]>> {
}

type TailwindBorderColorType<BorderColor extends string> = {
    /**
     *@description Utilities for controlling the color of an element's borders.
     *@see {@link https://tailwindcss.com/docs/border-color border color}
     */
    borderColor: PluginVariants<"border", BorderColor>;
    /**
     *@description Utilities for controlling the color of an element's borders.
     *@see {@link https://tailwindcss.com/docs/border-color  border-x-color}
     */
    borderXColor: PluginVariants<"border-x", BorderColor>;
    /**
     *@description Utilities for controlling the color of an element's borders.
     *@see {@link https://tailwindcss.com/docs/border-color  border-y-color}
     */
    borderYColor: PluginVariants<"border-y", BorderColor>;
    /**
     *@description Utilities for controlling the color of an element's borders.
     *@see {@link https://tailwindcss.com/docs/border-color  border-top-color}
     */
    borderTopColor: PluginVariants<"border-t", BorderColor>;
    /**
     *@description Utilities for controlling the color of an element's borders.
     *@see {@link https://tailwindcss.com/docs/border-color  border-bottom-color}
     */
    borderBottomColor: PluginVariants<"border-b", BorderColor>;
    /**
     *@description Utilities for controlling the color of an element's borders.
     *@see {@link https://tailwindcss.com/docs/border-color  border-left-color}
     */
    borderLeftColor: PluginVariants<"border-l", BorderColor>;
    /**
     *@description Utilities for controlling the color of an element's borders.
     *@see {@link https://tailwindcss.com/docs/border-color  border-right-color}
     */
    borderRightColor: PluginVariants<"border-r", BorderColor>;
};
type TailwindDivideColorType<DivideColor extends string> = {
    /**
     *@description Utilities for controlling the border color between elements.
     *@see {@link https://tailwindcss.com/docs/divide-color divide color}
     */
    divideColor: PluginVariants<"divide", DivideColor>;
};

type TailwindBorderRadiusVariants$1<Plug extends PlugBase = ""> = "none" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "full" | TailwindArbitrary | Pluggable<Plug>;
type TailwindBorderRadius$1<Key extends string, Plug extends PlugBase = ""> = Key | `${Key}-${TailwindBorderRadiusVariants$1<Plug>}`;
type TailwindBorderRadiusType<Plug extends PlugBase = ""> = {
    /**
     *@description Utilities for controlling the border radius of an element.
     *@see {@link https://tailwindcss.com/docs/border-radius border-radius}
     */
    borderRadius: TailwindBorderRadius$1<"rounded", Plug>;
    /**
     *@description Utilities for controlling the border radius of an element.
     *@see {@link https://tailwindcss.com/docs/border-radius border-top-radius}
     */
    borderTopRadius: TailwindBorderRadius$1<"rounded-t", Plug>;
    /**
     *@description Utilities for controlling the border radius of an element.
     *@see {@link https://tailwindcss.com/docs/border-radius border-right-radius}
     */
    borderRightRadius: TailwindBorderRadius$1<"rounded-r", Plug>;
    /**
     *@description Utilities for controlling the border radius of an element.
     *@see {@link https://tailwindcss.com/docs/border-radius border-bottom-radius}
     */
    borderBottomRadius: TailwindBorderRadius$1<"rounded-b", Plug>;
    /**
     *@description Utilities for controlling the border radius of an element.
     *@see {@link https://tailwindcss.com/docs/border-radius border-left-radius}
     */
    borderLeftRadius: TailwindBorderRadius$1<"rounded-l", Plug>;
    /**
     *@description Utilities for controlling the border radius of an element.
     *@see {@link https://tailwindcss.com/docs/border-radius border-top-left-radius}
     */
    borderTopLeftRadius: TailwindBorderRadius$1<"rounded-tl", Plug>;
    /**
     *@description Utilities for controlling the border radius of an element.
     *@see {@link https://tailwindcss.com/docs/border-radius border-top-right-radius}
     */
    borderTopRightRadius: TailwindBorderRadius$1<"rounded-tr", Plug>;
    /**
     *@description Utilities for controlling the border radius of an element.
     *@see {@link https://tailwindcss.com/docs/border-radius border-bottom-left-radius}
     */
    borderBottomLeftRadius: TailwindBorderRadius$1<"rounded-bl", Plug>;
    /**
     *@description Utilities for controlling the border radius of an element.
     *@see {@link https://tailwindcss.com/docs/border-radius border-bottom-right-radius}
     */
    borderBottomRightRadius: TailwindBorderRadius$1<"rounded-br", Plug>;
};

type TailwindBorderStyleVariants = "solid" | "dashed" | "dotted" | "double" | "hidden" | "none";
type TailwindBorderStyle = `border-${TailwindBorderStyleVariants}`;
type TailwindBorderStyleType = {
    /**
     *@description Utilities for controlling the style of an element's borders.
     *@see {@link https://tailwindcss.com/docs/border-style border style}
     */
    borderStyle: TailwindBorderStyle;
};
type TailwindDivideStyle = `divide-${TailwindBorderStyleVariants}`;
type TailwindDivideStyleType = {
    /**
     *@description Utilities for controlling the border style between elements.
     *@see {@link https://tailwindcss.com/docs/divide-style divide style}
     */
    divideStyle: TailwindDivideStyle;
};

type PluginVariantsIncludeSelf$1<Title extends string, Value extends string> = PluginVariants<Title, Value> | Title;
type TailwindBorderWidth$1<Plug extends string> = "0" | "2" | "4" | "8" | TailwindArbitrary | Plug;
type TailwindBorderWidthType<Plug extends string> = {
    /**
     *@description Utilities for controlling the width of an element's borders.
     *@unit Gap `2` = `2px` = `0.125rem`
     *@see {@link https://tailwindcss.com/docs/border-width border-width}
     */
    borderWidth: PluginVariantsIncludeSelf$1<"border", TailwindBorderWidth$1<Plug>>;
    /**
     *@description Utilities for controlling the width of an element's borders.
     *@unit Gap `2` = `2px` = `0.125rem`
     *@see {@link https://tailwindcss.com/docs/border-width border-x-width}
     */
    borderXWidth: PluginVariantsIncludeSelf$1<"border-x", TailwindBorderWidth$1<Plug>>;
    /**
     *@description Utilities for controlling the width of an element's borders.
     *@unit Gap `2` = `2px` = `0.125rem`
     *@see {@link https://tailwindcss.com/docs/border-width border-y-width}
     */
    borderYWidth: PluginVariantsIncludeSelf$1<"border-y", TailwindBorderWidth$1<Plug>>;
    /**
     *@description Utilities for controlling the width of an element's borders.
     *@unit Gap `2` = `2px` = `0.125rem`
     *@see {@link https://tailwindcss.com/docs/border-width border-top-width}
     */
    borderTopWidth: PluginVariantsIncludeSelf$1<"border-t", TailwindBorderWidth$1<Plug>>;
    /**
     *@description Utilities for controlling the width of an element's borders.
     *@unit Gap `2` = `2px` = `0.125rem`
     *@see {@link https://tailwindcss.com/docs/border-width border-bottom-width}
     */
    borderBottomWidth: PluginVariantsIncludeSelf$1<"border-b", TailwindBorderWidth$1<Plug>>;
    /**
     *@description Utilities for controlling the width of an element's borders.
     *@unit Gap `2` = `2px` = `0.125rem`
     *@see {@link https://tailwindcss.com/docs/border-width border-left-width}
     */
    borderLeftWidth: PluginVariantsIncludeSelf$1<"border-l", TailwindBorderWidth$1<Plug>>;
    /**
     *@description Utilities for controlling the width of an element's borders.
     *@unit Gap `2` = `2px` = `0.125rem`
     *@see {@link https://tailwindcss.com/docs/border-width border-right-width}
     */
    borderRightWidth: PluginVariantsIncludeSelf$1<"border-r", TailwindBorderWidth$1<Plug>>;
};
type TailwindDivideWidth$1<Plug extends string> = "0" | "2" | "4" | "8" | "reverse" | Plug | TailwindArbitrary;
type TailwindDivideWidthType$1<Plug extends string> = {
    /**
     *@description Utilities for controlling the border width between x-axis elements.
     *@unit Gap `2` = `2px` = `0.125rem`
     *@see {@link https://tailwindcss.com/docs/divide-width divide-x-width}
     */
    divideX: PluginVariantsIncludeSelf$1<"divide-x", TailwindDivideWidth$1<Plug>>;
    /**
     *@description Utilities for controlling the border width between y-axis elements.
     *@unit Gap `2` = `2px` = `0.125rem`
     *@see {@link https://tailwindcss.com/docs/divide-width divide-y-width}
     */
    divideY: PluginVariantsIncludeSelf$1<"divide-y", TailwindDivideWidth$1<Plug>>;
};

type TailwindOutlineColorType<TailwindColor extends string, Plug extends PlugBase = ""> = {
    /**
     *@description Utilities for controlling the color of an element's outline.
     *@see {@link https://tailwindcss.com/docs/outline-color outline color}
     */
    outlineColor: `outline-${TailwindColor | Pluggable<Plug>}`;
};

type TailwindOutlineOffsetVariants<Plug extends PlugBase = ""> = "0" | "1" | "2" | "4" | "8" | Pluggable<Plug> | TailwindArbitrary;
type TailwindOutlineOffset<Plug extends PlugBase = ""> = `outline-offset-${TailwindOutlineOffsetVariants<Plug>}`;
type TailwindOutlineOffsetType<Plug extends PlugBase = ""> = {
    /**
     *@description Utilities for controlling the offset of an element's outline.
     *@see {@link https://tailwindcss.com/docs/outline-offset outline offset}
     */
    outlineOffset: TailwindOutlineOffset<Plug>;
};

type TailwindOutlineStyle = "outline" | `outline-${TailwindBorderStyleVariants}`;
type TailwindOutlineStyleType = {
    /**
     *@description Utilities for controlling the style of an element's outline.
     *@see {@link https://tailwindcss.com/docs/outline-style outline style}
     */
    outlineStyle: TailwindOutlineStyle;
};

type TailwindOutlineWidthVariants$1<Plug extends PlugBase = ""> = "0" | "1" | "2" | "4" | "8" | Pluggable<Plug> | TailwindArbitrary;
type TailwindOutlineWidth$1<Plug extends PlugBase = ""> = `outline-${TailwindOutlineWidthVariants$1<Plug>}`;
type TailwindOutlineWidthType<Plug extends PlugBase = ""> = {
    /**
     *@description Utilities for controlling the width of an element's outline.
     *@see {@link https://tailwindcss.com/docs/outline-width outline width}
     */
    outlineWidth: TailwindOutlineWidth$1<Plug>;
};

type TailwindRingColorType<TailwindColor extends string, Plug extends PlugBase = ""> = {
    /**
     *@description Utilities for setting the color of outline rings.
     *@see {@link https://tailwindcss.com/docs/ring-color ring color}
     */
    ringColor: `ring-${TailwindColor | Pluggable<Plug>}`;
};

type TailwindRingOffsetColorType<TailwindColor extends string, Plug extends PlugBase = ""> = {
    /**
     *@description Utilities for setting the color of outline ring offsets.
     *@see {@link https://tailwindcss.com/docs/ring-offset-color ring offset color}
     */
    ringOffsetColor: `ring-offset-${TailwindColor | Pluggable<Plug>}`;
};

type TailwindRingOffsetWidthVariants$1<Plug extends PlugBase = ""> = "0" | "1" | "2" | "4" | "8" | Pluggable<Plug> | TailwindArbitrary;
type TailwindRingOffsetWidth$1<Plug extends PlugBase = ""> = `ring-offset-${TailwindRingOffsetWidthVariants$1<Plug>}`;
type TailwindRingOffsetWidthType<Plug extends PlugBase = ""> = {
    /**
     *@description Utilities for simulating an offset when adding outline rings.
     *@see {@link https://tailwindcss.com/docs/ring-offset-width ring offset width}
     */
    ringOffsetWidth: TailwindRingOffsetWidth$1<Plug>;
};

type TailwindRingWidthVariants$1<Plug extends PlugBase = ""> = "0" | "1" | "2" | "4" | "8" | "inset" | Pluggable<Plug> | TailwindArbitrary;
type TailwindRingWidth$1<Plug extends PlugBase = ""> = "ring" | `ring-${TailwindRingWidthVariants$1<Plug>}`;
type TailwindRingWidthType<Plug extends PlugBase = ""> = {
    /**
     *@description Utilities for creating outline rings with box-shadows.
     *@see {@link https://tailwindcss.com/docs/ring-width ring width}
     */
    ringWidth: TailwindRingWidth$1<Plug>;
};

interface TailwindBordersPlug {
    borderColor?: string;
    borderRadius?: string;
    borderWidth?: string;
    divideColor?: string;
    divideWidth?: string;
    outlineColor?: string;
    outlineOffset?: string;
    outlineWidth?: string;
    ringOffsetColor?: string;
    ringOffsetWidth?: string;
    ringColor?: string;
    ringWidth?: string;
}
interface TailwindBorders<TailwindColor extends string, BordersPlug extends TailwindBordersPlug = {
    borderColor: "";
    borderRadius: "";
    borderWidth: "";
    divideColor: "";
    divideWidth: "";
    outlineColor: "";
    outlineOffset: "";
    outlineWidth: "";
    ringOffsetColor: "";
    ringOffsetWidth: "";
    ringColor: "";
    ringWidth: "";
}> extends TailwindOutlineStyleType, TailwindDivideStyleType, TailwindBorderStyleType, TailwindBorderWidthType<Pluggable<BordersPlug["borderWidth"]>>, TailwindBorderRadiusType<BordersPlug["borderRadius"]>, TailwindBorderColorType<TailwindColor | Pluggable<BordersPlug["borderColor"]>>, TailwindRingWidthType<BordersPlug["ringWidth"]>, TailwindRingColorType<TailwindColor, BordersPlug["ringColor"]>, TailwindRingOffsetColorType<TailwindColor, BordersPlug["ringOffsetColor"]>, TailwindRingOffsetWidthType<BordersPlug["ringOffsetWidth"]>, TailwindOutlineOffsetType<BordersPlug["outlineOffset"]>, TailwindOutlineWidthType<BordersPlug["outlineWidth"]>, TailwindOutlineColorType<TailwindColor, BordersPlug["outlineColor"]>, TailwindDivideWidthType$1<Pluggable<BordersPlug["divideWidth"]>>, TailwindDivideColorType<TailwindColor | Pluggable<BordersPlug["divideColor"]>> {
}

type ShortTailwindBorderColorType<BorderColor extends string> = {
    /**
     *@description Utilities for controlling the color of an element's borders.
     *@see {@link https://tailwindcss.com/docs/border-color border color}
     */
    border: PluginVariants<"border", BorderColor>;
    /**
     *@description Utilities for controlling the color of an element's borders.
     *@see {@link https://tailwindcss.com/docs/border-color  border-x-color}
     */
    borderX: PluginVariants<"border-x", BorderColor>;
    /**
     *@description Utilities for controlling the color of an element's borders.
     *@see {@link https://tailwindcss.com/docs/border-color  border-y-color}
     */
    borderY: PluginVariants<"border-y", BorderColor>;
    /**
     *@description Utilities for controlling the color of an element's borders.
     *@see {@link https://tailwindcss.com/docs/border-color  border-top-color}
     */
    borderT: PluginVariants<"border-t", BorderColor>;
    /**
     *@description Utilities for controlling the color of an element's borders.
     *@see {@link https://tailwindcss.com/docs/border-color  border-bottom-color}
     */
    borderB: PluginVariants<"border-b", BorderColor>;
    /**
     *@description Utilities for controlling the color of an element's borders.
     *@see {@link https://tailwindcss.com/docs/border-color  border-left-color}
     */
    borderL: PluginVariants<"border-l", BorderColor>;
    /**
     *@description Utilities for controlling the color of an element's borders.
     *@see {@link https://tailwindcss.com/docs/border-color  border-right-color}
     */
    borderR: PluginVariants<"border-r", BorderColor>;
};
type ShortTailwindDivideColorType<DivideColor extends string> = {
    /**
     *@description Utilities for controlling the border color between elements.
     *@see {@link https://tailwindcss.com/docs/divide-color divide color}
     */
    divide: PluginVariants<"divide", DivideColor>;
};

type TailwindBorderRadiusVariants<Plug extends PlugBase = ""> = "none" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "full" | TailwindArbitrary | Pluggable<Plug>;
type TailwindBorderRadius<Key extends string, Plug extends PlugBase = ""> = Key | `${Key}-${TailwindBorderRadiusVariants<Plug>}`;
type ShortTailwindBorderRadiusType<Plug extends PlugBase = ""> = {
    /**
     *@description Utilities for controlling the border radius of an element.
     *@see {@link https://tailwindcss.com/docs/border-radius border-radius}
     */
    borderRadius: TailwindBorderRadius<"rounded", Plug>;
    /**
     *@description Utilities for controlling the border radius of an element.
     *@see {@link https://tailwindcss.com/docs/border-radius border-top-radius}
     */
    borderTRadius: TailwindBorderRadius<"rounded-t", Plug>;
    /**
     *@description Utilities for controlling the border radius of an element.
     *@see {@link https://tailwindcss.com/docs/border-radius border-right-radius}
     */
    borderRRadius: TailwindBorderRadius<"rounded-r", Plug>;
    /**
     *@description Utilities for controlling the border radius of an element.
     *@see {@link https://tailwindcss.com/docs/border-radius border-bottom-radius}
     */
    borderBRadius: TailwindBorderRadius<"rounded-b", Plug>;
    /**
     *@description Utilities for controlling the border radius of an element.
     *@see {@link https://tailwindcss.com/docs/border-radius border-left-radius}
     */
    borderLRadius: TailwindBorderRadius<"rounded-l", Plug>;
    /**
     *@description Utilities for controlling the border radius of an element.
     *@see {@link https://tailwindcss.com/docs/border-radius border-top-left-radius}
     */
    borderTLRadius: TailwindBorderRadius<"rounded-tl", Plug>;
    /**
     *@description Utilities for controlling the border radius of an element.
     *@see {@link https://tailwindcss.com/docs/border-radius border-top-right-radius}
     */
    borderTRRadius: TailwindBorderRadius<"rounded-tr", Plug>;
    /**
     *@description Utilities for controlling the border radius of an element.
     *@see {@link https://tailwindcss.com/docs/border-radius border-bottom-left-radius}
     */
    borderBLRadius: TailwindBorderRadius<"rounded-bl", Plug>;
    /**
     *@description Utilities for controlling the border radius of an element.
     *@see {@link https://tailwindcss.com/docs/border-radius border-bottom-right-radius}
     */
    borderBRRadius: TailwindBorderRadius<"rounded-br", Plug>;
};

type PluginVariantsIncludeSelf<Title extends string, Value extends string> = PluginVariants<Title, Value> | Title;
type TailwindBorderWidth<Plug extends string> = "0" | "2" | "4" | "8" | TailwindArbitrary | Plug;
type ShortTailwindBorderWidthType<Plug extends string> = {
    /**
     *@description Utilities for controlling the width of an element's borders.
     *@unit Gap `2` = `2px` = `0.125rem`
     *@see {@link https://tailwindcss.com/docs/border-width border-width}
     */
    borderW: PluginVariantsIncludeSelf<"border", TailwindBorderWidth<Plug>>;
    /**
     *@description Utilities for controlling the width of an element's borders.
     *@unit Gap `2` = `2px` = `0.125rem`
     *@see {@link https://tailwindcss.com/docs/border-width border-x-width}
     */
    borderXW: PluginVariantsIncludeSelf<"border-x", TailwindBorderWidth<Plug>>;
    /**
     *@description Utilities for controlling the width of an element's borders.
     *@unit Gap `2` = `2px` = `0.125rem`
     *@see {@link https://tailwindcss.com/docs/border-width border-y-width}
     */
    borderYW: PluginVariantsIncludeSelf<"border-y", TailwindBorderWidth<Plug>>;
    /**
     *@description Utilities for controlling the width of an element's borders.
     *@unit Gap `2` = `2px` = `0.125rem`
     *@see {@link https://tailwindcss.com/docs/border-width border-top-width}
     */
    borderTW: PluginVariantsIncludeSelf<"border-t", TailwindBorderWidth<Plug>>;
    /**
     *@description Utilities for controlling the width of an element's borders.
     *@unit Gap `2` = `2px` = `0.125rem`
     *@see {@link https://tailwindcss.com/docs/border-width border-bottom-width}
     */
    borderBW: PluginVariantsIncludeSelf<"border-b", TailwindBorderWidth<Plug>>;
    /**
     *@description Utilities for controlling the width of an element's borders.
     *@unit Gap `2` = `2px` = `0.125rem`
     *@see {@link https://tailwindcss.com/docs/border-width border-left-width}
     */
    borderLW: PluginVariantsIncludeSelf<"border-l", TailwindBorderWidth<Plug>>;
    /**
     *@description Utilities for controlling the width of an element's borders.
     *@unit Gap `2` = `2px` = `0.125rem`
     *@see {@link https://tailwindcss.com/docs/border-width border-right-width}
     */
    borderRW: PluginVariantsIncludeSelf<"border-r", TailwindBorderWidth<Plug>>;
};
type TailwindDivideWidth<Plug extends string> = "0" | "2" | "4" | "8" | "reverse" | Plug | TailwindArbitrary;
type TailwindDivideWidthType<Plug extends string> = {
    /**
     *@description Utilities for controlling the border width between x-axis elements.
     *@unit Gap `2` = `2px` = `0.125rem`
     *@see {@link https://tailwindcss.com/docs/divide-width divide-x-width}
     */
    divideX: PluginVariantsIncludeSelf<"divide-x", TailwindDivideWidth<Plug>>;
    /**
     *@description Utilities for controlling the border width between y-axis elements.
     *@unit Gap `2` = `2px` = `0.125rem`
     *@see {@link https://tailwindcss.com/docs/divide-width divide-y-width}
     */
    divideY: PluginVariantsIncludeSelf<"divide-y", TailwindDivideWidth<Plug>>;
};

type ShortTailwindOutlineColorType<TailwindColor extends string, Plug extends PlugBase = ""> = {
    /**
     *@description Utilities for controlling the color of an element's outline.
     *@see {@link https://tailwindcss.com/docs/outline-color outline color}
     */
    outline: `outline-${TailwindColor | Pluggable<Plug>}`;
};

type TailwindOutlineWidthVariants<Plug extends PlugBase = ""> = "0" | "1" | "2" | "4" | "8" | Pluggable<Plug> | TailwindArbitrary;
type TailwindOutlineWidth<Plug extends PlugBase = ""> = `outline-${TailwindOutlineWidthVariants<Plug>}`;
type ShortTailwindOutlineWidthType<Plug extends PlugBase = ""> = {
    /**
     *@description Utilities for controlling the width of an element's outline.
     *@see {@link https://tailwindcss.com/docs/outline-width outline width}
     */
    outlineW: TailwindOutlineWidth<Plug>;
};

type ShortTailwindRingColorType<TailwindColor extends string, Plug extends PlugBase = ""> = {
    /**
     *@description Utilities for setting the color of outline rings.
     *@see {@link https://tailwindcss.com/docs/ring-color ring color}
     */
    ring: `ring-${TailwindColor | Pluggable<Plug>}`;
};

type ShortTailwindRingOffsetColorType<TailwindColor extends string, Plug extends PlugBase = ""> = {
    /**
     *@description Utilities for setting the color of outline ring offsets.
     *@see {@link https://tailwindcss.com/docs/ring-offset-color ring offset color}
     */
    ringOffset: `ring-offset-${TailwindColor | Pluggable<Plug>}`;
};

type TailwindRingOffsetWidthVariants<Plug extends PlugBase = ""> = "0" | "1" | "2" | "4" | "8" | Pluggable<Plug> | TailwindArbitrary;
type TailwindRingOffsetWidth<Plug extends PlugBase = ""> = `ring-offset-${TailwindRingOffsetWidthVariants<Plug>}`;
type ShortTailwindRingOffsetWidthType<Plug extends PlugBase = ""> = {
    /**
     *@description Utilities for simulating an offset when adding outline rings.
     *@see {@link https://tailwindcss.com/docs/ring-offset-width ring offset width}
     */
    ringOffsetW: TailwindRingOffsetWidth<Plug>;
};

type TailwindRingWidthVariants<Plug extends PlugBase = ""> = "0" | "1" | "2" | "4" | "8" | "inset" | Pluggable<Plug> | TailwindArbitrary;
type TailwindRingWidth<Plug extends PlugBase = ""> = "ring" | `ring-${TailwindRingWidthVariants<Plug>}`;
type ShortTailwindRingWidthType<Plug extends PlugBase = ""> = {
    /**
     *@description Utilities for creating outline rings with box-shadows.
     *@see {@link https://tailwindcss.com/docs/ring-width ring width}
     */
    ringW: TailwindRingWidth<Plug>;
};

interface ShortTailwindBorders<TailwindColor extends string, BordersPlug extends {
    borderCol