Upgrading tailwindcss 3 to 4
Breaking3.4.19 → 4.3.3Breaking9Deprecated6New172Changed118Fixed588Other3
BreakingUpgrade verdict
9 breaking changes.
In plain terms
- Two max-width and max-height utility classes are gone because they produced invalid CSS.
- The @variant directive is now called @custom-variant, so existing CSS using @variant must be updated.
- Custom aspect ratio theme variables must be renamed from --aspect-ratio-* to --aspect-*.
- Tailwind no longer wraps certain values in CSS variables automatically, so styles that relied on that may need updating.
Must act Top 5 of 14 that need code or config changes
tailwindcss publishes an official migration guide for version 4. It covers more than the release notes do.
Tailwind CSS upgrade guide ↗No longer states a Node.js requirement from 4.0.0-alpha.1 (was >=14.0.0).
Drops @alloc/quick-lru, arg, chokidar, didyoumean, dlv, fast-glob, glob-parent, is-glob, jiti, lilconfig, micromatch, normalize-path, object-hash, picocolors, postcss, postcss-import, postcss-js, postcss-load-config, postcss-nested, postcss-selector-parser, resolve, sucrase.
Installs 0 packages in all (was 72).
What you must change
Breaking9
Removes
max-w-auto and max-h-auto utilities as they generate invalid CSS.max-w-automax-h-autoRenames @variant to @custom-variant.
@variant@custom-variantRenames the --aspect-ratio-* theme key to --aspect-*.
--aspect-ratio-*--aspect-*Removes automatic
var(…) injection.var(…)Removes named opacity support for color opacity modifiers.
Drops the deprecated
decoration-slice and decoration-clone utilities.decoration-slicedecoration-cloneRelative CSS imports now require a relative path prefix such as
./.@importDisallows bare values with decimal places.
Disallows negative bare values in core utilities and variants.
Deprecations to plan for
Deprecated5
Deprecates
start-* and end-* utilities in favor of inset-s-* and inset-e-* utilities.start-*end-*inset-s-*inset-e-*Upgrade tool migrates deprecated
break-words to wrap-break-word.break-wordswrap-break-wordDeprecates
object-{left,right}-{top,bottom} in favor of object-{top,bottom}-{left,right} utilities.object-left-topobject-right-topobject-left-bottomobject-right-bottomobject-top-leftobject-top-rightobject-bottom-leftobject-bottom-rightbg-left-topbg-right-topbg-left-bottombg-right-bottombg-top-leftbg-top-rightbg-bottom-leftbg-bottom-rightReintroduces
max-w-screen-* utilities that read from the --breakpoint namespace as deprecated utilities.max-w-screen-*--breakpointDeprecates the
shadow-inner utility.shadow-innerAPI changes
Generated by DepDelta from published .d.ts files. Not mixed with prose notes.
- removed:
const colors: DefaultColors - removed:
export = colors
- removed:
const config: Config - removed:
export = config
- removed:
const theme: Config['theme'] & DefaultTheme - removed:
export = theme
- added:
const default: { inherit: string; current: string; transparent: string; black: string; white: string; slate: { '50': string; '100': string; '200': string; '300': string; '400… - added:
export { _default as default }
- added:
const _: { inherit: string; current: string; transparent: string; black: string; white: string; slate: { '50': string; '100': string; '200': string; '300': string; '400…
- added:
const default: { accentColor: ({ theme }: PluginUtils) => any; animation: { none: string; spin: string; ping: string; pulse: string; bounce: string }; aria: { busy: string; c…
- added:
function default(colors: Colors): Record<string, string>
- added:
const enum Features - added:
const enum Polyfills - added:
function __unstable__loadDesignSystem(css: string, opts?: CompileOptions): Promise<DesignSystem> - added:
function compile(css: string, opts?: CompileOptions): Promise<{ sources: { base: string; pattern: string; negated: boolean }[]; root: Root; features: Features; build(candidates: string[]): string; buildSourceMap(): DecodedSourceMap }> - added:
function compileAst(input: AstNode[], opts?: CompileOptions): Promise<{ sources: { base: string; pattern: string; negated: boolean }[]; root: Root; features: Features; build(candidates: string[]): AstNode[] }> - added:
function default(): void - added:
interface Config extends UserConfig - added:
interface DecodedSourceMap - added:
member Features.AtApply = 1 - added:
member Features.AtImport = 2 - added:
member Features.AtTheme = 64 - added:
member Features.JsPluginCompat = 4 - added:
member Features.None = 0 - added:
member Features.ThemeFunction = 8 - added:
member Features.Utilities = 16 - added:
member Features.Variants = 32 - added:
member Polyfills.All = 3 - added:
member Polyfills.AtProperty = 1 - added:
member Polyfills.ColorMix = 2 - added:
member Polyfills.None = 0 - added:
property DecodedSourceMap.file: string | null - added:
property DecodedSourceMap.mappings: DecodedMapping[] - added:
property DecodedSourceMap.sources: DecodedSource[]
- added:
export { Config } - added:
export { P as PluginUtils } from './resolve-config-QUZ9b-Gn' - added:
export { P as PluginsConfig } from './types-[hash]' - added:
export { PluginFn as PluginCreator } - added:
export { PluginWithConfig } - added:
export { T as ThemeConfig } from './types-[hash]' - added:
export { a as PluginAPI } from './types-[hash]' - added:
function default(handler: PluginFn, config?: Partial<Config>): PluginWithConfig - added:
namespace default - added:
var default.withOptions: <T>(pluginFunction: (options?: T) => PluginFn, configFunction?: (options?: T) => Partial<Config>) => PluginWithOptions<T>
- added:
type C = { kind: 'arbitrary'; property: string; value: string; modifier: ArbitraryModifier | NamedModifier | null; variants: Variant[]; important: boolean; raw: string… - added:
type N = { kind: 'named'; value: string; fraction: string | null } - added:
type P = { theme: (keypath: string, defaultValue?: any) => any; colors: typeof _default } - added:
type V = { kind: 'arbitrary'; selector: string; relative: boolean } | { kind: 'static'; root: string } | { kind: 'functional'; root: string; value: ArbitraryVariantValu…
- added:
type N = { kind: 'named'; value: string; fraction: string | null } - added:
type P = { theme: (keypath: string, defaultValue?: any) => any; colors: typeof _default }
- added:
interface U - added:
property U.blocklist?: string[] - added:
property U.content?: ContentFile[] | { relative?: boolean; files: ContentFile[] } - added:
property U.darkMode?: DarkModeStrategy - added:
property U.experimental?: 'all' | Record<string, boolean> - added:
property U.future?: 'all' | Record<string, boolean> - added:
property U.important?: boolean | string - added:
property U.plugins?: Plugin[] - added:
property U.prefix?: string - added:
property U.presets?: UserConfig[] - added:
property U.theme?: ThemeConfig - added:
type C = UserConfig - added:
type P = PluginFn | PluginWithConfig | PluginWithOptions<any> - added:
type S = [source: Source, start: number, end: number] - added:
type T = Record<string, ThemeValue> & { extend?: Record<string, ThemeValue> } - added:
type a = { addBase(base: CssInJs): void; addVariant(name: string, variant: string | string[] | CssInJs): void; matchVariant<T = string>(name: string, cb: (value: T | st… - added:
type b = (api: PluginAPI) => void - added:
type c = { handler: PluginFn; config?: UserConfig; reference?: boolean; src?: SourceLocation | undefined } - added:
type d<T> = { (options?: T): PluginWithConfig; __isOptionsFunction: true }
- removed:
export = loadConfig - removed:
function loadConfig(path: string): Config
- removed:
const plugin: PluginCreator<AcceptedPlugin | string | void> - removed:
export = plugin
- removed:
const plugin: Plugin - removed:
export = plugin
- removed:
export = resolveConfig - removed:
function resolveConfig<T extends Config>(config: T): ResolvedConfig<T>
- removed:
call postcssValueParser.CustomStringifierCallback(nodes: Node): string | undefined - removed:
call postcssValueParser.ValueParser(value: string): ParsedValue - removed:
call postcssValueParser.WalkCallback(node: Node, index: number, nodes: Node[]): void | boolean - removed:
const postcssValueParser: postcssValueParser.ValueParser - removed:
export = postcssValueParser - removed:
interface postcssValueParser.AdjacentAwareNode - removed:
interface postcssValueParser.BaseNode - removed:
interface postcssValueParser.ClosableNode - removed:
interface postcssValueParser.CommentNode extends BaseNode, ClosableNode - removed:
interface postcssValueParser.CustomStringifierCallback - removed:
interface postcssValueParser.Dimension - removed:
interface postcssValueParser.DivNode extends BaseNode, AdjacentAwareNode - removed:
interface postcssValueParser.FunctionNode extends BaseNode, ClosableNode, AdjacentAwareNode - removed:
interface postcssValueParser.ParsedValue - removed:
interface postcssValueParser.SpaceNode extends BaseNode - removed:
interface postcssValueParser.StringNode extends BaseNode, ClosableNode - removed:
interface postcssValueParser.UnicodeRangeNode extends BaseNode - removed:
interface postcssValueParser.ValueParser - removed:
interface postcssValueParser.WalkCallback - removed:
interface postcssValueParser.WordNode extends BaseNode - removed:
method postcssValueParser.ParsedValue.walk(callback: WalkCallback, bubble?: boolean): this - removed:
method postcssValueParser.ValueParser.stringify(nodes: Node | Node[], custom?: CustomStringifierCallback): string - removed:
method postcssValueParser.ValueParser.unit(value: string): Dimension | false - removed:
method postcssValueParser.ValueParser.walk(nodes: Node[], callback: WalkCallback, bubble?: boolean): void - removed:
namespace postcssValueParser - removed:
new postcssValueParser.ValueParser(value: string): ParsedValue - removed:
property postcssValueParser.AdjacentAwareNode.after: string - removed:
property postcssValueParser.AdjacentAwareNode.before: string - removed:
property postcssValueParser.BaseNode.sourceEndIndex: number - removed:
property postcssValueParser.BaseNode.sourceIndex: number - removed:
property postcssValueParser.BaseNode.value: string - removed:
property postcssValueParser.ClosableNode.unclosed?: true - removed:
property postcssValueParser.CommentNode.type: 'comment' - removed:
property postcssValueParser.Dimension.number: string - removed:
property postcssValueParser.Dimension.unit: string - removed:
property postcssValueParser.DivNode.type: 'div' - removed:
property postcssValueParser.FunctionNode.nodes: Node[] - removed:
property postcssValueParser.FunctionNode.type: 'function' - removed:
property postcssValueParser.ParsedValue.nodes: Node[] - removed:
property postcssValueParser.SpaceNode.type: 'space' - removed:
property postcssValueParser.StringNode.quote: '"' | "'" - removed:
property postcssValueParser.StringNode.type: 'string' - removed:
property postcssValueParser.UnicodeRangeNode.type: 'unicode-range' - removed:
property postcssValueParser.WordNode.type: 'word' - removed:
type postcssValueParser.Node = CommentNode | DivNode | FunctionNode | SpaceNode | StringNode | UnicodeRangeNode | WordNode
- removed:
interface PluginAPI - removed:
interface ThemeConfig - removed:
method PluginAPI.addBase(base: CSSRuleObject | CSSRuleObject[]): void - removed:
method PluginAPI.addComponents(components: CSSRuleObject | CSSRuleObject[], options?: Partial<{ respectPrefix: boolean; respectImportant: boolean }>): void - removed:
method PluginAPI.addUtilities(utilities: CSSRuleObject | CSSRuleObject[], options?: Partial<{ respectPrefix: boolean; respectImportant: boolean }>): void - removed:
method PluginAPI.addVariant(name: string, definition: string | string[] | (() => string) | (() => string)[]): void - removed:
method PluginAPI.corePlugins(path: string): boolean - removed:
method PluginAPI.matchComponents<T = string, U = string>(components: KeyValuePair<string, (value: T | string, extra: { modifier: U | string | null }) => CSSRuleObject | null>, options?: Partial<{ respectPrefix: boolean; respectImportant: boolean; type: ValueType | ValueType[]; values: KeyValuePair<string, T>; modifiers: 'any' | KeyValuePair<string, U>; supportsNegativeValues: boolean }>): void - removed:
method PluginAPI.matchUtilities<T = string, U = string>(utilities: KeyValuePair<string, (value: T | string, extra: { modifier: U | string | null }) => CSSRuleObject | null>, options?: Partial<{ respectPrefix: boolean; respectImportant: boolean; type: ValueType | ValueType[]; values: KeyValuePair<string, T>; modifiers: 'any' | KeyValuePair<string, U>; supportsNegativeValues: boolean }>): void - removed:
method PluginAPI.matchVariant<T = string>(name: string, cb: (value: T | string, extra: { modifier: string | null }) => string | string[], options?: { values?: KeyValuePair<string, T>; sort?(a: { value: T | string; modifier: string | null }, b: { value: T | string; modifier: string | null }): number }): void - removed:
property PluginAPI.config: <TDefaultValue = Config>(path?: string, defaultValue?: TDefaultValue) => TDefaultValue - removed:
property PluginAPI.e: (className: string) => string - removed:
property PluginAPI.theme: <TDefaultValue = Config['theme']>(path?: string, defaultValue?: TDefaultValue) => TDefaultValue - removed:
property ThemeConfig.accentColor: ThemeConfig['colors'] - removed:
property ThemeConfig.animation: ResolvableTo<KeyValuePair> - removed:
property ThemeConfig.aspectRatio: ResolvableTo<KeyValuePair> - removed:
property ThemeConfig.backdropBlur: ThemeConfig['blur'] - removed:
property ThemeConfig.backdropBrightness: ThemeConfig['brightness'] - removed:
property ThemeConfig.backdropContrast: ThemeConfig['contrast'] - removed:
property ThemeConfig.backdropGrayscale: ThemeConfig['grayscale'] - removed:
property ThemeConfig.backdropHueRotate: ThemeConfig['hueRotate'] - removed:
property ThemeConfig.backdropInvert: ThemeConfig['invert'] - removed:
property ThemeConfig.backdropOpacity: ThemeConfig['opacity'] - removed:
property ThemeConfig.backdropSaturate: ThemeConfig['saturate'] - removed:
property ThemeConfig.backdropSepia: ThemeConfig['sepia'] - removed:
property ThemeConfig.backgroundColor: ThemeConfig['colors'] - removed:
property ThemeConfig.backgroundImage: ResolvableTo<KeyValuePair> - removed:
property ThemeConfig.backgroundOpacity: ThemeConfig['opacity'] - removed:
property ThemeConfig.backgroundPosition: ResolvableTo<KeyValuePair> - removed:
property ThemeConfig.backgroundSize: ResolvableTo<KeyValuePair> - removed:
property ThemeConfig.blur: ResolvableTo<KeyValuePair> - removed:
property ThemeConfig.borderColor: ThemeConfig['colors'] - removed:
property ThemeConfig.borderOpacity: ThemeConfig['opacity'] - removed:
property ThemeConfig.borderRadius: ResolvableTo<KeyValuePair> - removed:
property ThemeConfig.borderSpacing: ThemeConfig['spacing'] - removed:
property ThemeConfig.borderWidth: ResolvableTo<KeyValuePair> - removed:
property ThemeConfig.boxShadow: ResolvableTo<KeyValuePair<string, string | string[]>> - removed:
property ThemeConfig.boxShadowColor: ThemeConfig['colors'] - removed:
property ThemeConfig.brightness: ResolvableTo<KeyValuePair> - removed:
property ThemeConfig.caretColor: ThemeConfig['colors'] - removed:
property ThemeConfig.colors: ResolvableTo<RecursiveKeyValuePair> - removed:
property ThemeConfig.columns: ResolvableTo<KeyValuePair> - removed:
property ThemeConfig.container: ResolvableTo<Partial<{ screens: ScreensConfig; center: boolean; padding: string | Record<string, string> }>> - removed:
property ThemeConfig.content: ResolvableTo<KeyValuePair> - removed:
property ThemeConfig.contrast: ResolvableTo<KeyValuePair> - removed:
property ThemeConfig.cursor: ResolvableTo<KeyValuePair> - removed:
property ThemeConfig.data: ResolvableTo<Record<string, string>> - removed:
property ThemeConfig.divideColor: ThemeConfig['borderColor'] - removed:
property ThemeConfig.divideOpacity: ThemeConfig['borderOpacity'] - removed:
property ThemeConfig.divideWidth: ThemeConfig['borderWidth'] - removed:
property ThemeConfig.dropShadow: ResolvableTo<KeyValuePair<string, string | string[]>> - removed:
property ThemeConfig.fill: ThemeConfig['colors'] - removed:
property ThemeConfig.flex: ResolvableTo<KeyValuePair> - removed:
property ThemeConfig.flexBasis: ThemeConfig['spacing'] - removed:
property ThemeConfig.flexGrow: ResolvableTo<KeyValuePair> - removed:
property ThemeConfig.flexShrink: ResolvableTo<KeyValuePair> - removed:
property ThemeConfig.fontFamily: ResolvableTo<KeyValuePair<string, | string | string[] | [fontFamily: string | string[], configuration: Partial<{ fontFeatureSettings: string; fontVariationSettings: string }>]>> - removed:
property ThemeConfig.fontSize: ResolvableTo<KeyValuePair<string, | string | [fontSize: string, lineHeight: string] | [fontSize: string, configuration: Partial<{ lineHeight: string; letterSpacing: string; fontWeight: string | number }>]>> - removed:
property ThemeConfig.fontWeight: ResolvableTo<KeyValuePair> - removed:
property ThemeConfig.gap: ThemeConfig['spacing'] - removed:
property ThemeConfig.gradientColorStops: ThemeConfig['colors'] - removed:
property ThemeConfig.grayscale: ResolvableTo<KeyValuePair> - removed:
property ThemeConfig.gridAutoColumns: ResolvableTo<KeyValuePair> - removed:
property ThemeConfig.gridAutoRows: ResolvableTo<KeyValuePair> - removed:
property ThemeConfig.gridColumn: ResolvableTo<KeyValuePair> - removed:
property ThemeConfig.gridColumnEnd: ResolvableTo<KeyValuePair> - removed:
property ThemeConfig.gridColumnStart: ResolvableTo<KeyValuePair> - removed:
property ThemeConfig.gridRow: ResolvableTo<KeyValuePair> - removed:
property ThemeConfig.gridRowEnd: ResolvableTo<KeyValuePair> - removed:
property ThemeConfig.gridRowStart: ResolvableTo<KeyValuePair> - removed:
property ThemeConfig.gridTemplateColumns: ResolvableTo<KeyValuePair> - removed:
property ThemeConfig.gridTemplateRows: ResolvableTo<KeyValuePair> - removed:
property ThemeConfig.height: ThemeConfig['spacing'] - removed:
property ThemeConfig.hueRotate: ResolvableTo<KeyValuePair> - removed:
property ThemeConfig.inset: ThemeConfig['spacing'] - removed:
property ThemeConfig.invert: ResolvableTo<KeyValuePair> - removed:
property ThemeConfig.keyframes: ResolvableTo<KeyValuePair<string, KeyValuePair<string, KeyValuePair>>> - removed:
property ThemeConfig.letterSpacing: ResolvableTo<KeyValuePair> - removed:
property ThemeConfig.lineHeight: ResolvableTo<KeyValuePair> - removed:
property ThemeConfig.listStyleType: ResolvableTo<KeyValuePair> - removed:
property ThemeConfig.margin: ThemeConfig['spacing'] - removed:
property ThemeConfig.maxHeight: ThemeConfig['spacing'] - removed:
property ThemeConfig.maxWidth: ResolvableTo<KeyValuePair> - removed:
property ThemeConfig.minHeight: ResolvableTo<KeyValuePair> - removed:
property ThemeConfig.minWidth: ResolvableTo<KeyValuePair> - removed:
property ThemeConfig.objectPosition: ResolvableTo<KeyValuePair> - removed:
property ThemeConfig.opacity: ResolvableTo<KeyValuePair> - removed:
property ThemeConfig.order: ResolvableTo<KeyValuePair> - removed:
property ThemeConfig.outlineColor: ThemeConfig['colors'] - removed:
property ThemeConfig.outlineOffset: ResolvableTo<KeyValuePair> - removed:
property ThemeConfig.outlineWidth: ResolvableTo<KeyValuePair> - removed:
property ThemeConfig.padding: ThemeConfig['spacing'] - removed:
property ThemeConfig.placeholderColor: ThemeConfig['colors'] - removed:
property ThemeConfig.placeholderOpacity: ThemeConfig['opacity'] - removed:
property ThemeConfig.ringColor: ThemeConfig['colors'] - removed:
property ThemeConfig.ringOffsetColor: ThemeConfig['colors'] - removed:
property ThemeConfig.ringOffsetWidth: ResolvableTo<KeyValuePair> - removed:
property ThemeConfig.ringOpacity: ThemeConfig['opacity'] - removed:
property ThemeConfig.ringWidth: ResolvableTo<KeyValuePair> - removed:
property ThemeConfig.rotate: ResolvableTo<KeyValuePair> - removed:
property ThemeConfig.saturate: ResolvableTo<KeyValuePair> - removed:
property ThemeConfig.scale: ResolvableTo<KeyValuePair> - removed:
property ThemeConfig.screens: ResolvableTo<ScreensConfig> - removed:
property ThemeConfig.scrollMargin: ThemeConfig['spacing'] - removed:
property ThemeConfig.scrollPadding: ThemeConfig['spacing'] - removed:
property ThemeConfig.sepia: ResolvableTo<KeyValuePair> - removed:
property ThemeConfig.skew: ResolvableTo<KeyValuePair> - removed:
property ThemeConfig.space: ThemeConfig['spacing'] - removed:
property ThemeConfig.spacing: ResolvableTo<KeyValuePair> - removed:
property ThemeConfig.stroke: ThemeConfig['colors'] - removed:
property ThemeConfig.strokeWidth: ResolvableTo<KeyValuePair> - removed:
property ThemeConfig.supports: ResolvableTo<Record<string, string>> - removed:
property ThemeConfig.textColor: ThemeConfig['colors'] - removed:
property ThemeConfig.textDecorationColor: ThemeConfig['colors'] - removed:
property ThemeConfig.textDecorationThickness: ResolvableTo<KeyValuePair> - removed:
property ThemeConfig.textIndent: ThemeConfig['spacing'] - removed:
property ThemeConfig.textOpacity: ThemeConfig['opacity'] - removed:
property ThemeConfig.textUnderlineOffset: ResolvableTo<KeyValuePair> - removed:
property ThemeConfig.transformOrigin: ResolvableTo<KeyValuePair> - removed:
property ThemeConfig.transitionDelay: ResolvableTo<KeyValuePair> - removed:
property ThemeConfig.transitionDuration: ResolvableTo<KeyValuePair> - removed:
property ThemeConfig.transitionProperty: ResolvableTo<KeyValuePair> - removed:
property ThemeConfig.transitionTimingFunction: ResolvableTo<KeyValuePair> - removed:
property ThemeConfig.translate: ThemeConfig['spacing'] - removed:
property ThemeConfig.width: ThemeConfig['spacing'] - removed:
property ThemeConfig.willChange: ResolvableTo<KeyValuePair> - removed:
property ThemeConfig.zIndex: ResolvableTo<KeyValuePair> - removed:
type Config = RequiredConfig & Partial<OptionalConfig> - removed:
type PluginCreator = (api: PluginAPI) => void - removed:
type PluginsConfig = (| PluginCreator | { handler: PluginCreator; config?: Partial<Config> | undefined } | { (options: any): { handler: PluginCreator; config?: Partial<Config> | un… - removed:
type ResolvableTo<T> = T | ((utils: PluginUtils) => T)
- removed:
interface DefaultColors - removed:
property DefaultColors.amber: { '50': '#fffbeb'; '100': '#fef3c7'; '200': '#fde68a'; '300': '#fcd34d'; '400': '#fbbf24'; '500': '#f59e0b'; '600': '#d97706'; '700': '#b45309'; '800': '#92400e'; '900': '#78350f'; '950': '#451a03' } - removed:
property DefaultColors.black: '#000' - removed:
property DefaultColors.blue: { '50': '#eff6ff'; '100': '#dbeafe'; '200': '#bfdbfe'; '300': '#93c5fd'; '400': '#60a5fa'; '500': '#3b82f6'; '600': '#2563eb'; '700': '#1d4ed8'; '800': '#1e40af'; '900': '#1e3a8a'; '950': '#172554' } - removed:
property DefaultColors.blueGray: DefaultColors['slate'] - removed:
property DefaultColors.coolGray: DefaultColors['gray'] - removed:
property DefaultColors.current: 'currentColor' - removed:
property DefaultColors.cyan: { '50': '#ecfeff'; '100': '#cffafe'; '200': '#a5f3fc'; '300': '#67e8f9'; '400': '#22d3ee'; '500': '#06b6d4'; '600': '#0891b2'; '700': '#0e7490'; '800': '#155e75'; '900': '#164e63'; '950': '#083344' } - removed:
property DefaultColors.emerald: { '50': '#ecfdf5'; '100': '#d1fae5'; '200': '#a7f3d0'; '300': '#6ee7b7'; '400': '#34d399'; '500': '#10b981'; '600': '#059669'; '700': '#047857'; '800': '#065f46'; '900': '#064e3b'; '950': '#022c22' } - removed:
property DefaultColors.fuchsia: { '50': '#fdf4ff'; '100': '#fae8ff'; '200': '#f5d0fe'; '300': '#f0abfc'; '400': '#e879f9'; '500': '#d946ef'; '600': '#c026d3'; '700': '#a21caf'; '800': '#86198f'; '900': '#701a75'; '950': '#4a044e' } - removed:
property DefaultColors.gray: { '50': '#f9fafb'; '100': '#f3f4f6'; '200': '#e5e7eb'; '300': '#d1d5db'; '400': '#9ca3af'; '500': '#6b7280'; '600': '#4b5563'; '700': '#374151'; '800': '#1f2937'; '900': '#111827'; '950': '#030712' } - removed:
property DefaultColors.green: { '50': '#f0fdf4'; '100': '#dcfce7'; '200': '#bbf7d0'; '300': '#86efac'; '400': '#4ade80'; '500': '#22c55e'; '600': '#16a34a'; '700': '#15803d'; '800': '#166534'; '900': '#14532d'; '950': '#052e16' } - removed:
property DefaultColors.indigo: { '50': '#eef2ff'; '100': '#e0e7ff'; '200': '#c7d2fe'; '300': '#a5b4fc'; '400': '#818cf8'; '500': '#6366f1'; '600': '#4f46e5'; '700': '#4338ca'; '800': '#3730a3'; '900': '#312e81'; '950': '#1e1b4b' } - removed:
property DefaultColors.inherit: 'inherit' - removed:
property DefaultColors.lightBlue: DefaultColors['sky'] - removed:
property DefaultColors.lime: { '50': '#f7fee7'; '100': '#ecfccb'; '200': '#d9f99d'; '300': '#bef264'; '400': '#a3e635'; '500': '#84cc16'; '600': '#65a30d'; '700': '#4d7c0f'; '800': '#3f6212'; '900': '#365314'; '950': '#1a2e05' } - removed:
property DefaultColors.neutral: { '50': '#fafafa'; '100': '#f5f5f5'; '200': '#e5e5e5'; '300': '#d4d4d4'; '400': '#a3a3a3'; '500': '#737373'; '600': '#525252'; '700': '#404040'; '800': '#262626'; '900': '#171717'; '950': '#0a0a0a' } - removed:
property DefaultColors.orange: { '50': '#fff7ed'; '100': '#ffedd5'; '200': '#fed7aa'; '300': '#fdba74'; '400': '#fb923c'; '500': '#f97316'; '600': '#ea580c'; '700': '#c2410c'; '800': '#9a3412'; '900': '#7c2d12'; '950': '#431407' } - removed:
property DefaultColors.pink: { '50': '#fdf2f8'; '100': '#fce7f3'; '200': '#fbcfe8'; '300': '#f9a8d4'; '400': '#f472b6'; '500': '#ec4899'; '600': '#db2777'; '700': '#be185d'; '800': '#9d174d'; '900': '#831843'; '950': '#500724' } - removed:
property DefaultColors.purple: { '50': '#faf5ff'; '100': '#f3e8ff'; '200': '#e9d5ff'; '300': '#d8b4fe'; '400': '#c084fc'; '500': '#a855f7'; '600': '#9333ea'; '700': '#7e22ce'; '800': '#6b21a8'; '900': '#581c87'; '950': '#3b0764' } - removed:
property DefaultColors.red: { '50': '#fef2f2'; '100': '#fee2e2'; '200': '#fecaca'; '300': '#fca5a5'; '400': '#f87171'; '500': '#ef4444'; '600': '#dc2626'; '700': '#b91c1c'; '800': '#991b1b'; '900': '#7f1d1d'; '950': '#450a0a' } - removed:
property DefaultColors.rose: { '50': '#fff1f2'; '100': '#ffe4e6'; '200': '#fecdd3'; '300': '#fda4af'; '400': '#fb7185'; '500': '#f43f5e'; '600': '#e11d48'; '700': '#be123c'; '800': '#9f1239'; '900': '#881337'; '950': '#4c0519' } - removed:
property DefaultColors.sky: { '50': '#f0f9ff'; '100': '#e0f2fe'; '200': '#bae6fd'; '300': '#7dd3fc'; '400': '#38bdf8'; '500': '#0ea5e9'; '600': '#0284c7'; '700': '#0369a1'; '800': '#075985'; '900': '#0c4a6e'; '950': '#082f49' } - removed:
property DefaultColors.slate: { '50': '#f8fafc'; '100': '#f1f5f9'; '200': '#e2e8f0'; '300': '#cbd5e1'; '400': '#94a3b8'; '500': '#64748b'; '600': '#475569'; '700': '#334155'; '800': '#1e293b'; '900': '#0f172a'; '950': '#020617' } - removed:
property DefaultColors.stone: { '50': '#fafaf9'; '100': '#f5f5f4'; '200': '#e7e5e4'; '300': '#d6d3d1'; '400': '#a8a29e'; '500': '#78716c'; '600': '#57534e'; '700': '#44403c'; '800': '#292524'; '900': '#1c1917'; '950': '#0c0a09' } - removed:
property DefaultColors.teal: { '50': '#f0fdfa'; '100': '#ccfbf1'; '200': '#99f6e4'; '300': '#5eead4'; '400': '#2dd4bf'; '500': '#14b8a6'; '600': '#0d9488'; '700': '#0f766e'; '800': '#115e59'; '900': '#134e4a'; '950': '#042f2e' } - removed:
property DefaultColors.transparent: 'transparent' - removed:
property DefaultColors.trueGray: DefaultColors['neutral'] - removed:
property DefaultColors.violet: { '50': '#f5f3ff'; '100': '#ede9fe'; '200': '#ddd6fe'; '300': '#c4b5fd'; '400': '#a78bfa'; '500': '#8b5cf6'; '600': '#7c3aed'; '700': '#6d28d9'; '800': '#5b21b6'; '900': '#4c1d95'; '950': '#2e1065' } - removed:
property DefaultColors.warmGray: DefaultColors['stone'] - removed:
property DefaultColors.white: '#fff' - removed:
property DefaultColors.yellow: { '50': '#fefce8'; '100': '#fef9c3'; '200': '#fef08a'; '300': '#fde047'; '400': '#facc15'; '500': '#eab308'; '600': '#ca8a04'; '700': '#a16207'; '800': '#854d0e'; '900': '#713f12'; '950': '#422006' } - removed:
property DefaultColors.zinc: { '50': '#fafafa'; '100': '#f4f4f5'; '200': '#e4e4e7'; '300': '#d4d4d8'; '400': '#a1a1aa'; '500': '#71717a'; '600': '#52525b'; '700': '#3f3f46'; '800': '#27272a'; '900': '#18181b'; '950': '#09090b' }
- removed:
type CorePluginList = 'preflight' | 'container' | 'accessibility' | 'pointerEvents' | 'visibility' | 'position' | 'inset' | 'isolation' | 'zIndex' | 'order' | 'gridColumn' | 'gridCo…
- removed:
type DefaultTheme = { animation: Record<'none' | 'spin' | 'ping' | 'pulse' | 'bounce', string>; aria: Record<| 'busy' | 'checked' | 'disabled' | 'expanded' | 'hidden' | 'pressed'…
- removed:
const plugin: PluginCreator<string | Config | { config: string | Config }> - removed:
export = plugin - removed:
namespace plugin