tailwind-merge
Advanced tools
Comparing version 0.0.0-dev.d34fea9c36fe046e9b0c8c5d529f95510ccd3956 to 0.0.0-dev.da5f9f1329453257db851c5f39c36a9d2b1fc84e
@@ -9,1 +9,2 @@ export { twMerge } from './lib/tailwind-merge'; | ||
export { fromTheme } from './lib/from-theme'; | ||
export { join } from './lib/join'; |
import { Config } from './types'; | ||
import { ClassNameValue } from './join'; | ||
declare type CreateConfigFirst = () => Config; | ||
declare type CreateConfigSubsequent = (config: Config) => Config; | ||
declare type ClassLists = ClassListElement[]; | ||
declare type ClassListElement = string | undefined | null | false; | ||
declare type TailwindMerge = (...classLists: ClassLists) => string; | ||
declare type TailwindMerge = (...classLists: ClassNameValue[]) => string; | ||
export declare function createTailwindMerge(...createConfig: [CreateConfigFirst, ...CreateConfigSubsequent[]]): TailwindMerge; | ||
export {}; |
import { Config } from './types'; | ||
declare type CreateConfigSubsequent = (config: Config) => Config; | ||
export declare function extendTailwindMerge(configExtension: Partial<Config> | CreateConfigSubsequent, ...createConfig: CreateConfigSubsequent[]): (...classLists: (string | false | null | undefined)[]) => string; | ||
export declare function extendTailwindMerge(configExtension: Partial<Config> | CreateConfigSubsequent, ...createConfig: CreateConfigSubsequent[]): (...classLists: import("./join").ClassNameValue[]) => string; | ||
export {}; |
@@ -1,1 +0,1 @@ | ||
export declare const twMerge: (...classLists: (string | false | null | undefined)[]) => string; | ||
export declare const twMerge: (...classLists: import("./join").ClassNameValue[]) => string; |
@@ -1,2 +0,2 @@ | ||
"use strict";function r(){return r=Object.assign?Object.assign.bind():function(r){for(var e=1;e<arguments.length;e++){var t=arguments[e];for(var o in t)Object.prototype.hasOwnProperty.call(t,o)&&(r[o]=t[o])}return r},r.apply(this,arguments)}function e(r,e){(null==e||e>r.length)&&(e=r.length);for(var t=0,o=new Array(e);t<e;t++)o[t]=r[t];return o}function t(r){if(r<1)return{get:function(){},set:function(){}};var e=0,t=new Map,o=new Map;function n(n,i){t.set(n,i),++e>r&&(e=0,o=t,t=new Map)}return{get:function(r){var e=t.get(r);return void 0!==e?e:void 0!==(e=o.get(r))?(n(r,e),e):void 0},set:function(r,e){t.has(r)?t.set(r,e):n(r,e)}}}function o(r){var e=function(r){var e=r.theme,t=r.prefix,o={nextPart:new Map,validators:[]};return function(r,e){return e?r.map((function(r){return[r[0],r[1].map((function(r){return"string"==typeof r?e+r:"object"==typeof r?Object.fromEntries(Object.entries(r).map((function(r){return[e+r[0],r[1]]}))):r}))]})):r}(Object.entries(r.classGroups),t).forEach((function(r){a(r[1],o,r[0],e)})),o}(r);return{getClassGroupId:function(r){var t=r.split("-");return""===t[0]&&1!==t.length&&t.shift(),n(t,e)||function(r){if(i.test(r)){var e=i.exec(r)[1],t=null==e?void 0:e.substring(0,e.indexOf(":"));if(t)return"arbitrary.."+t}}(r)},getConflictingClassGroupIds:function(e){return r.conflictingClassGroups[e]||[]}}}function n(r,e){var t;if(0===r.length)return e.classGroupId;var o=e.nextPart.get(r[0]),i=o?n(r.slice(1),o):void 0;if(i)return i;if(0!==e.validators.length){var a=r.join("-");return null==(t=e.validators.find((function(r){return(0,r.validator)(a)})))?void 0:t.classGroupId}}Object.defineProperty(exports,"__esModule",{value:!0});var i=/^\[(.+)\]$/;function a(r,e,t,o){r.forEach((function(r){if("string"!=typeof r){if("function"==typeof r)return r.isThemeGetter?void a(r(o),e,t,o):void e.validators.push({validator:r,classGroupId:t});Object.entries(r).forEach((function(r){a(r[1],l(e,r[0]),t,o)}))}else(""===r?e:l(e,r)).classGroupId=t}))}function l(r,e){var t=r;return e.split("-").forEach((function(r){t.nextPart.has(r)||t.nextPart.set(r,{nextPart:new Map,validators:[]}),t=t.nextPart.get(r)})),t}function s(e){return r({cache:t(e.cacheSize)},o(e))}var c=/\s+/;function d(r,t){var o=t.getClassGroupId,n=t.getConflictingClassGroupIds,i=new Set;return r.trim().split(c).map((function(r){var t=function(r){for(var t,o=[],n=0,i=0,a=function(r,t){var o="undefined"!=typeof Symbol&&r[Symbol.iterator]||r["@@iterator"];if(o)return(o=o.call(r)).next.bind(o);if(Array.isArray(r)||(o=function(r,t){if(r){if("string"==typeof r)return e(r,t);var o=Object.prototype.toString.call(r).slice(8,-1);return"Object"===o&&r.constructor&&(o=r.constructor.name),"Map"===o||"Set"===o?Array.from(r):"Arguments"===o||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(o)?e(r,t):void 0}}(r))){o&&(r=o);var n=0;return function(){return n>=r.length?{done:!0}:{done:!1,value:r[n++]}}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}(r.matchAll(/[:[\]]/g));!(t=a()).done;){var l=t.value;if(":"===l[0]){if(0===n){var s=l.index+1;o.push(r.substring(i,s)),i=s}}else"["===l[0]?n++:"]"===l[0]&&n--}var c=0===o.length?r:r.substring(i),d=c.startsWith("!");return{modifiers:o,hasImportantModifier:d,baseClassName:d?c.substring(1):c}}(r),n=t.modifiers,i=t.hasImportantModifier,a=o(t.baseClassName);if(!a)return{isTailwindClass:!1,originalClassName:r};var l=function(r){if(r.length<=1)return r;var e=[],t=[];return r.forEach((function(r){"["===r[0]?(e.push.apply(e,t.sort().concat([r])),t=[]):t.push(r)})),e.push.apply(e,t.sort()),e}(n).join("");return{isTailwindClass:!0,modifierId:i?l+"!":l,classGroupId:a,originalClassName:r}})).reverse().filter((function(r){if(!r.isTailwindClass)return!0;var e=r.modifierId,t=r.classGroupId,o=e+t;return!i.has(o)&&(i.add(o),n(t).forEach((function(r){return i.add(e+r)})),!0)})).reverse().map((function(r){return r.originalClassName})).join(" ")}function u(){for(var r=arguments.length,e=new Array(r),t=0;t<r;t++)e[t]=arguments[t];var o,n,i,a=l;function l(r){var t=e[0],l=e.slice(1).reduce((function(r,e){return e(r)}),t());return o=s(l),n=o.cache.get,i=o.cache.set,a=c,c(r)}function c(r){var e=n(r);if(e)return e;var t=d(r,o);return i(r,t),t}return function(){for(var r,e="",t=0;t<arguments.length;t+=1)(r=arguments[t])&&(e&&(e+=" "),e+=r);return a(e)}}function p(r){var e=function(e){return e[r]||[]};return e.isThemeGetter=!0,e}var b=/^\[(.+)\]$/,f=/^\d+\/\d+$/,g=new Set(["px","full","screen"]),m=/^(\d+)?(xs|sm|md|lg|xl)$/,v=/\d+(%|px|em|rem|vh|vw|pt|pc|in|cm|mm|cap|ch|ex|lh|rlh|vi|vb|vmin|vmax)/,h=/^-?((\d+)?\.?(\d+)[a-z]+|0)_-?((\d+)?\.?(\d+)[a-z]+|0)/;function y(r){return!Number.isNaN(Number(r))||g.has(r)||f.test(r)||x(r)}function x(r){var e,t=null==(e=b.exec(r))?void 0:e[1];return!!t&&(t.startsWith("length:")||v.test(t))}function w(r){var e,t=null==(e=b.exec(r))?void 0:e[1];return!!t&&t.startsWith("size:")}function k(r){var e,t=null==(e=b.exec(r))?void 0:e[1];return!!t&&t.startsWith("position:")}function z(r){var e,t=null==(e=b.exec(r))?void 0:e[1];return!!t&&(t.startsWith("url(")||t.startsWith("url:"))}function j(r){var e,t=null==(e=b.exec(r))?void 0:e[1];return!!t&&(!Number.isNaN(Number(t))||t.startsWith("number:"))}function C(r){var e,t=null==(e=b.exec(r))?void 0:e[1];return Number.isInteger(Number(t||r))}function A(r){return b.test(r)}function I(){return!0}function S(r){return m.test(r)}function G(r){var e,t=null==(e=b.exec(r))?void 0:e[1];return!!t&&h.test(t)}var N={__proto__:null,isLength:y,isArbitraryLength:x,isArbitrarySize:w,isArbitraryPosition:k,isArbitraryUrl:z,isArbitraryWeight:j,isInteger:C,isArbitraryValue:A,isAny:I,isTshirtSize:S,isArbitraryShadow:G};function O(){var r=p("colors"),e=p("spacing"),t=p("blur"),o=p("brightness"),n=p("borderColor"),i=p("borderRadius"),a=p("borderSpacing"),l=p("borderWidth"),s=p("contrast"),c=p("grayscale"),d=p("hueRotate"),u=p("invert"),b=p("gap"),f=p("gradientColorStops"),g=p("inset"),m=p("margin"),v=p("opacity"),h=p("padding"),N=p("saturate"),O=p("scale"),M=p("sepia"),P=p("skew"),T=p("space"),W=p("translate"),E=function(){return["auto",e]},_=function(){return["",y]},$=function(){return["auto",C]},R=function(){return["","0",A]};return{cacheSize:500,theme:{colors:[I],spacing:[y],blur:["none","",S,x],brightness:[C],borderColor:[r],borderRadius:["none","","full",S,x],borderSpacing:[e],borderWidth:_(),contrast:[C],grayscale:R(),hueRotate:[C],invert:R(),gap:[e],gradientColorStops:[r],inset:E(),margin:E(),opacity:[C],padding:[e],saturate:[C],scale:[C],sepia:R(),skew:[C,A],space:[e],translate:[e]},classGroups:{aspect:[{aspect:["auto","square","video",A]}],container:["container"],columns:[{columns:[S]}],"break-after":[{"break-after":["auto","avoid","all","avoid-page","page","left","right","column"]}],"break-before":[{"break-before":["auto","avoid","all","avoid-page","page","left","right","column"]}],"break-inside":[{"break-inside":["auto","avoid","avoid-page","avoid-column"]}],"box-decoration":[{"box-decoration":["slice","clone"]}],box:[{box:["border","content"]}],display:["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"],float:[{float:["right","left","none"]}],clear:[{clear:["left","right","both","none"]}],isolation:["isolate","isolation-auto"],"object-fit":[{object:["contain","cover","fill","none","scale-down"]}],"object-position":[{object:[].concat(["bottom","center","left","left-bottom","left-top","right","right-bottom","right-top","top"],[A])}],overflow:[{overflow:["auto","hidden","clip","visible","scroll"]}],"overflow-x":[{"overflow-x":["auto","hidden","clip","visible","scroll"]}],"overflow-y":[{"overflow-y":["auto","hidden","clip","visible","scroll"]}],overscroll:[{overscroll:["auto","contain","none"]}],"overscroll-x":[{"overscroll-x":["auto","contain","none"]}],"overscroll-y":[{"overscroll-y":["auto","contain","none"]}],position:["static","fixed","absolute","relative","sticky"],inset:[{inset:[g]}],"inset-x":[{"inset-x":[g]}],"inset-y":[{"inset-y":[g]}],top:[{top:[g]}],right:[{right:[g]}],bottom:[{bottom:[g]}],left:[{left:[g]}],visibility:["visible","invisible"],z:[{z:[y]}],basis:[{basis:[e]}],"flex-direction":[{flex:["row","row-reverse","col","col-reverse"]}],"flex-wrap":[{flex:["wrap","wrap-reverse","nowrap"]}],flex:[{flex:["1","auto","initial","none",A]}],grow:[{grow:R()}],shrink:[{shrink:R()}],order:[{order:["first","last","none",C]}],"grid-cols":[{"grid-cols":[I]}],"col-start-end":[{col:["auto",{span:[C]}]}],"col-start":[{"col-start":$()}],"col-end":[{"col-end":$()}],"grid-rows":[{"grid-rows":[I]}],"row-start-end":[{row:["auto",{span:[C]}]}],"row-start":[{"row-start":$()}],"row-end":[{"row-end":$()}],"grid-flow":[{"grid-flow":["row","col","dense","row-dense","col-dense"]}],"auto-cols":[{"auto-cols":["auto","min","max","fr",A]}],"auto-rows":[{"auto-rows":["auto","min","max","fr",A]}],gap:[{gap:[b]}],"gap-x":[{"gap-x":[b]}],"gap-y":[{"gap-y":[b]}],"justify-content":[{justify:["start","end","center","between","around","evenly"]}],"justify-items":[{"justify-items":["start","end","center","stretch"]}],"justify-self":[{"justify-self":["auto","start","end","center","stretch"]}],"align-content":[{content:["start","end","center","between","around","evenly"]}],"align-items":[{items:["start","end","center","baseline","stretch"]}],"align-self":[{self:["auto","start","end","center","stretch","baseline"]}],"place-content":[{"place-content":[].concat(["start","end","center","between","around","evenly"],["stretch"])}],"place-items":[{"place-items":["start","end","center","stretch"]}],"place-self":[{"place-self":["auto","start","end","center","stretch"]}],p:[{p:[h]}],px:[{px:[h]}],py:[{py:[h]}],pt:[{pt:[h]}],pr:[{pr:[h]}],pb:[{pb:[h]}],pl:[{pl:[h]}],m:[{m:[m]}],mx:[{mx:[m]}],my:[{my:[m]}],mt:[{mt:[m]}],mr:[{mr:[m]}],mb:[{mb:[m]}],ml:[{ml:[m]}],"space-x":[{"space-x":[T]}],"space-x-reverse":["space-x-reverse"],"space-y":[{"space-y":[T]}],"space-y-reverse":["space-y-reverse"],w:[{w:["auto","min","max","fit",e]}],"min-w":[{"min-w":["min","max","fit",y]}],"max-w":[{"max-w":["0","none","full","min","max","fit","prose",{screen:[S]},S,x]}],h:[{h:E()}],"min-h":[{"min-h":["min","max","fit",y]}],"max-h":[{"max-h":[e,"min","max","fit"]}],"font-size":[{text:["base",S,x]}],"font-smoothing":["antialiased","subpixel-antialiased"],"font-style":["italic","not-italic"],"font-weight":[{font:["thin","extralight","light","normal","medium","semibold","bold","extrabold","black",j]}],"font-family":[{font:[I]}],"fvn-normal":["normal-nums"],"fvn-ordinal":["ordinal"],"fvn-slashed-zero":["slashed-zero"],"fvn-figure":["lining-nums","oldstyle-nums"],"fvn-spacing":["proportional-nums","tabular-nums"],"fvn-fraction":["diagonal-fractions","stacked-fractons"],tracking:[{tracking:["tighter","tight","normal","wide","wider","widest",x]}],leading:[{leading:["none","tight","snug","normal","relaxed","loose",y]}],"list-style-type":[{list:["none","disc","decimal",A]}],"list-style-position":[{list:["inside","outside"]}],"placeholder-color":[{placeholder:[r]}],"placeholder-opacity":[{"placeholder-opacity":[v]}],"text-alignment":[{text:["left","center","right","justify","start","end"]}],"text-color":[{text:[r]}],"text-opacity":[{"text-opacity":[v]}],"text-decoration":["underline","overline","line-through","no-underline"],"text-decoration-style":[{decoration:[].concat(["solid","dashed","dotted","double","none"],["wavy"])}],"text-decoration-thickness":[{decoration:["auto","from-font",y]}],"underline-offset":[{"underline-offset":["auto",y]}],"text-decoration-color":[{decoration:[r]}],"text-transform":["uppercase","lowercase","capitalize","normal-case"],"text-overflow":["truncate","text-ellipsis","text-clip"],indent:[{indent:[e]}],"vertical-align":[{align:["baseline","top","middle","bottom","text-top","text-bottom","sub","super",x]}],whitespace:[{whitespace:["normal","nowrap","pre","pre-line","pre-wrap"]}],break:[{break:["normal","words","all"]}],content:[{content:["none",A]}],"bg-attachment":[{bg:["fixed","local","scroll"]}],"bg-clip":[{"bg-clip":["border","padding","content","text"]}],"bg-opacity":[{"bg-opacity":[v]}],"bg-origin":[{"bg-origin":["border","padding","content"]}],"bg-position":[{bg:[].concat(["bottom","center","left","left-bottom","left-top","right","right-bottom","right-top","top"],[k])}],"bg-repeat":[{bg:["no-repeat",{repeat:["","x","y","round","space"]}]}],"bg-size":[{bg:["auto","cover","contain",w]}],"bg-image":[{bg:["none",{"gradient-to":["t","tr","r","br","b","bl","l","tl"]},z]}],"bg-color":[{bg:[r]}],"gradient-from":[{from:[f]}],"gradient-via":[{via:[f]}],"gradient-to":[{to:[f]}],rounded:[{rounded:[i]}],"rounded-t":[{"rounded-t":[i]}],"rounded-r":[{"rounded-r":[i]}],"rounded-b":[{"rounded-b":[i]}],"rounded-l":[{"rounded-l":[i]}],"rounded-tl":[{"rounded-tl":[i]}],"rounded-tr":[{"rounded-tr":[i]}],"rounded-br":[{"rounded-br":[i]}],"rounded-bl":[{"rounded-bl":[i]}],"border-w":[{border:[l]}],"border-w-x":[{"border-x":[l]}],"border-w-y":[{"border-y":[l]}],"border-w-t":[{"border-t":[l]}],"border-w-r":[{"border-r":[l]}],"border-w-b":[{"border-b":[l]}],"border-w-l":[{"border-l":[l]}],"border-opacity":[{"border-opacity":[v]}],"border-style":[{border:[].concat(["solid","dashed","dotted","double","none"],["hidden"])}],"divide-x":[{"divide-x":[l]}],"divide-x-reverse":["divide-x-reverse"],"divide-y":[{"divide-y":[l]}],"divide-y-reverse":["divide-y-reverse"],"divide-opacity":[{"divide-opacity":[v]}],"divide-style":[{divide:["solid","dashed","dotted","double","none"]}],"border-color":[{border:[n]}],"border-color-x":[{"border-x":[n]}],"border-color-y":[{"border-y":[n]}],"border-color-t":[{"border-t":[n]}],"border-color-r":[{"border-r":[n]}],"border-color-b":[{"border-b":[n]}],"border-color-l":[{"border-l":[n]}],"divide-color":[{divide:[n]}],"outline-style":[{outline:[""].concat(["solid","dashed","dotted","double","none"],["hidden"])}],"outline-offset":[{"outline-offset":[y]}],"outline-w":[{outline:[y]}],"outline-color":[{outline:[r]}],"ring-w":[{ring:_()}],"ring-w-inset":["ring-inset"],"ring-color":[{ring:[r]}],"ring-opacity":[{"ring-opacity":[v]}],"ring-offset-w":[{"ring-offset":[y]}],"ring-offset-color":[{"ring-offset":[r]}],shadow:[{shadow:["","inner","none",S,G]}],"shadow-color":[{shadow:[I]}],opacity:[{opacity:[v]}],"mix-blend":[{"mix-blend":["normal","multiply","screen","overlay","darken","lighten","color-dodge","color-burn","hard-light","soft-light","difference","exclusion","hue","saturation","color","luminosity","plus-lighter"]}],"bg-blend":[{"bg-blend":["normal","multiply","screen","overlay","darken","lighten","color-dodge","color-burn","hard-light","soft-light","difference","exclusion","hue","saturation","color","luminosity","plus-lighter"]}],filter:[{filter:["","none"]}],blur:[{blur:[t]}],brightness:[{brightness:[o]}],contrast:[{contrast:[s]}],"drop-shadow":[{"drop-shadow":["","none",S,A]}],grayscale:[{grayscale:[c]}],"hue-rotate":[{"hue-rotate":[d]}],invert:[{invert:[u]}],saturate:[{saturate:[N]}],sepia:[{sepia:[M]}],"backdrop-filter":[{"backdrop-filter":["","none"]}],"backdrop-blur":[{"backdrop-blur":[t]}],"backdrop-brightness":[{"backdrop-brightness":[o]}],"backdrop-contrast":[{"backdrop-contrast":[s]}],"backdrop-grayscale":[{"backdrop-grayscale":[c]}],"backdrop-hue-rotate":[{"backdrop-hue-rotate":[d]}],"backdrop-invert":[{"backdrop-invert":[u]}],"backdrop-opacity":[{"backdrop-opacity":[v]}],"backdrop-saturate":[{"backdrop-saturate":[N]}],"backdrop-sepia":[{"backdrop-sepia":[M]}],"border-collapse":[{border:["collapse","separate"]}],"border-spacing":[{"border-spacing":[a]}],"border-spacing-x":[{"border-spacing-x":[a]}],"border-spacing-y":[{"border-spacing-y":[a]}],"table-layout":[{table:["auto","fixed"]}],transition:[{transition:["none","all","","colors","opacity","shadow","transform",A]}],duration:[{duration:[C]}],ease:[{ease:["linear","in","out","in-out",A]}],delay:[{delay:[C]}],animate:[{animate:["none","spin","ping","pulse","bounce",A]}],transform:[{transform:["","gpu","none"]}],scale:[{scale:[O]}],"scale-x":[{"scale-x":[O]}],"scale-y":[{"scale-y":[O]}],rotate:[{rotate:[C,A]}],"translate-x":[{"translate-x":[W]}],"translate-y":[{"translate-y":[W]}],"skew-x":[{"skew-x":[P]}],"skew-y":[{"skew-y":[P]}],"transform-origin":[{origin:["center","top","top-right","right","bottom-right","bottom","bottom-left","left","top-left",A]}],accent:[{accent:["auto",r]}],appearance:["appearance-none"],cursor:[{cursor:["auto","default","pointer","wait","text","move","help","not-allowed","none","context-menu","progress","cell","crosshair","vertical-text","alias","copy","no-drop","grab","grabbing","all-scroll","col-resize","row-resize","n-resize","e-resize","s-resize","w-resize","ne-resize","nw-resize","se-resize","sw-resize","ew-resize","ns-resize","nesw-resize","nwse-resize","zoom-in","zoom-out",A]}],"caret-color":[{caret:[r]}],"pointer-events":[{"pointer-events":["none","auto"]}],resize:[{resize:["none","y","x",""]}],"scroll-behavior":[{scroll:["auto","smooth"]}],"scroll-m":[{"scroll-m":[e]}],"scroll-mx":[{"scroll-mx":[e]}],"scroll-my":[{"scroll-my":[e]}],"scroll-mt":[{"scroll-mt":[e]}],"scroll-mr":[{"scroll-mr":[e]}],"scroll-mb":[{"scroll-mb":[e]}],"scroll-ml":[{"scroll-ml":[e]}],"scroll-p":[{"scroll-p":[e]}],"scroll-px":[{"scroll-px":[e]}],"scroll-py":[{"scroll-py":[e]}],"scroll-pt":[{"scroll-pt":[e]}],"scroll-pr":[{"scroll-pr":[e]}],"scroll-pb":[{"scroll-pb":[e]}],"scroll-pl":[{"scroll-pl":[e]}],"snap-align":[{snap:["start","end","center","align-none"]}],"snap-stop":[{snap:["normal","always"]}],"snap-type":[{snap:["none","x","y","both"]}],"snap-strictness":[{snap:["mandatory","proximity"]}],touch:[{touch:["auto","none","pinch-zoom","manipulation",{pan:["x","left","right","y","up","down"]}]}],select:[{select:["none","text","all","auto"]}],"will-change":[{"will-change":["auto","scroll","contents","transform",A]}],fill:[{fill:[r]}],"stroke-w":[{stroke:[y]}],stroke:[{stroke:[r]}],sr:["sr-only","not-sr-only"]},conflictingClassGroups:{overflow:["overflow-x","overflow-y"],overscroll:["overscroll-x","overscroll-y"],inset:["inset-x","inset-y","top","right","bottom","left"],"inset-x":["right","left"],"inset-y":["top","bottom"],flex:["basis","grow","shrink"],"col-start-end":["col-start","col-end"],"row-start-end":["row-start","row-end"],gap:["gap-x","gap-y"],p:["px","py","pt","pr","pb","pl"],px:["pr","pl"],py:["pt","pb"],m:["mx","my","mt","mr","mb","ml"],mx:["mr","ml"],my:["mt","mb"],"font-size":["leading"],"fvn-normal":["fvn-ordinal","fvn-slashed-zero","fvn-figure","fvn-spacing","fvn-fraction"],"fvn-ordinal":["fvn-normal"],"fvn-slashed-zero":["fvn-normal"],"fvn-figure":["fvn-normal"],"fvn-spacing":["fvn-normal"],"fvn-fraction":["fvn-normal"],rounded:["rounded-t","rounded-r","rounded-b","rounded-l","rounded-tl","rounded-tr","rounded-br","rounded-bl"],"rounded-t":["rounded-tl","rounded-tr"],"rounded-r":["rounded-tr","rounded-br"],"rounded-b":["rounded-br","rounded-bl"],"rounded-l":["rounded-tl","rounded-bl"],"border-spacing":["border-spacing-x","border-spacing-y"],"border-w":["border-w-t","border-w-r","border-w-b","border-w-l"],"border-w-x":["border-w-r","border-w-l"],"border-w-y":["border-w-t","border-w-b"],"border-color":["border-color-t","border-color-r","border-color-b","border-color-l"],"border-color-x":["border-color-r","border-color-l"],"border-color-y":["border-color-t","border-color-b"],"scroll-m":["scroll-mx","scroll-my","scroll-mt","scroll-mr","scroll-mb","scroll-ml"],"scroll-mx":["scroll-mr","scroll-ml"],"scroll-my":["scroll-mt","scroll-mb"],"scroll-p":["scroll-px","scroll-py","scroll-pt","scroll-pr","scroll-pb","scroll-pl"],"scroll-px":["scroll-pr","scroll-pl"],"scroll-py":["scroll-pt","scroll-pb"]}}}var M=u(O);function P(r,e){for(var t in e)E(r,t,e[t]);return r}var T=Object.prototype.hasOwnProperty,W=new Set(["string","number","boolean"]);function E(r,e,t){if(T.call(r,e)&&!W.has(typeof t)&&null!==t){if(Array.isArray(t)&&Array.isArray(r[e]))r[e]=r[e].concat(t);else if("object"==typeof t&&"object"==typeof r[e]){if(null===r[e])return void(r[e]=t);for(var o in t)E(r[e],o,t[o])}}else r[e]=t}exports.createTailwindMerge=u,exports.extendTailwindMerge=function(r){for(var e=arguments.length,t=new Array(e>1?e-1:0),o=1;o<e;o++)t[o-1]=arguments[o];return u.apply(void 0,"function"==typeof r?[O,r].concat(t):[function(){return P(O(),r)}].concat(t))},exports.fromTheme=p,exports.getDefaultConfig=O,exports.mergeConfigs=P,exports.twMerge=M,exports.validators=N; | ||
"use strict";function r(){return r=Object.assign?Object.assign.bind():function(r){for(var e=1;e<arguments.length;e++){var o=arguments[e];for(var t in o)Object.prototype.hasOwnProperty.call(o,t)&&(r[t]=o[t])}return r},r.apply(this,arguments)}function e(r){if(r<1)return{get:function(){},set:function(){}};var e=0,o=new Map,t=new Map;function n(n,i){o.set(n,i),++e>r&&(e=0,t=o,o=new Map)}return{get:function(r){var e=o.get(r);return void 0!==e?e:void 0!==(e=t.get(r))?(n(r,e),e):void 0},set:function(r,e){o.has(r)?o.set(r,e):n(r,e)}}}function o(r){var e=function(r){var e=r.theme,o=r.prefix,t={nextPart:new Map,validators:[]};return function(r,e){return e?r.map((function(r){return[r[0],r[1].map((function(r){return"string"==typeof r?e+r:"object"==typeof r?Object.fromEntries(Object.entries(r).map((function(r){return[e+r[0],r[1]]}))):r}))]})):r}(Object.entries(r.classGroups),o).forEach((function(r){i(r[1],t,r[0],e)})),t}(r);return{getClassGroupId:function(r){var o=r.split("-");return""===o[0]&&1!==o.length&&o.shift(),t(o,e)||function(r){if(n.test(r)){var e=n.exec(r)[1],o=null==e?void 0:e.substring(0,e.indexOf(":"));if(o)return"arbitrary.."+o}}(r)},getConflictingClassGroupIds:function(e){return r.conflictingClassGroups[e]||[]}}}function t(r,e){var o;if(0===r.length)return e.classGroupId;var n=e.nextPart.get(r[0]),i=n?t(r.slice(1),n):void 0;if(i)return i;if(0!==e.validators.length){var a=r.join("-");return null==(o=e.validators.find((function(r){return(0,r.validator)(a)})))?void 0:o.classGroupId}}Object.defineProperty(exports,"__esModule",{value:!0});var n=/^\[(.+)\]$/;function i(r,e,o,t){r.forEach((function(r){if("string"!=typeof r){if("function"==typeof r)return r.isThemeGetter?void i(r(t),e,o,t):void e.validators.push({validator:r,classGroupId:o});Object.entries(r).forEach((function(r){i(r[1],a(e,r[0]),o,t)}))}else(""===r?e:a(e,r)).classGroupId=o}))}function a(r,e){var o=r;return e.split("-").forEach((function(r){o.nextPart.has(r)||o.nextPart.set(r,{nextPart:new Map,validators:[]}),o=o.nextPart.get(r)})),o}function l(t){return r({cache:e(t.cacheSize)},o(t))}var s=/\s+/;function c(r,e){var o=e.getClassGroupId,t=e.getConflictingClassGroupIds,n=new Set;return r.trim().split(s).map((function(r){var e=function(r){for(var e,o=[],t=0,n=0;e=d.exec(r);)if(":"===e[0]){if(0===t){var i=e.index+1;o.push(r.substring(n,i)),n=i}}else"["===e[0]?t++:"]"===e[0]&&t--;var a=0===o.length?r:r.substring(n),l=a.startsWith("!");return{modifiers:o,hasImportantModifier:l,baseClassName:l?a.substring(1):a}}(r),t=e.modifiers,n=e.hasImportantModifier,i=o(e.baseClassName);if(!i)return{isTailwindClass:!1,originalClassName:r};var a=function(r){if(r.length<=1)return r;var e=[],o=[];return r.forEach((function(r){"["===r[0]?(e.push.apply(e,o.sort().concat([r])),o=[]):o.push(r)})),e.push.apply(e,o.sort()),e}(t).join("");return{isTailwindClass:!0,modifierId:n?a+"!":a,classGroupId:i,originalClassName:r}})).reverse().filter((function(r){if(!r.isTailwindClass)return!0;var e=r.modifierId,o=r.classGroupId,i=e+o;return!n.has(i)&&(n.add(i),t(o).forEach((function(r){return n.add(e+r)})),!0)})).reverse().map((function(r){return r.originalClassName})).join(" ")}var d=/[:[\]]/g;function u(){for(var r,e,o=0,t="";o<arguments.length;)(r=arguments[o++])&&(e=p(r))&&(t&&(t+=" "),t+=e);return t}function p(r){if("string"==typeof r)return r;for(var e,o="",t=0;t<r.length;t++)r[t]&&(e=p(r[t]))&&(o&&(o+=" "),o+=e);return o}function b(){for(var r=arguments.length,e=new Array(r),o=0;o<r;o++)e[o]=arguments[o];var t,n,i,a=s;function s(r){var o=e[0],s=e.slice(1).reduce((function(r,e){return e(r)}),o());return t=l(s),n=t.cache.get,i=t.cache.set,a=d,d(r)}function d(r){var e=n(r);if(e)return e;var o=c(r,t);return i(r,o),o}return function(){return a(u.apply(null,arguments))}}function f(r){var e=function(e){return e[r]||[]};return e.isThemeGetter=!0,e}var g=/^\[(.+)\]$/,m=/^\d+\/\d+$/,v=new Set(["px","full","screen"]),h=/^(\d+)?(xs|sm|md|lg|xl)$/,y=/\d+(%|px|em|rem|vh|vw|pt|pc|in|cm|mm|cap|ch|ex|lh|rlh|vi|vb|vmin|vmax)/,x=/^-?((\d+)?\.?(\d+)[a-z]+|0)_-?((\d+)?\.?(\d+)[a-z]+|0)/;function w(r){return!Number.isNaN(Number(r))||v.has(r)||m.test(r)||k(r)}function k(r){var e,o=null==(e=g.exec(r))?void 0:e[1];return!!o&&(o.startsWith("length:")||y.test(o))}function z(r){var e,o=null==(e=g.exec(r))?void 0:e[1];return!!o&&o.startsWith("size:")}function j(r){var e,o=null==(e=g.exec(r))?void 0:e[1];return!!o&&o.startsWith("position:")}function C(r){var e,o=null==(e=g.exec(r))?void 0:e[1];return!!o&&(o.startsWith("url(")||o.startsWith("url:"))}function G(r){var e,o=null==(e=g.exec(r))?void 0:e[1];return!!o&&(!Number.isNaN(Number(o))||o.startsWith("number:"))}function I(r){var e,o=null==(e=g.exec(r))?void 0:e[1];return Number.isInteger(Number(o||r))}function N(r){return g.test(r)}function A(){return!0}function O(r){return h.test(r)}function S(r){var e,o=null==(e=g.exec(r))?void 0:e[1];return!!o&&x.test(o)}var M={__proto__:null,isLength:w,isArbitraryLength:k,isArbitrarySize:z,isArbitraryPosition:j,isArbitraryUrl:C,isArbitraryWeight:G,isInteger:I,isArbitraryValue:N,isAny:A,isTshirtSize:O,isArbitraryShadow:S};function P(){var r=f("colors"),e=f("spacing"),o=f("blur"),t=f("brightness"),n=f("borderColor"),i=f("borderRadius"),a=f("borderSpacing"),l=f("borderWidth"),s=f("contrast"),c=f("grayscale"),d=f("hueRotate"),u=f("invert"),p=f("gap"),b=f("gradientColorStops"),g=f("inset"),m=f("margin"),v=f("opacity"),h=f("padding"),y=f("saturate"),x=f("scale"),M=f("sepia"),P=f("skew"),W=f("space"),T=f("translate"),E=function(){return["auto",e]},_=function(){return["",w]},R=function(){return["auto",I]},$=function(){return["","0",N]};return{cacheSize:500,theme:{colors:[A],spacing:[w],blur:["none","",O,k],brightness:[I],borderColor:[r],borderRadius:["none","","full",O,k],borderSpacing:[e],borderWidth:_(),contrast:[I],grayscale:$(),hueRotate:[I],invert:$(),gap:[e],gradientColorStops:[r],inset:E(),margin:E(),opacity:[I],padding:[e],saturate:[I],scale:[I],sepia:$(),skew:[I,N],space:[e],translate:[e]},classGroups:{aspect:[{aspect:["auto","square","video",N]}],container:["container"],columns:[{columns:[O]}],"break-after":[{"break-after":["auto","avoid","all","avoid-page","page","left","right","column"]}],"break-before":[{"break-before":["auto","avoid","all","avoid-page","page","left","right","column"]}],"break-inside":[{"break-inside":["auto","avoid","avoid-page","avoid-column"]}],"box-decoration":[{"box-decoration":["slice","clone"]}],box:[{box:["border","content"]}],display:["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"],float:[{float:["right","left","none"]}],clear:[{clear:["left","right","both","none"]}],isolation:["isolate","isolation-auto"],"object-fit":[{object:["contain","cover","fill","none","scale-down"]}],"object-position":[{object:[].concat(["bottom","center","left","left-bottom","left-top","right","right-bottom","right-top","top"],[N])}],overflow:[{overflow:["auto","hidden","clip","visible","scroll"]}],"overflow-x":[{"overflow-x":["auto","hidden","clip","visible","scroll"]}],"overflow-y":[{"overflow-y":["auto","hidden","clip","visible","scroll"]}],overscroll:[{overscroll:["auto","contain","none"]}],"overscroll-x":[{"overscroll-x":["auto","contain","none"]}],"overscroll-y":[{"overscroll-y":["auto","contain","none"]}],position:["static","fixed","absolute","relative","sticky"],inset:[{inset:[g]}],"inset-x":[{"inset-x":[g]}],"inset-y":[{"inset-y":[g]}],top:[{top:[g]}],right:[{right:[g]}],bottom:[{bottom:[g]}],left:[{left:[g]}],visibility:["visible","invisible"],z:[{z:[I]}],basis:[{basis:[e]}],"flex-direction":[{flex:["row","row-reverse","col","col-reverse"]}],"flex-wrap":[{flex:["wrap","wrap-reverse","nowrap"]}],flex:[{flex:["1","auto","initial","none",N]}],grow:[{grow:$()}],shrink:[{shrink:$()}],order:[{order:["first","last","none",I]}],"grid-cols":[{"grid-cols":[A]}],"col-start-end":[{col:["auto",{span:[I]}]}],"col-start":[{"col-start":R()}],"col-end":[{"col-end":R()}],"grid-rows":[{"grid-rows":[A]}],"row-start-end":[{row:["auto",{span:[I]}]}],"row-start":[{"row-start":R()}],"row-end":[{"row-end":R()}],"grid-flow":[{"grid-flow":["row","col","dense","row-dense","col-dense"]}],"auto-cols":[{"auto-cols":["auto","min","max","fr",N]}],"auto-rows":[{"auto-rows":["auto","min","max","fr",N]}],gap:[{gap:[p]}],"gap-x":[{"gap-x":[p]}],"gap-y":[{"gap-y":[p]}],"justify-content":[{justify:["start","end","center","between","around","evenly"]}],"justify-items":[{"justify-items":["start","end","center","stretch"]}],"justify-self":[{"justify-self":["auto","start","end","center","stretch"]}],"align-content":[{content:["start","end","center","between","around","evenly"]}],"align-items":[{items:["start","end","center","baseline","stretch"]}],"align-self":[{self:["auto","start","end","center","stretch","baseline"]}],"place-content":[{"place-content":[].concat(["start","end","center","between","around","evenly"],["stretch"])}],"place-items":[{"place-items":["start","end","center","stretch"]}],"place-self":[{"place-self":["auto","start","end","center","stretch"]}],p:[{p:[h]}],px:[{px:[h]}],py:[{py:[h]}],pt:[{pt:[h]}],pr:[{pr:[h]}],pb:[{pb:[h]}],pl:[{pl:[h]}],m:[{m:[m]}],mx:[{mx:[m]}],my:[{my:[m]}],mt:[{mt:[m]}],mr:[{mr:[m]}],mb:[{mb:[m]}],ml:[{ml:[m]}],"space-x":[{"space-x":[W]}],"space-x-reverse":["space-x-reverse"],"space-y":[{"space-y":[W]}],"space-y-reverse":["space-y-reverse"],w:[{w:["auto","min","max","fit",e]}],"min-w":[{"min-w":["min","max","fit",w]}],"max-w":[{"max-w":["0","none","full","min","max","fit","prose",{screen:[O]},O,k]}],h:[{h:E()}],"min-h":[{"min-h":["min","max","fit",w]}],"max-h":[{"max-h":[e,"min","max","fit"]}],"font-size":[{text:["base",O,k]}],"font-smoothing":["antialiased","subpixel-antialiased"],"font-style":["italic","not-italic"],"font-weight":[{font:["thin","extralight","light","normal","medium","semibold","bold","extrabold","black",G]}],"font-family":[{font:[A]}],"fvn-normal":["normal-nums"],"fvn-ordinal":["ordinal"],"fvn-slashed-zero":["slashed-zero"],"fvn-figure":["lining-nums","oldstyle-nums"],"fvn-spacing":["proportional-nums","tabular-nums"],"fvn-fraction":["diagonal-fractions","stacked-fractons"],tracking:[{tracking:["tighter","tight","normal","wide","wider","widest",k]}],leading:[{leading:["none","tight","snug","normal","relaxed","loose",w]}],"list-style-type":[{list:["none","disc","decimal",N]}],"list-style-position":[{list:["inside","outside"]}],"placeholder-color":[{placeholder:[r]}],"placeholder-opacity":[{"placeholder-opacity":[v]}],"text-alignment":[{text:["left","center","right","justify","start","end"]}],"text-color":[{text:[r]}],"text-opacity":[{"text-opacity":[v]}],"text-decoration":["underline","overline","line-through","no-underline"],"text-decoration-style":[{decoration:[].concat(["solid","dashed","dotted","double","none"],["wavy"])}],"text-decoration-thickness":[{decoration:["auto","from-font",w]}],"underline-offset":[{"underline-offset":["auto",w]}],"text-decoration-color":[{decoration:[r]}],"text-transform":["uppercase","lowercase","capitalize","normal-case"],"text-overflow":["truncate","text-ellipsis","text-clip"],indent:[{indent:[e]}],"vertical-align":[{align:["baseline","top","middle","bottom","text-top","text-bottom","sub","super",k]}],whitespace:[{whitespace:["normal","nowrap","pre","pre-line","pre-wrap"]}],break:[{break:["normal","words","all"]}],content:[{content:["none",N]}],"bg-attachment":[{bg:["fixed","local","scroll"]}],"bg-clip":[{"bg-clip":["border","padding","content","text"]}],"bg-opacity":[{"bg-opacity":[v]}],"bg-origin":[{"bg-origin":["border","padding","content"]}],"bg-position":[{bg:[].concat(["bottom","center","left","left-bottom","left-top","right","right-bottom","right-top","top"],[j])}],"bg-repeat":[{bg:["no-repeat",{repeat:["","x","y","round","space"]}]}],"bg-size":[{bg:["auto","cover","contain",z]}],"bg-image":[{bg:["none",{"gradient-to":["t","tr","r","br","b","bl","l","tl"]},C]}],"bg-color":[{bg:[r]}],"gradient-from":[{from:[b]}],"gradient-via":[{via:[b]}],"gradient-to":[{to:[b]}],rounded:[{rounded:[i]}],"rounded-t":[{"rounded-t":[i]}],"rounded-r":[{"rounded-r":[i]}],"rounded-b":[{"rounded-b":[i]}],"rounded-l":[{"rounded-l":[i]}],"rounded-tl":[{"rounded-tl":[i]}],"rounded-tr":[{"rounded-tr":[i]}],"rounded-br":[{"rounded-br":[i]}],"rounded-bl":[{"rounded-bl":[i]}],"border-w":[{border:[l]}],"border-w-x":[{"border-x":[l]}],"border-w-y":[{"border-y":[l]}],"border-w-t":[{"border-t":[l]}],"border-w-r":[{"border-r":[l]}],"border-w-b":[{"border-b":[l]}],"border-w-l":[{"border-l":[l]}],"border-opacity":[{"border-opacity":[v]}],"border-style":[{border:[].concat(["solid","dashed","dotted","double","none"],["hidden"])}],"divide-x":[{"divide-x":[l]}],"divide-x-reverse":["divide-x-reverse"],"divide-y":[{"divide-y":[l]}],"divide-y-reverse":["divide-y-reverse"],"divide-opacity":[{"divide-opacity":[v]}],"divide-style":[{divide:["solid","dashed","dotted","double","none"]}],"border-color":[{border:[n]}],"border-color-x":[{"border-x":[n]}],"border-color-y":[{"border-y":[n]}],"border-color-t":[{"border-t":[n]}],"border-color-r":[{"border-r":[n]}],"border-color-b":[{"border-b":[n]}],"border-color-l":[{"border-l":[n]}],"divide-color":[{divide:[n]}],"outline-style":[{outline:[""].concat(["solid","dashed","dotted","double","none"],["hidden"])}],"outline-offset":[{"outline-offset":[w]}],"outline-w":[{outline:[w]}],"outline-color":[{outline:[r]}],"ring-w":[{ring:_()}],"ring-w-inset":["ring-inset"],"ring-color":[{ring:[r]}],"ring-opacity":[{"ring-opacity":[v]}],"ring-offset-w":[{"ring-offset":[w]}],"ring-offset-color":[{"ring-offset":[r]}],shadow:[{shadow:["","inner","none",O,S]}],"shadow-color":[{shadow:[A]}],opacity:[{opacity:[v]}],"mix-blend":[{"mix-blend":["normal","multiply","screen","overlay","darken","lighten","color-dodge","color-burn","hard-light","soft-light","difference","exclusion","hue","saturation","color","luminosity","plus-lighter"]}],"bg-blend":[{"bg-blend":["normal","multiply","screen","overlay","darken","lighten","color-dodge","color-burn","hard-light","soft-light","difference","exclusion","hue","saturation","color","luminosity","plus-lighter"]}],filter:[{filter:["","none"]}],blur:[{blur:[o]}],brightness:[{brightness:[t]}],contrast:[{contrast:[s]}],"drop-shadow":[{"drop-shadow":["","none",O,N]}],grayscale:[{grayscale:[c]}],"hue-rotate":[{"hue-rotate":[d]}],invert:[{invert:[u]}],saturate:[{saturate:[y]}],sepia:[{sepia:[M]}],"backdrop-filter":[{"backdrop-filter":["","none"]}],"backdrop-blur":[{"backdrop-blur":[o]}],"backdrop-brightness":[{"backdrop-brightness":[t]}],"backdrop-contrast":[{"backdrop-contrast":[s]}],"backdrop-grayscale":[{"backdrop-grayscale":[c]}],"backdrop-hue-rotate":[{"backdrop-hue-rotate":[d]}],"backdrop-invert":[{"backdrop-invert":[u]}],"backdrop-opacity":[{"backdrop-opacity":[v]}],"backdrop-saturate":[{"backdrop-saturate":[y]}],"backdrop-sepia":[{"backdrop-sepia":[M]}],"border-collapse":[{border:["collapse","separate"]}],"border-spacing":[{"border-spacing":[a]}],"border-spacing-x":[{"border-spacing-x":[a]}],"border-spacing-y":[{"border-spacing-y":[a]}],"table-layout":[{table:["auto","fixed"]}],transition:[{transition:["none","all","","colors","opacity","shadow","transform",N]}],duration:[{duration:[I]}],ease:[{ease:["linear","in","out","in-out",N]}],delay:[{delay:[I]}],animate:[{animate:["none","spin","ping","pulse","bounce",N]}],transform:[{transform:["","gpu","none"]}],scale:[{scale:[x]}],"scale-x":[{"scale-x":[x]}],"scale-y":[{"scale-y":[x]}],rotate:[{rotate:[I,N]}],"translate-x":[{"translate-x":[T]}],"translate-y":[{"translate-y":[T]}],"skew-x":[{"skew-x":[P]}],"skew-y":[{"skew-y":[P]}],"transform-origin":[{origin:["center","top","top-right","right","bottom-right","bottom","bottom-left","left","top-left",N]}],accent:[{accent:["auto",r]}],appearance:["appearance-none"],cursor:[{cursor:["auto","default","pointer","wait","text","move","help","not-allowed","none","context-menu","progress","cell","crosshair","vertical-text","alias","copy","no-drop","grab","grabbing","all-scroll","col-resize","row-resize","n-resize","e-resize","s-resize","w-resize","ne-resize","nw-resize","se-resize","sw-resize","ew-resize","ns-resize","nesw-resize","nwse-resize","zoom-in","zoom-out",N]}],"caret-color":[{caret:[r]}],"pointer-events":[{"pointer-events":["none","auto"]}],resize:[{resize:["none","y","x",""]}],"scroll-behavior":[{scroll:["auto","smooth"]}],"scroll-m":[{"scroll-m":[e]}],"scroll-mx":[{"scroll-mx":[e]}],"scroll-my":[{"scroll-my":[e]}],"scroll-mt":[{"scroll-mt":[e]}],"scroll-mr":[{"scroll-mr":[e]}],"scroll-mb":[{"scroll-mb":[e]}],"scroll-ml":[{"scroll-ml":[e]}],"scroll-p":[{"scroll-p":[e]}],"scroll-px":[{"scroll-px":[e]}],"scroll-py":[{"scroll-py":[e]}],"scroll-pt":[{"scroll-pt":[e]}],"scroll-pr":[{"scroll-pr":[e]}],"scroll-pb":[{"scroll-pb":[e]}],"scroll-pl":[{"scroll-pl":[e]}],"snap-align":[{snap:["start","end","center","align-none"]}],"snap-stop":[{snap:["normal","always"]}],"snap-type":[{snap:["none","x","y","both"]}],"snap-strictness":[{snap:["mandatory","proximity"]}],touch:[{touch:["auto","none","pinch-zoom","manipulation",{pan:["x","left","right","y","up","down"]}]}],select:[{select:["none","text","all","auto"]}],"will-change":[{"will-change":["auto","scroll","contents","transform",N]}],fill:[{fill:[r]}],"stroke-w":[{stroke:[w]}],stroke:[{stroke:[r]}],sr:["sr-only","not-sr-only"]},conflictingClassGroups:{overflow:["overflow-x","overflow-y"],overscroll:["overscroll-x","overscroll-y"],inset:["inset-x","inset-y","top","right","bottom","left"],"inset-x":["right","left"],"inset-y":["top","bottom"],flex:["basis","grow","shrink"],"col-start-end":["col-start","col-end"],"row-start-end":["row-start","row-end"],gap:["gap-x","gap-y"],p:["px","py","pt","pr","pb","pl"],px:["pr","pl"],py:["pt","pb"],m:["mx","my","mt","mr","mb","ml"],mx:["mr","ml"],my:["mt","mb"],"font-size":["leading"],"fvn-normal":["fvn-ordinal","fvn-slashed-zero","fvn-figure","fvn-spacing","fvn-fraction"],"fvn-ordinal":["fvn-normal"],"fvn-slashed-zero":["fvn-normal"],"fvn-figure":["fvn-normal"],"fvn-spacing":["fvn-normal"],"fvn-fraction":["fvn-normal"],rounded:["rounded-t","rounded-r","rounded-b","rounded-l","rounded-tl","rounded-tr","rounded-br","rounded-bl"],"rounded-t":["rounded-tl","rounded-tr"],"rounded-r":["rounded-tr","rounded-br"],"rounded-b":["rounded-br","rounded-bl"],"rounded-l":["rounded-tl","rounded-bl"],"border-spacing":["border-spacing-x","border-spacing-y"],"border-w":["border-w-t","border-w-r","border-w-b","border-w-l"],"border-w-x":["border-w-r","border-w-l"],"border-w-y":["border-w-t","border-w-b"],"border-color":["border-color-t","border-color-r","border-color-b","border-color-l"],"border-color-x":["border-color-r","border-color-l"],"border-color-y":["border-color-t","border-color-b"],"scroll-m":["scroll-mx","scroll-my","scroll-mt","scroll-mr","scroll-mb","scroll-ml"],"scroll-mx":["scroll-mr","scroll-ml"],"scroll-my":["scroll-mt","scroll-mb"],"scroll-p":["scroll-px","scroll-py","scroll-pt","scroll-pr","scroll-pb","scroll-pl"],"scroll-px":["scroll-pr","scroll-pl"],"scroll-py":["scroll-pt","scroll-pb"]}}}var W=b(P);function T(r,e){for(var o in e)R(r,o,e[o]);return r}var E=Object.prototype.hasOwnProperty,_=new Set(["string","number","boolean"]);function R(r,e,o){if(E.call(r,e)&&!_.has(typeof o)&&null!==o){if(Array.isArray(o)&&Array.isArray(r[e]))r[e]=r[e].concat(o);else if("object"==typeof o&&"object"==typeof r[e]){if(null===r[e])return void(r[e]=o);for(var t in o)R(r[e],t,o[t])}}else r[e]=o}exports.createTailwindMerge=b,exports.extendTailwindMerge=function(r){for(var e=arguments.length,o=new Array(e>1?e-1:0),t=1;t<e;t++)o[t-1]=arguments[t];return b.apply(void 0,"function"==typeof r?[P,r].concat(o):[function(){return T(P(),r)}].concat(o))},exports.fromTheme=f,exports.getDefaultConfig=P,exports.join=u,exports.mergeConfigs=T,exports.twMerge=W,exports.validators=M; | ||
//# sourceMappingURL=tailwind-merge.cjs.production.min.js.map |
{ | ||
"name": "tailwind-merge", | ||
"version": "0.0.0-dev.d34fea9c36fe046e9b0c8c5d529f95510ccd3956", | ||
"version": "0.0.0-dev.da5f9f1329453257db851c5f39c36a9d2b1fc84e", | ||
"description": "Merge Tailwind CSS classes without style conflicts", | ||
@@ -23,4 +23,3 @@ "keywords": [ | ||
"files": [ | ||
"dist", | ||
"src" | ||
"dist" | ||
], | ||
@@ -45,34 +44,26 @@ "source": "src/index.ts", | ||
"test": "dts test", | ||
"test:exports": "node scripts/test-built-package-exports.js && node scripts/test-built-package-exports.mjs", | ||
"lint": "eslint --max-warnings 0 '**'", | ||
"size": "size-limit", | ||
"preversion": "if [ -n \"$DANYS_MACHINES\" ]; then git checkout main && git pull; fi", | ||
"preversion": "if [ -n \"$DANYS_MACHINE\" ]; then git checkout main && git pull; fi", | ||
"version": "zx scripts/update-readme.js", | ||
"postversion": "if [ -n \"$DANYS_MACHINES\" ]; then git push --follow-tags && open https://github.com/dcastil/tailwind-merge/releases; fi" | ||
"postversion": "if [ -n \"$DANYS_MACHINE\" ]; then git push --follow-tags && open https://github.com/dcastil/tailwind-merge/releases; fi" | ||
}, | ||
"devDependencies": { | ||
"@size-limit/preset-small-lib": "^7.0.8", | ||
"@types/jest": "^28.1.4", | ||
"@typescript-eslint/eslint-plugin": "^5.30.5", | ||
"@typescript-eslint/parser": "^5.30.5", | ||
"@size-limit/preset-small-lib": "^8.0.0", | ||
"@types/jest": "^28.1.6", | ||
"@typescript-eslint/eslint-plugin": "^5.31.0", | ||
"@typescript-eslint/parser": "^5.31.0", | ||
"dts-cli": "^1.5.2", | ||
"eslint": "^8.19.0", | ||
"eslint": "^8.21.0", | ||
"eslint-plugin-import": "^2.26.0", | ||
"eslint-plugin-jest": "^26.5.3", | ||
"fp-ts": "^2.12.1", | ||
"eslint-plugin-jest": "^26.7.0", | ||
"fp-ts": "^2.12.2", | ||
"globby": "^11.1.0", | ||
"prettier": "^2.7.1", | ||
"size-limit": "^7.0.8", | ||
"ts-jest": "^28.0.5", | ||
"size-limit": "^8.0.0", | ||
"ts-jest": "^28.0.7", | ||
"typescript": "^4.7.4", | ||
"zx": "^7.0.7" | ||
}, | ||
"size-limit": [ | ||
{ | ||
"path": "dist/tailwind-merge.mjs", | ||
"limit": "10 KB" | ||
}, | ||
{ | ||
"path": "dist/tailwind-merge.cjs.production.min.js", | ||
"limit": "10 KB" | ||
} | ||
] | ||
} | ||
} |
619
README.md
<div align="center"> | ||
<br /> | ||
<a href="https://github.com/dcastil/tailwind-merge"> | ||
<!-- AUTOGENERATED VERSION START --><img src="https://github.com/dcastil/tailwind-merge/raw/d34fea9c36fe046e9b0c8c5d529f95510ccd3956/assets/logo.svg" alt="tailwind-merge" width="221px" /><!-- AUTOGENERATED END --> | ||
<!-- AUTOGENERATED VERSION START --> | ||
<img src="https://github.com/dcastil/tailwind-merge/raw/da5f9f1329453257db851c5f39c36a9d2b1fc84e/assets/logo.svg" alt="tailwind-merge" width="221px" /> | ||
<!-- AUTOGENERATED END --> | ||
</a> | ||
@@ -24,607 +26,16 @@ </div> | ||
## What is it for | ||
## Get started | ||
If you use Tailwind with a component-based UI renderer like [React](https://reactjs.org) or [Vue](https://vuejs.org), you're probably familiar with the situation that you want to change some styles of a component, but only in one place. | ||
<!-- AUTOGENERATED VERSION START --> | ||
```jsx | ||
import React from 'react' | ||
- [What is it for](https://github.com/dcastil/tailwind-merge/tree/da5f9f1329453257db851c5f39c36a9d2b1fc84e/docs/what-is-it-for.md) | ||
- [Features](https://github.com/dcastil/tailwind-merge/tree/da5f9f1329453257db851c5f39c36a9d2b1fc84e/docs/features.md) | ||
- [Configuring tailwind-merge](https://github.com/dcastil/tailwind-merge/tree/da5f9f1329453257db851c5f39c36a9d2b1fc84e/docs/configuring-tailwind-merge.md) | ||
- [Recipes](https://github.com/dcastil/tailwind-merge/tree/da5f9f1329453257db851c5f39c36a9d2b1fc84e/docs/recipes.md) | ||
- [API reference](https://github.com/dcastil/tailwind-merge/tree/da5f9f1329453257db851c5f39c36a9d2b1fc84e/docs/api-reference.md) | ||
- [Writing plugins](https://github.com/dcastil/tailwind-merge/tree/da5f9f1329453257db851c5f39c36a9d2b1fc84e/docs/writing-plugins.md) | ||
- [Versioning](https://github.com/dcastil/tailwind-merge/tree/da5f9f1329453257db851c5f39c36a9d2b1fc84e/docs/versioning.md) | ||
- [Contributing](https://github.com/dcastil/tailwind-merge/tree/da5f9f1329453257db851c5f39c36a9d2b1fc84e/.github/CONTRIBUTING.md) | ||
- [Similar packages](https://github.com/dcastil/tailwind-merge/tree/da5f9f1329453257db851c5f39c36a9d2b1fc84e/docs/similar-packages.md) | ||
function MyGenericInput(props) { | ||
const className = `border rounded px-2 py-1 ${props.className || ''}` | ||
return <input {...props} className={className} /> | ||
} | ||
function MySlightlyModifiedInput(props) { | ||
return ( | ||
<MyGenericInput | ||
{...props} | ||
className="p-3" // ← Only want to change some padding | ||
/> | ||
) | ||
} | ||
``` | ||
When the `MySlightlyModifiedInput` is rendered, an input with the className `border rounded px-2 py-1 p-3` gets created. But because of the way the [CSS cascade](https://developer.mozilla.org/en-US/docs/Web/CSS/Cascade) works, the styles of the `p-3` class are ignored. The order of the classes in the `className` string doesn't matter at all and the only way to apply the `p-3` styles is to remove both `px-2` and `py-1`. | ||
This is where tailwind-merge comes in. | ||
```jsx | ||
function MyGenericInput(props) { | ||
// ↓ Now `props.className` can override conflicting classes | ||
const className = twMerge('border rounded px-2 py-1', props.className) | ||
return <input {...props} className={className} /> | ||
} | ||
``` | ||
tailwind-merge overrides conflicting classes and keeps everything else untouched. In the case of the `MySlightlyModifiedInput`, the input now only renders the classes `border rounded p-3`. | ||
## Features | ||
### Optimized for speed | ||
- Results get cached by default, so you don't need to worry about wasteful re-renders. The library uses a [LRU cache](<https://en.wikipedia.org/wiki/Cache_replacement_policies#Least_recently_used_(LRU)>) which stores up to 500 different results. The cache size can be modified or opt-out of by using [`extendTailwindMerge`](#extendtailwindmerge). | ||
- Expensive computations happen upfront so that `twMerge` calls without a cache hit stay fast. | ||
- These computations are called lazily on the first call to `twMerge` to prevent it from impacting app startup performance if it isn't used initially. | ||
### Last conflicting class wins | ||
```ts | ||
twMerge('p-5 p-2 p-4') // → 'p-4' | ||
``` | ||
### Allows refinements | ||
```ts | ||
twMerge('p-3 px-5') // → 'p-3 px-5' | ||
twMerge('inset-x-4 right-4') // → 'inset-x-4 right-4' | ||
``` | ||
### Resolves non-trivial conflicts | ||
```ts | ||
twMerge('inset-x-px -inset-1') // → '-inset-1' | ||
twMerge('bottom-auto inset-y-6') // → 'inset-y-6' | ||
twMerge('inline block') // → 'block' | ||
``` | ||
### Supports modifiers and stacked modifiers | ||
```ts | ||
twMerge('p-2 hover:p-4') // → 'p-2 hover:p-4' | ||
twMerge('hover:p-2 hover:p-4') // → 'hover:p-4' | ||
twMerge('hover:focus:p-2 focus:hover:p-4') // → 'focus:hover:p-4' | ||
``` | ||
### Supports arbitrary values | ||
```ts | ||
twMerge('bg-black bg-[color:var(--mystery-var)]') // → 'bg-[color:var(--mystery-var)]' | ||
twMerge('grid-cols-[1fr,auto] grid-cols-2') // → 'grid-cols-2' | ||
``` | ||
### Supports arbitrary properties | ||
```ts | ||
twMerge('[mask-type:luminance] [mask-type:alpha]') // → '[mask-type:alpha]' | ||
twMerge('[--scroll-offset:56px] lg:[--scroll-offset:44px]') | ||
// → '[--scroll-offset:56px] lg:[--scroll-offset:44px]' | ||
// Don't do this! | ||
twMerge('[padding:1rem] p-8') // → '[padding:1rem] p-8' | ||
``` | ||
Watch out for mixing arbitrary properties which could be expressed as Tailwind classes. tailwind-merge does not resolve conflicts between arbitrary properties and their matching Tailwind classes to keep the bundle size small. | ||
### Supports arbitrary variants | ||
```ts | ||
twMerge('[&:nth-child(3)]:py-0 [&:nth-child(3)]:py-4') // → '[&:nth-child(3)]:py-4' | ||
twMerge('dark:hover:[&:nth-child(3)]:py-0 hover:dark:[&:nth-child(3)]:py-4') | ||
// → 'hover:dark:[&:nth-child(3)]:py-4' | ||
// Don't do this! | ||
twMerge('[&:focus]:ring focus:ring-4') // → '[&:focus]:ring focus:ring-4' | ||
``` | ||
Similarly to arbitrary properties, tailwind-merge does not resolve conflicts between arbitrary variants and their matching predefined modifiers for bundle size reasons. | ||
### Supports important modifier | ||
```ts | ||
twMerge('!p-3 !p-4 p-5') // → '!p-4 p-5' | ||
twMerge('!right-2 !-inset-x-1') // → '!-inset-x-1' | ||
``` | ||
### Preserves non-Tailwind classes | ||
```ts | ||
twMerge('p-5 p-2 my-non-tailwind-class p-4') // → 'my-non-tailwind-class p-4' | ||
``` | ||
### Supports custom colors out of the box | ||
```ts | ||
twMerge('text-red text-secret-sauce') // → 'text-secret-sauce' | ||
``` | ||
### Ignores `undefined`, `null` and `false` values | ||
```ts | ||
twMerge('some-class', undefined, null, false) // → 'some-class' | ||
``` | ||
## Basic usage | ||
If you're using Tailwind CSS without any extra config, you can use [`twMerge`](#twmerge) right away. You can safely stop reading the documentation here. | ||
## Usage with custom Tailwind config | ||
If you're using a custom Tailwind config, you may need to configure tailwind-merge as well to merge classes properly. | ||
The default [`twMerge`](#twmerge) function is configured in a way that you can still use it if all the following points apply to your Tailwind config: | ||
- Only using color names which don't clash with other Tailwind class names | ||
- Only deviating by number values from number-based Tailwind classes | ||
- Only using font-family classes which don't clash with default font-weight classes | ||
- Sticking to default Tailwind config for everything else | ||
If some of these points don't apply to you, you can test whether `twMerge` still works as intended with your custom classes. Otherwise, you need create your own custom merge function by either extending the default tailwind-merge config or using a completely custom one. | ||
The tailwind-merge config is different from the Tailwind config because it's expected to be shipped and run in the browser as opposed to the Tailwind config which is meant to run at build-time. Be careful in case you're using your Tailwind config directly to configure tailwind-merge in your client-side code because that could result in an unnecessarily large bundle size. | ||
### Shape of tailwind-merge config | ||
The tailwind-merge config is an object with a few keys. | ||
```ts | ||
const tailwindMergeConfig = { | ||
// ↓ Set how many values should be stored in cache. | ||
cacheSize: 500, | ||
// ↓ Optional prefix from TaiLwind config | ||
prefix: 'tw-', | ||
theme: { | ||
// Theme scales are defined here | ||
// This is not the theme object from your Tailwind config | ||
}, | ||
classGroups: { | ||
// Class groups are defined here | ||
}, | ||
conflictingClassGroups: { | ||
// Conflicts between class groups are defined here | ||
}, | ||
} | ||
``` | ||
### Class groups | ||
The library uses a concept of _class groups_ which is an array of Tailwind classes which all modify the same CSS property. E.g. here is the position class group. | ||
```ts | ||
const positionClassGroup = ['static', 'fixed', 'absolute', 'relative', 'sticky'] | ||
``` | ||
tailwind-merge resolves conflicts between classes in a class group and only keeps the last one passed to the merge function call. | ||
```ts | ||
twMerge('static sticky relative') // → 'relative' | ||
``` | ||
Tailwind classes often share the beginning of the class name, so elements in a class group can also be an object with values of the same shape as a class group (yes, the shape is recursive). In the object each key is joined with all the elements in the corresponding array with a dash (`-`) in between. | ||
E.g. here is the overflow class group which results in the classes `overflow-auto`, `overflow-hidden`, `overflow-visible` and `overflow-scroll`. | ||
```ts | ||
const overflowClassGroup = [{ overflow: ['auto', 'hidden', 'visible', 'scroll'] }] | ||
``` | ||
Sometimes it isn't possible to enumerate all elements in a class group. Think of a Tailwind class which allows arbitrary values. In this scenario you can use a validator function which takes a _class part_ and returns a boolean indicating whether a class is part of a class group. | ||
E.g. here is the fill class group. | ||
```ts | ||
const isArbitraryValue = (classPart: string) => /^\[.+\]$/.test(classPart) | ||
const fillClassGroup = [{ fill: ['current', isArbitraryValue] }] | ||
``` | ||
Because the function is under the `fill` key, it will only get called for classes which start with `fill-`. Also, the function only gets passed the part of the class name which comes after `fill-`, this way you can use the same function in multiple class groups. tailwind-merge exports its own [validators](#validators), so you don't need to recreate them. | ||
You can use an empty string (`''`) as a class part if you want to indicate that the preceding part was the end. This is useful for defining elements which are marked as `DEFAULT` in the Tailwind config. | ||
```ts | ||
// ↓ Resolves to filter and filter-none | ||
const filterClassGroup = [{ filter: ['', 'none'] }] | ||
``` | ||
Each class group is defined under its ID in the `classGroups` object in the config. This ID is only used internally, and the only thing that matters is that it is unique among all class groups. | ||
### Conflicting class groups | ||
Sometimes there are conflicts across Tailwind classes which are more complex than "remove all those other classes when a class from this group is present in the class list string". | ||
One example is the combination of the classes `px-3` (setting `padding-left` and `padding-right`) and `pr-4` (setting `padding-right`). | ||
If they are passed to `twMerge` as `pr-4 px-3`, I think you most likely intend to apply `padding-left` and `padding-right` from the `px-3` class and want `pr-4` to be removed, indicating that both these classes should belong to a single class group. | ||
But if they are passed to `twMerge` as `px-3 pr-4`, I assume you want to set the `padding-right` from `pr-4` but still want to apply the `padding-left` from `px-3`, so `px-3` shouldn't be removed when inserting the classes in this order, indicating they shouldn't be in the same class group. | ||
To summarize, `px-3` should stand in conflict with `pr-4`, but `pr-4` should not stand in conflict with `px-3`. To achieve this, we need to define asymmetric conflicts across class groups. | ||
This is what the `conflictingClassGroups` object in the tailwind-merge config is for. You define a key in it which is the ID of a class group which _creates_ a conflict and the value is an array of IDs of class group which _receive_ a conflict. | ||
```ts | ||
const conflictingClassGroups = { | ||
px: ['pr', 'pl'], | ||
} | ||
``` | ||
If a class group _creates_ a conflict, it means that if it appears in a class list string passed to `twMerge`, all preceding class groups in the string which _receive_ the conflict will be removed. | ||
When we think of our example, the `px` class group creates a conflict which is received by the class groups `pr` and `pl`. This way `px-3` removes a preceding `pr-4`, but not the other way around. | ||
### Theme | ||
In the Tailwind config you can modify theme scales. tailwind-merge follows the same keys for the theme scales, but doesn't support all of them. tailwind-merge only supports theme scales which are used in multiple class groups to save bundle size (more info to that in [PR 55](https://github.com/dcastil/tailwind-merge/pull/55)). At the moment these are: | ||
- `colors` | ||
- `spacing` | ||
- `blur` | ||
- `brightness` | ||
- `borderColor` | ||
- `borderRadius` | ||
- `borderSpacing` | ||
- `borderWidth` | ||
- `contrast` | ||
- `grayscale` | ||
- `hueRotate` | ||
- `invert` | ||
- `gap` | ||
- `gradientColorStops` | ||
- `inset` | ||
- `margin` | ||
- `opacity` | ||
- `padding` | ||
- `saturate` | ||
- `scale` | ||
- `sepia` | ||
- `skew` | ||
- `space` | ||
- `translate` | ||
If you modified one of these theme scales in your Tailwind config, you can add all your keys right here and tailwind-merge will take care of the rest. If you modified other theme scales, you need to figure out the class group to modify in the [default config](#getdefaultconfig). | ||
### Extending the tailwind-merge config | ||
If you only need to extend the default tailwind-merge config, [`extendTailwindMerge`](#extendtailwindmerge) is the easiest way to extend the config. You provide it a `configExtension` object which gets [merged](#mergeconfigs) with the default config. Therefore, all keys here are optional. | ||
```ts | ||
import { extendTailwindMerge } from 'tailwind-merge' | ||
const customTwMerge = extendTailwindMerge({ | ||
// ↓ Add values to existing theme scale or create a new one | ||
theme: { | ||
spacing: ['sm', 'md', 'lg'], | ||
}, | ||
// ↓ Add values to existing class groups or define new ones | ||
classGroups: { | ||
foo: ['foo', 'foo-2', { 'bar-baz': ['', '1', '2'] }], | ||
bar: [{ qux: ['auto', (value) => Number(value) >= 1000] }], | ||
}, | ||
// ↓ Here you can define additional conflicts across class groups | ||
conflictingClassGroups: { | ||
foo: ['bar'], | ||
}, | ||
}) | ||
``` | ||
### Using completely custom tailwind-merge config | ||
If you need to modify the tailwind-merge config and need more control than [`extendTailwindMerge`](#extendtailwindmerge) gives you or don't want to use the default config (and tree-shake it out of your bundle), you can use [`createTailwindMerge`](#createtailwindmerge). | ||
The function takes a callback which returns the config you want to use and returns a custom `twMerge` function. | ||
```ts | ||
import { createTailwindMerge } from 'tailwind-merge' | ||
const customTwMerge = createTailwindMerge(() => ({ | ||
cacheSize: 500, | ||
theme: {}, | ||
classGroups: { | ||
foo: ['foo', 'foo-2', { 'bar-baz': ['', '1', '2'] }], | ||
bar: [{ qux: ['auto', (value) => Number(value) >= 1000] }], | ||
}, | ||
conflictingClassGroups: { | ||
foo: ['bar'], | ||
}, | ||
})) | ||
``` | ||
The callback passed to `createTailwindMerge` will be called when `customTwMerge` is called the first time, so you don't need to worry about the computations in it affecting app startup performance in case you aren't using tailwind-merge at app startup. | ||
### Using third-party tailwind-merge plugins | ||
You can use both [`extendTailwindMerge`](#extendtailwindmerge) and [`createTailwindMerge`](#createtailwindmerge) with third-party plugins. Just add them as arguments after your config. | ||
```ts | ||
import { extendTailwindMerge, createTailwindMerge } from 'tailwind-merge' | ||
import { withMagic } from 'tailwind-merge-magic-plugin' | ||
import { withMoreMagic } from 'tailwind-merge-more-magic-plugin' | ||
// With your own config | ||
const twMerge1 = extendTailwindMerge({ … }, withMagic, withMoreMagic) | ||
// Only using plugin with default config | ||
const twMerge2 = extendTailwindMerge(withMagic, withMoreMagic) | ||
// Using `createTailwindMerge` | ||
const twMerge3 = createTailwindMerge(() => ({ … }), withMagic, withMoreMagic) | ||
``` | ||
## API reference | ||
Reference to all exports of tailwind-merge. | ||
### `twMerge` | ||
```ts | ||
function twMerge(...classLists: Array<string | undefined | null | false>): string | ||
``` | ||
Default function to use if you're using the default Tailwind config or are close enough to the default config. Check out [basic usage](#basic-usage) for more info. | ||
If `twMerge` doesn't work for you, you can create your own custom merge function with [`extendTailwindMerge`](#extendtailwindmerge). | ||
### `getDefaultConfig` | ||
```ts | ||
function getDefaultConfig(): Config | ||
``` | ||
Function which returns the default config used by tailwind-merge. The tailwind-merge config is different from the Tailwind config. It is optimized for small bundle size and fast runtime performance because it is expected to run in the browser. | ||
### `fromTheme` | ||
```ts | ||
function fromTheme(key: string): ThemeGetter | ||
``` | ||
Function to retrieve values from a theme scale, to be used in class groups. | ||
`fromTheme` doesn't return the values from the theme scale, but rather another function which is used by tailwind-merge internally to retrieve the theme values. tailwind-merge can differentiate the theme getter function from a validator because it has a `isThemeGetter` property set to `true`. | ||
It can be used like this: | ||
```ts | ||
extendTailwindMerge({ | ||
theme: { | ||
'my-scale': ['foo', 'bar'] | ||
}, | ||
classGroups: { | ||
'my-group': [{ 'my-group': [fromTheme('my-scale'), fromTheme('spacing')] }] | ||
'my-group-x': [{ 'my-group-x': [fromTheme('my-scale')] }] | ||
} | ||
}) | ||
``` | ||
### `extendTailwindMerge` | ||
```ts | ||
function extendTailwindMerge( | ||
configExtension: Partial<Config>, | ||
...createConfig: Array<(config: Config) => Config> | ||
): TailwindMerge | ||
function extendTailwindMerge(...createConfig: Array<(config: Config) => Config>): TailwindMerge | ||
``` | ||
Function to create merge function with custom config which extends the default config. Use this if you use the default Tailwind config and just extend it in some places. | ||
You provide it a `configExtension` object which gets [merged](#mergeconfigs) with the default config. | ||
```ts | ||
const customTwMerge = extendTailwindMerge({ | ||
cacheSize: 0, // ← Disabling cache | ||
// ↓ Add values to existing theme scale or create a new one | ||
// Not all theme keys form the Tailwind config are supported by default. | ||
theme: { | ||
spacing: ['sm', 'md', 'lg'], | ||
}, | ||
// ↓ Here you define class groups | ||
classGroups: { | ||
// ↓ The `foo` key here is the class group ID | ||
// ↓ Creates group of classes which have conflicting styles | ||
// Classes here: foo, foo-2, bar-baz, bar-baz-1, bar-baz-2 | ||
foo: ['foo', 'foo-2', { 'bar-baz': ['', '1', '2'] }], | ||
// ↓ Functions can also be used to match classes. | ||
// Classes here: qux-auto, qux-1000, qux-1001, … | ||
bar: [{ qux: ['auto', (value) => Number(value) >= 1000] }], | ||
}, | ||
// ↓ Here you can define additional conflicts across different groups | ||
conflictingClassGroups: { | ||
// ↓ ID of class group which creates a conflict with … | ||
// ↓ … classes from groups with these IDs | ||
foo: ['bar'], | ||
}, | ||
}) | ||
``` | ||
Additionally, you can pass multiple `createConfig` functions (more to that in [`createTailwindMerge`](#createtailwindmerge)) which is convenient if you want to combine your config with third-party plugins. | ||
```ts | ||
const customTwMerge = extendTailwindMerge({ … }, withSomePlugin) | ||
``` | ||
If you only use plugins, you can omit the `configExtension` object as well. | ||
```ts | ||
const customTwMerge = extendTailwindMerge(withSomePlugin) | ||
``` | ||
### `createTailwindMerge` | ||
```ts | ||
function createTailwindMerge( | ||
...createConfig: [() => Config, ...Array<(config: Config) => Config>] | ||
): TailwindMerge | ||
``` | ||
Function to create merge function with custom config. Use this function instead of [`extendTailwindMerge`](#extendtailwindmerge) if you don't need the default config or want more control over the config. | ||
You need to provide a function which resolves to the config tailwind-merge should use for the new merge function. You can either extend from the default config or create a new one from scratch. | ||
```ts | ||
// ↓ Callback passed to `createTailwindMerge` is called when | ||
// `customTwMerge` gets called the first time. | ||
const customTwMerge = createTailwindMerge(() => { | ||
const defaultConfig = getDefaultConfig() | ||
return { | ||
cacheSize: 0, | ||
classGroups: { | ||
...defaultConfig.classGroups, | ||
foo: ['foo', 'foo-2', { 'bar-baz': ['', '1', '2'] }], | ||
bar: [{ qux: ['auto', (value) => Number(value) >= 1000] }], | ||
}, | ||
conflictingClassGroups: { | ||
...defaultConfig.conflictingClassGroups, | ||
foo: ['bar'], | ||
}, | ||
} | ||
}) | ||
``` | ||
Same as in [`extendTailwindMerge`](#extendtailwindmerge) you can use multiple `createConfig` functions which is convenient if you want to combine your config with third-party plugins. Just keep in mind that the first `createConfig` function does not get passed any arguments, whereas the subsequent functions get each passed the config from the previous function. | ||
```ts | ||
const customTwMerge = createTailwindMerge(getDefaultConfig, withSomePlugin, (config) => ({ | ||
// ↓ Config returned by `withSomePlugin` | ||
...config, | ||
classGroups: { | ||
...config.classGroups, | ||
mySpecialClassGroup: [{ special: ['1', '2'] }], | ||
}, | ||
})) | ||
``` | ||
But don't merge configs like that. Use [`mergeConfigs`](#mergeconfigs) instead. | ||
### `mergeConfigs` | ||
```ts | ||
function mergeConfigs(baseConfig: Config, configExtension: Partial<Config>): Config | ||
``` | ||
Helper function to merge multiple config objects. Objects are merged, arrays are concatenated, scalar values are overridden and `undefined` does nothing. The function assumes that both parameters are tailwind-merge config objects and shouldn't be used as a generic merge function. | ||
```ts | ||
const customTwMerge = createTailwindMerge(getDefaultConfig, (config) => | ||
mergeConfigs(config, { | ||
classGroups: { | ||
// ↓ Adding new class group | ||
mySpecialClassGroup: [{ special: ['1', '2'] }], | ||
// ↓ Adding value to existing class group | ||
animate: ['animate-magic'], | ||
}, | ||
}) | ||
) | ||
``` | ||
### `validators` | ||
```ts | ||
interface Validators { | ||
isLength(classPart: string): boolean | ||
isArbitraryLength(classPart: string): boolean | ||
isInteger(classPart: string): boolean | ||
isArbitraryValue(classPart: string): boolean | ||
isTshirtSize(classPart: string): boolean | ||
isArbitrarySize(classPart: string): boolean | ||
isArbitraryPosition(classPart: string): boolean | ||
isArbitraryUrl(classPart: string): boolean | ||
isArbitraryWeight(classPart: string): boolean | ||
isArbitraryShadow(classPart: string): boolean | ||
isAny(classPart: string): boolean | ||
} | ||
``` | ||
An object containing all the validators used in tailwind-merge. They are useful if you want to use a custom config with [`extendTailwindMerge`](#extendtailwindmerge) or [`createTailwindMerge`](#createtailwindmerge). E.g. the `classGroup` for padding is defined as | ||
```ts | ||
const paddingClassGroup = [{ p: [validators.isLength] }] | ||
``` | ||
A brief summary for each validator: | ||
- `isLength` checks whether a class part is a number (`3`, `1.5`), a fraction (`3/4`), a arbitrary length (`[3%]`, `[4px]`, `[length:var(--my-var)]`), or one of the strings `px`, `full` or `screen`. | ||
- `isArbitraryLength` checks for arbitrary length values (`[3%]`, `[4px]`, `[length:var(--my-var)]`). | ||
- `isInteger` checks for integer values (`3`) and arbitrary integer values (`[3]`). | ||
- `isArbitraryValue` checks whether the class part is enclosed in brackets (`[something]`) | ||
- `isTshirtSize`checks whether class part is a T-shirt size (`sm`, `xl`), optionally with a preceding number (`2xl`). | ||
- `isArbitrarySize` checks whether class part is an arbitrary value which starts with `size:` (`[size:200px_100px]`) which is necessary for background-size classNames. | ||
- `isArbitraryPosition` checks whether class part is an arbitrary value which starts with `position:` (`[position:200px_100px]`) which is necessary for background-position classNames. | ||
- `isArbitraryUrl` checks whether class part is an arbitrary value which starts with `url:` or `url(` (`[url('/path-to-image.png')]`, `url:var(--maybe-a-url-at-runtime)]`) which is necessary for background-image classNames. | ||
- `isArbitraryWeight` checks whether class part is an arbitrary value which starts with `number:` or is a number (`[number:var(--value)]`, `[450]`) which is necessary for font-weight classNames. | ||
- `isArbitraryShadow` checks whether class part is an arbitrary value which starts with the same pattern as a shadow value (`[0_35px_60px_-15px_rgba(0,0,0,0.3)]`), namely with two lengths separated by a underscore. | ||
- `isAny` always returns true. Be careful with this validator as it might match unwanted classes. I use it primarily to match colors or when I'm certain there are no other class groups in a namespace. | ||
### `Config` | ||
```ts | ||
interface Config { … } | ||
``` | ||
TypeScript type for config object. Useful if you want to build a `createConfig` function but don't want to define it inline in [`extendTailwindMerge`](#extendtailwindmerge) or [`createTailwindMerge`](#createtailwindmerge). | ||
## Writing plugins | ||
This library supports classes of the core Tailwind library out of the box, but not classes of any plugins. But it's possible and hopefully easy to write third-party plugins for tailwind-merge. In case you want to write a plugin, I invite you to follow these steps: | ||
- Create a package called `tailwind-merge-magic-plugin` with tailwind-merge as peer dependency which exports a function `withMagic` and replace "magic" with your plugin name. | ||
- This function would be ideally a `createConfig` function which takes a config object as argument and returns the modified config object. | ||
- If you create new class groups, prepend them with `magic.` (your plugin name with a dot at the end) so they don't collide with class group names from other plugins or even future class groups in tailwind-merge itself. | ||
- Use the [`validators`](#validators) and [`mergeConfigs`](#mergeconfigs) from tailwind-merge to extend the config with magic. | ||
Here is an example of how a plugin could look like: | ||
```ts | ||
import { mergeConfigs, validators, Config } from 'tailwind-merge' | ||
export function withMagic(config: Config): Config { | ||
return mergeConfigs(config, { | ||
classGroups: { | ||
'magic.my-group': [{ magic: [validators.isLength, 'wow'] }], | ||
}, | ||
}) | ||
} | ||
``` | ||
This plugin can then be used like this: | ||
```ts | ||
import { extendTailwindMerge } from 'tailwind-merge' | ||
import { withMagic } from 'tailwind-merge-magic-plugin' | ||
const twMerge = extendTailwindMerge(withMagic) | ||
``` | ||
Also, feel free to check out [tailwind-merge-rtl-plugin](https://github.com/vltansky/tailwind-merge-rtl-plugin) as a real example of a tailwind-merge plugin. | ||
## Versioning | ||
This package follows the [SemVer](https://semver.org) versioning rules. More specifically: | ||
- Patch version gets incremented when unintended behavior is fixed, which doesn't break any existing API. Note that bug fixes can still alter which styles are applied. E.g. a bug gets fixed in which the conflicting classes `inline` and `block` weren't merged correctly so that both would end up in the result. | ||
- Minor version gets incremented when additional features are added which don't break any existing API. However, a minor version update might still alter which styles are applied if you use Tailwind features not yet supported by tailwind-merge. E.g. a new Tailwind prefix `magic` gets added to this package which changes the result of `twMerge('magic:px-1 magic:p-3')` from `magic:px-1 magic:p-3` to `magic:p-3`. | ||
- Major version gets incremented when breaking changes are introduced to the package API. E.g. the return type of `twMerge` changes. | ||
- `alpha` releases might introduce breaking changes on any update. Whereas `beta` releases only introduce new features or bug fixes. | ||
- Releases with major version 0 might introduce breaking changes on a minor version update. | ||
- A non-production-ready version of every commit pushed to the main branch is released under the `dev` tag for testing purposes. It has the format `0.0.0-dev.<git SHA>`. | ||
- A changelog is documented in [GitHub Releases](https://github.com/dcastil/tailwind-merge/releases). | ||
## Contributing | ||
Please see <!-- AUTOGENERATED VERSION START -->[CONTRIBUTING](https://github.com/dcastil/tailwind-merge/tree/d34fea9c36fe046e9b0c8c5d529f95510ccd3956/.github/CONTRIBUTING.md)<!-- AUTOGENERATED END --> for details. | ||
<!-- AUTOGENERATED END --> |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
613683
15
50
6719
41