import type { CorePluginList } from './generated/corePluginList' import type { DefaultColors } from './generated/colors' // Helpers type Expand = T extends object ? T extends infer O ? { [K in keyof O]: Expand } : never : T type KeyValuePair = Record interface RecursiveKeyValuePair { [key: string]: V | RecursiveKeyValuePair } export type ResolvableTo = T | ((utils: PluginUtils) => T) type CSSRuleObject = RecursiveKeyValuePair interface PluginUtils { colors: DefaultColors theme(path: string, defaultValue?: unknown): any breakpoints, O = I>(arg: I): O rgb(arg: string): (arg: Partial<{ opacityVariable: string; opacityValue: number }>) => string hsl(arg: string): (arg: Partial<{ opacityVariable: string; opacityValue: number }>) => string } // Content related config type FilePath = string type RawFile = { raw: string; extension?: string } type ExtractorFn = (content: string) => string[] type TransformerFn = (content: string) => string type ContentConfig = | (FilePath | RawFile)[] | { files: (FilePath | RawFile)[] relative?: boolean extract?: ExtractorFn | { [extension: string]: ExtractorFn } transform?: TransformerFn | { [extension: string]: TransformerFn } } // Important related config type ImportantConfig = boolean | string // Prefix related config type PrefixConfig = string // Separator related config type SeparatorConfig = string // Safelist related config type SafelistConfig = string | { pattern: RegExp; variants?: string[] } // Blocklist related config type BlocklistConfig = string // Presets related config type PresetsConfig = Partial // Future related config type FutureConfigValues = | 'hoverOnlyWhenSupported' | 'respectDefaultRingColorOpacity' | 'disableColorOpacityUtilitiesByDefault' | 'relativeContentPathsByDefault' type FutureConfig = Expand<'all' | Partial>> | [] // Experimental related config type ExperimentalConfigValues = 'optimizeUniversalDefaults' | 'matchVariant' type ExperimentalConfig = Expand<'all' | Partial>> | [] // DarkMode related config type DarkModeConfig = // Use the `media` query strategy. | 'media' // Use the `class` strategy, which requires a `.dark` class on the `html`. | 'class' // Use the `class` strategy with a custom class instead of `.dark`. | ['class', string] // Use the `selector` strategy — same as `class` but uses `:where()` for more predicable behavior | 'selector' // Use the `selector` strategy with a custom selector instead of `.dark`. | ['selector', string] // Use the `variant` strategy, which allows you to completely customize the selector // It takes a string or an array of strings, which are passed directly to `addVariant()` | ['variant', string | string[]] type Screen = { raw: string } | { min: string } | { max: string } | { min: string; max: string } type ScreensConfig = string[] | KeyValuePair // Theme related config export interface ThemeConfig { // Responsiveness screens: ResolvableTo supports: ResolvableTo> data: ResolvableTo> // Reusable base configs colors: ResolvableTo spacing: ResolvableTo // Components container: ResolvableTo< Partial<{ screens: ScreensConfig center: boolean padding: string | Record }> > // Utilities inset: ThemeConfig['spacing'] zIndex: ResolvableTo order: ResolvableTo gridColumn: ResolvableTo gridColumnStart: ResolvableTo gridColumnEnd: ResolvableTo gridRow: ResolvableTo gridRowStart: ResolvableTo gridRowEnd: ResolvableTo margin: ThemeConfig['spacing'] aspectRatio: ResolvableTo height: ThemeConfig['spacing'] maxHeight: ThemeConfig['spacing'] minHeight: ResolvableTo width: ThemeConfig['spacing'] maxWidth: ResolvableTo minWidth: ResolvableTo flex: ResolvableTo flexShrink: ResolvableTo flexGrow: ResolvableTo flexBasis: ThemeConfig['spacing'] borderSpacing: ThemeConfig['spacing'] transformOrigin: ResolvableTo translate: ThemeConfig['spacing'] rotate: ResolvableTo skew: ResolvableTo scale: ResolvableTo animation: ResolvableTo keyframes: ResolvableTo>> cursor: ResolvableTo scrollMargin: ThemeConfig['spacing'] scrollPadding: ThemeConfig['spacing'] listStyleType: ResolvableTo columns: ResolvableTo gridAutoColumns: ResolvableTo gridAutoRows: ResolvableTo gridTemplateColumns: ResolvableTo gridTemplateRows: ResolvableTo gap: ThemeConfig['spacing'] space: ThemeConfig['spacing'] divideWidth: ThemeConfig['borderWidth'] divideColor: ThemeConfig['borderColor'] divideOpacity: ThemeConfig['borderOpacity'] borderRadius: ResolvableTo borderWidth: ResolvableTo borderColor: ThemeConfig['colors'] borderOpacity: ThemeConfig['opacity'] backgroundColor: ThemeConfig['colors'] backgroundOpacity: ThemeConfig['opacity'] backgroundImage: ResolvableTo gradientColorStops: ThemeConfig['colors'] backgroundSize: ResolvableTo backgroundPosition: ResolvableTo fill: ThemeConfig['colors'] stroke: ThemeConfig['colors'] strokeWidth: ResolvableTo objectPosition: ResolvableTo padding: ThemeConfig['spacing'] textIndent: ThemeConfig['spacing'] fontFamily: ResolvableTo< KeyValuePair< string, | string | string[] | [ fontFamily: string | string[], configuration: Partial<{ fontFeatureSettings: string fontVariationSettings: string }> ] > > fontSize: ResolvableTo< KeyValuePair< string, | string | [fontSize: string, lineHeight: string] | [ fontSize: string, configuration: Partial<{ lineHeight: string letterSpacing: string fontWeight: string | number }> ] > > fontWeight: ResolvableTo lineHeight: ResolvableTo letterSpacing: ResolvableTo textColor: ThemeConfig['colors'] textOpacity: ThemeConfig['opacity'] textDecorationColor: ThemeConfig['colors'] textDecorationThickness: ResolvableTo textUnderlineOffset: ResolvableTo placeholderColor: ThemeConfig['colors'] placeholderOpacity: ThemeConfig['opacity'] caretColor: ThemeConfig['colors'] accentColor: ThemeConfig['colors'] opacity: ResolvableTo boxShadow: ResolvableTo boxShadowColor: ThemeConfig['colors'] outlineWidth: ResolvableTo outlineOffset: ResolvableTo outlineColor: ThemeConfig['colors'] ringWidth: ResolvableTo ringColor: ThemeConfig['colors'] ringOpacity: ThemeConfig['opacity'] ringOffsetWidth: ResolvableTo ringOffsetColor: ThemeConfig['colors'] blur: ResolvableTo brightness: ResolvableTo contrast: ResolvableTo dropShadow: ResolvableTo> grayscale: ResolvableTo hueRotate: ResolvableTo invert: ResolvableTo saturate: ResolvableTo sepia: ResolvableTo backdropBlur: ThemeConfig['blur'] backdropBrightness: ThemeConfig['brightness'] backdropContrast: ThemeConfig['contrast'] backdropGrayscale: ThemeConfig['grayscale'] backdropHueRotate: ThemeConfig['hueRotate'] backdropInvert: ThemeConfig['invert'] backdropOpacity: ThemeConfig['opacity'] backdropSaturate: ThemeConfig['saturate'] backdropSepia: ThemeConfig['sepia'] transitionProperty: ResolvableTo transitionTimingFunction: ResolvableTo transitionDelay: ResolvableTo transitionDuration: ResolvableTo willChange: ResolvableTo content: ResolvableTo } interface CustomThemeConfig extends ThemeConfig { [key: string]: any } // Core plugins related config type CorePluginsConfig = CorePluginList[] | Expand>> // Plugins related config type ValueType = | 'any' | 'color' | 'url' | 'image' | 'length' | 'percentage' | 'position' | 'lookup' | 'generic-name' | 'family-name' | 'number' | 'line-width' | 'absolute-size' | 'relative-size' | 'shadow' export interface PluginAPI { // for registering new static utility styles addUtilities( utilities: CSSRuleObject | CSSRuleObject[], options?: Partial<{ respectPrefix: boolean respectImportant: boolean }> ): void // for registering new dynamic utility styles matchUtilities( utilities: KeyValuePair< string, (value: T | string, extra: { modifier: U | string | null }) => CSSRuleObject | null >, options?: Partial<{ respectPrefix: boolean respectImportant: boolean type: ValueType | ValueType[] values: KeyValuePair modifiers: 'any' | KeyValuePair supportsNegativeValues: boolean }> ): void // for registering new static component styles addComponents( components: CSSRuleObject | CSSRuleObject[], options?: Partial<{ respectPrefix: boolean respectImportant: boolean }> ): void // for registering new dynamic component styles matchComponents( components: KeyValuePair< string, (value: T | string, extra: { modifier: U | string | null }) => CSSRuleObject | null >, options?: Partial<{ respectPrefix: boolean respectImportant: boolean type: ValueType | ValueType[] values: KeyValuePair modifiers: 'any' | KeyValuePair supportsNegativeValues: boolean }> ): void // for registering new base styles addBase(base: CSSRuleObject | CSSRuleObject[]): void // for registering custom variants addVariant(name: string, definition: string | string[] | (() => string) | (() => string)[]): void matchVariant( name: string, cb: (value: T | string, extra: { modifier: string | null }) => string | string[], options?: { values?: KeyValuePair sort?( a: { value: T | string; modifier: string | null }, b: { value: T | string; modifier: string | null } ): number } ): void // for looking up values in the user’s theme configuration theme: ( path?: string, defaultValue?: TDefaultValue ) => TDefaultValue // for looking up values in the user’s Tailwind configuration config: (path?: string, defaultValue?: TDefaultValue) => TDefaultValue // for checking if a core plugin is enabled corePlugins(path: string): boolean // for manually escaping strings meant to be used in class names e: (className: string) => string } export type PluginCreator = (api: PluginAPI) => void export type PluginsConfig = ( | PluginCreator | { handler: PluginCreator; config?: Partial } | { (options: any): { handler: PluginCreator; config?: Partial } __isOptionsFunction: true } )[] // Top level config related interface RequiredConfig { content: ContentConfig } interface OptionalConfig { important: Partial prefix: Partial separator: Partial safelist: Array blocklist: Array presets: Array future: Partial experimental: Partial darkMode: Partial theme: Partial }> corePlugins: Partial plugins: Partial // Custom [key: string]: any } export type Config = RequiredConfig & Partial