Socket
Socket
Sign inDemoInstall

tailwind-merge

Package Overview
Dependencies
Maintainers
1
Versions
276
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

tailwind-merge - npm Package Compare versions

Comparing version 0.8.2 to 0.9.0

dist/types/from-theme.d.ts
dist/types/tailwind-merge.d.ts
src/from-theme.ts
src/tailwind-merge.ts

452

dist/index.js

@@ -86,2 +86,5 @@ import HLRU from 'hashlru';

function createClassMap(config) {
const {
theme
} = config;
const classMap = {

@@ -92,3 +95,3 @@ nextPart: {},

Object.entries(config.classGroups).forEach(([classGroupId, classGroup]) => {
processClassesRecursively(classGroup, classMap, classGroupId);
processClassesRecursively(classGroup, classMap, classGroupId, theme);
});

@@ -98,3 +101,3 @@ return classMap;

function processClassesRecursively(classGroup, classPartObject, classGroupId) {
function processClassesRecursively(classGroup, classPartObject, classGroupId, theme) {
classGroup.forEach(classDefinition => {

@@ -104,3 +107,11 @@ if (typeof classDefinition === 'string') {

classPartObjectToEdit.classGroupId = classGroupId;
} else if (typeof classDefinition === 'function') {
return;
}
if (typeof classDefinition === 'function') {
if (isThemeGetter(classDefinition)) {
processClassesRecursively(classDefinition(theme), classPartObject, classGroupId, theme);
return;
}
classPartObject.validators.push({

@@ -110,7 +121,8 @@ validator: classDefinition,

});
} else {
Object.entries(classDefinition).forEach(([key, classGroup]) => {
processClassesRecursively(classGroup, getPart(classPartObject, key), classGroupId);
});
return;
}
Object.entries(classDefinition).forEach(([key, classGroup]) => {
processClassesRecursively(classGroup, getPart(classPartObject, key), classGroupId, theme);
});
});

@@ -134,2 +146,6 @@ }

function isThemeGetter(func) {
return func.isThemeGetter;
}
function createConfigUtils(config) {

@@ -248,2 +264,9 @@ return _extends({

function fromTheme(key) {
const themeGetter = theme => theme[key] || [];
themeGetter.isThemeGetter = true;
return themeGetter;
}
const customValueRegex = /^\[(.+)\]$/;

@@ -295,2 +318,26 @@ const fractionRegex = /^\d+\/\d+$/;

function getDefaultConfig() {
const colors = fromTheme('colors');
const spacing = fromTheme('spacing');
const blur = fromTheme('blur');
const brightness = fromTheme('brightness');
const borderColor = fromTheme('borderColor');
const borderRadius = fromTheme('borderRadius');
const borderWidth = fromTheme('borderWidth');
const contrast = fromTheme('contrast');
const grayscale = fromTheme('grayscale');
const hueRotate = fromTheme('hueRotate');
const invert = fromTheme('invert');
const gap = fromTheme('gap');
const gradientColorStops = fromTheme('gradientColorStops');
const inset = fromTheme('inset');
const margin = fromTheme('margin');
const opacity = fromTheme('opacity');
const padding = fromTheme('padding');
const saturate = fromTheme('saturate');
const scale = fromTheme('scale');
const sepia = fromTheme('sepia');
const skew = fromTheme('skew');
const space = fromTheme('space');
const translate = fromTheme('translate');
const getSizesSimple = () => ['sm', 'md', 'lg', 'xl', '2xl'];

@@ -304,18 +351,10 @@

const getLength = () => [isLength];
const getSpacingWithAuto = () => ['auto', spacing];
const getLengthWithAuto = () => ['auto', isLength];
const getLengthWithEmpty = () => ['', isLength];
const getInteger = () => [isInteger];
const getIntegerWithAuto = () => ['auto', isInteger];
const getAny = () => [isAny];
const getPositions = () => ['bottom', 'center', 'left', 'left-bottom', 'left-top', 'right', 'right-bottom', 'right-top', 'top'];
const getRounded = () => ['none', '', ...getSizesSimple(), '3xl', 'full', isCustomLength];
const getBorderStyles = () => ['solid', 'dashed', 'dotted', 'double', 'none'];

@@ -333,2 +372,169 @@

cacheSize: 500,
theme: {
colors: [isAny],
spacing: [isLength],
blur: ['none', '', ...getSizesSimple(), '3xl', isCustomLength],
brightness: [isInteger],
borderColor: [colors],
borderRadius: ['none', '', ...getSizesSimple(), '3xl', 'full', isCustomLength],
borderWidth: getLengthWithEmpty(),
contrast: [isInteger],
grayscale: getZeroAndEmpty(),
hueRotate: [isInteger],
invert: getZeroAndEmpty(),
gap: [spacing],
gradientColorStops: [colors],
inset: getSpacingWithAuto(),
margin: getSpacingWithAuto(),
opacity: [isInteger],
padding: [spacing],
saturate: [isInteger],
scale: [isInteger],
sepia: getZeroAndEmpty(),
skew: [isInteger],
space: [spacing],
translate: [spacing] // Tailwind theme keys not in use because they would apply only to a single classGroup:
// animation: ['none', 'spin', 'ping', 'pulse', 'bounce', isCustomValue],
// backdropBlur: [blur],
// backdropBrightness: [brightness],
// backdropContrast: [contrast],
// backdropGrayscale: [grayscale],
// backdropHueRotate: [hueRotate],
// backdropInvert: [invert],
// backdropOpacity: [opacity],
// backdropSaturate: [saturate],
// backdropSepia: [sepia],
// backgroundColor: [colors],
// backgroundImage: [
// 'none',
// { 'gradient-to': ['t', 'tr', 'r', 'br', 'b', 'bl', 'l', 'tl'] },
// ],
// backgroundOpacity: [opacity],
// backgroundPosition: getPositions(),
// backgroundSize: ['auto', 'cover', 'contain'],
// borderOpacity: [opacity],
// boxShadow: ['', ...getSizesSimple(), 'inner', 'none'],
// caretColor: [colors],
// container: ['container'],
// content: [isCustomValue],
// cursor: [
// 'auto',
// 'default',
// 'pointer',
// 'wait',
// 'text',
// 'move',
// 'help',
// 'not-allowed',
// isCustomValue,
// ],
// divideColor: [borderColor],
// divideOpacity: [borderOpacity],
// divideWidth: [borderWidth],
// dropShadow: ['', ...getSizesSimple(), 'none'],
// fill: ['current', isCustomValue],
// flex: ['1', 'auto', 'initial', 'none', isCustomValue],
// flexGrow: getZeroAndEmpty(),
// flexShrink: getZeroAndEmpty(),
// fontFamily: [isAny],
// fontSize: [
// 'xs',
// ...getSizesSimple(),
// 'base',
// ...getSizesExtended(),
// '8xl',
// '9xl',
// isCustomLength,
// ],
// fontWeight: [
// 'thin',
// 'extralight',
// 'light',
// 'normal',
// 'medium',
// 'semibold',
// 'bold',
// 'extrabold',
// 'black',
// ],
// gridAutoColumns: ['auto', 'min', 'max', 'fr', isCustomValue],
// gridAutoRows: ['auto', 'min', 'max', 'fr', isCustomValue],
// gridColumn: ['auto', { span: [isInteger] }],
// gridColumnEnd: getIntegerWithAuto(),
// gridColumnStart: getIntegerWithAuto(),
// gridRow: ['auto', { span: [isInteger] }],
// gridRowStart: getIntegerWithAuto(),
// gridRowEnd: getIntegerWithAuto(),
// gridTemplateColumns: [isAny],
// gridTemplateRows: [isAny],
// height: getSpacingWithAuto(),
// letterSpacing: [
// 'tighter',
// 'tight',
// 'normal',
// 'wide',
// 'wider',
// 'widest',
// isCustomLength,
// ],
// lineHeight: ['none', 'tight', 'snug', 'normal', 'relaxed', 'loose', isLength],
// listStyleType: ['none', 'disc', 'decimal', isCustomValue],
// maxHeight: [spacing],
// maxWidth: [
// '0',
// 'none',
// ...getSizesSimple(),
// ...getSizesExtended(),
// 'full',
// 'min',
// 'max',
// 'prose',
// { screen: getSizesSimple() },
// isCustomLength,
// ],
// minHeight: ['full', 'screen', isLength],
// minWidth: ['full', 'min', 'max', isLength],
// objectPosition: getPositions(),
// order: ['first', 'last', 'none', isInteger],
// outline: ['none', 'white', 'black'],
// placeholderColor: [colors],
// placeholderOpacity: [opacity],
// ringColor: [colors],
// ringOffsetColor: [colors],
// ringOffsetWidth: [isLength],
// ringOpacity: [opacity],
// ringWidth: getLengthWithEmpty(),
// rotate: [isInteger],
// stroke: ['current', isCustomValue],
// strokeWidth: [isLength],
// textColor: [colors],
// textOpacity: [opacity],
// transformOrigin: [
// 'center',
// 'top',
// 'top-right',
// 'right',
// 'bottom-right',
// 'bottom',
// 'bottom-left',
// 'left',
// 'top-left',
// ],
// transitionDelay: [isInteger],
// transitionDuration: [isInteger],
// transitionProperty: [
// 'none',
// 'all',
// '',
// 'colors',
// 'opacity',
// 'shadow',
// 'transform',
// isCustomValue,
// ],
// transitionTimingFunction: ['linear', 'in', 'out', 'in-out', isCustomValue],
// width: ['auto', 'min', 'max', spacing],
// zIndex: [isLength],
},
classGroups: {

@@ -462,3 +668,3 @@ // Layout

inset: [{
inset: getLengthWithAuto()
inset: [inset]
}],

@@ -471,3 +677,3 @@

'inset-x': [{
'inset-x': getLengthWithAuto()
'inset-x': [inset]
}],

@@ -480,3 +686,3 @@

'inset-y': [{
'inset-y': getLengthWithAuto()
'inset-y': [inset]
}],

@@ -489,3 +695,3 @@

top: [{
top: getLengthWithAuto()
top: [inset]
}],

@@ -498,3 +704,3 @@

right: [{
right: getLengthWithAuto()
right: [inset]
}],

@@ -507,3 +713,3 @@

bottom: [{
bottom: getLengthWithAuto()
bottom: [inset]
}],

@@ -516,3 +722,3 @@

left: [{
left: getLengthWithAuto()
left: [inset]
}],

@@ -531,3 +737,3 @@

z: [{
z: getLength()
z: [isLength]
}],

@@ -565,3 +771,3 @@ // Flexbox and Grid

'flex-grow': [{
'flex-grow': ['', isInteger]
'flex-grow': getZeroAndEmpty()
}],

@@ -574,3 +780,3 @@

'flex-shrink': [{
'flex-shrink': ['', isInteger]
'flex-shrink': getZeroAndEmpty()
}],

@@ -591,3 +797,3 @@

'grid-cols': [{
'grid-cols': getAny()
'grid-cols': [isAny]
}],

@@ -601,3 +807,3 @@

col: ['auto', {
span: getInteger()
span: [isInteger]
}]

@@ -627,3 +833,3 @@ }],

'grid-rows': [{
'grid-rows': getAny()
'grid-rows': [isAny]
}],

@@ -637,3 +843,3 @@

row: ['auto', {
span: getInteger()
span: [isInteger]
}]

@@ -687,3 +893,3 @@ }],

gap: [{
gap: getLength()
gap: [gap]
}],

@@ -696,3 +902,3 @@

'gap-x': [{
'gap-x': getLength()
'gap-x': [gap]
}],

@@ -705,3 +911,3 @@

'gap-y': [{
'gap-y': getLength()
'gap-y': [gap]
}],

@@ -787,3 +993,3 @@

p: [{
p: getLength()
p: [padding]
}],

@@ -796,3 +1002,3 @@

px: [{
px: getLength()
px: [padding]
}],

@@ -805,3 +1011,3 @@

py: [{
py: getLength()
py: [padding]
}],

@@ -814,3 +1020,3 @@

pt: [{
pt: getLength()
pt: [padding]
}],

@@ -823,3 +1029,3 @@

pr: [{
pr: getLength()
pr: [padding]
}],

@@ -832,3 +1038,3 @@

pb: [{
pb: getLength()
pb: [padding]
}],

@@ -841,3 +1047,3 @@

pl: [{
pl: getLength()
pl: [padding]
}],

@@ -850,3 +1056,3 @@

m: [{
m: getLengthWithAuto()
m: [margin]
}],

@@ -859,3 +1065,3 @@

mx: [{
mx: getLengthWithAuto()
mx: [margin]
}],

@@ -868,3 +1074,3 @@

my: [{
my: getLengthWithAuto()
my: [margin]
}],

@@ -877,3 +1083,3 @@

mt: [{
mt: getLengthWithAuto()
mt: [margin]
}],

@@ -886,3 +1092,3 @@

mr: [{
mr: getLengthWithAuto()
mr: [margin]
}],

@@ -895,3 +1101,3 @@

mb: [{
mb: getLengthWithAuto()
mb: [margin]
}],

@@ -904,3 +1110,3 @@

ml: [{
ml: getLengthWithAuto()
ml: [margin]
}],

@@ -913,3 +1119,3 @@

'space-x': [{
'space-x': getLength()
'space-x': [space]
}],

@@ -928,3 +1134,3 @@

'space-y': [{
'space-y': getLength()
'space-y': [space]
}],

@@ -944,3 +1150,3 @@

w: [{
w: ['auto', 'min', 'max', isLength]
w: ['auto', 'min', 'max', spacing]
}],

@@ -971,3 +1177,3 @@

h: [{
h: getLengthWithAuto()
h: getSpacingWithAuto()
}],

@@ -988,3 +1194,3 @@

'max-h': [{
'max-h': getLength()
'max-h': [spacing]
}],

@@ -998,3 +1204,3 @@ // Typography

'font-family': [{
font: getAny()
font: [isAny]
}],

@@ -1103,3 +1309,3 @@

'placeholder-color': [{
placeholder: getAny()
placeholder: [colors]
}],

@@ -1112,3 +1318,3 @@

'placeholder-opacity': [{
'placeholder-opacity': getInteger()
'placeholder-opacity': [opacity]
}],

@@ -1129,3 +1335,3 @@

'text-color': [{
text: getAny()
text: [colors]
}],

@@ -1138,3 +1344,3 @@

'text-opacity': [{
'text-opacity': getInteger()
'text-opacity': [opacity]
}],

@@ -1206,3 +1412,3 @@

'bg-opacity': [{
'bg-opacity': getInteger()
'bg-opacity': [opacity]
}],

@@ -1267,3 +1473,3 @@

'bg-color': [{
bg: getAny()
bg: [colors]
}],

@@ -1276,3 +1482,3 @@

'gradient-from': [{
from: getAny()
from: [gradientColorStops]
}],

@@ -1285,3 +1491,3 @@

'gradient-via': [{
via: getAny()
via: [gradientColorStops]
}],

@@ -1294,3 +1500,3 @@

'gradient-to': [{
to: getAny()
to: [gradientColorStops]
}],

@@ -1304,3 +1510,3 @@ // Borders

rounded: [{
rounded: getRounded()
rounded: [borderRadius]
}],

@@ -1313,3 +1519,3 @@

'rounded-t': [{
'rounded-t': getRounded()
'rounded-t': [borderRadius]
}],

@@ -1322,3 +1528,3 @@

'rounded-r': [{
'rounded-r': getRounded()
'rounded-r': [borderRadius]
}],

@@ -1331,3 +1537,3 @@

'rounded-b': [{
'rounded-b': getRounded()
'rounded-b': [borderRadius]
}],

@@ -1340,3 +1546,3 @@

'rounded-l': [{
'rounded-l': getRounded()
'rounded-l': [borderRadius]
}],

@@ -1349,3 +1555,3 @@

'rounded-tl': [{
'rounded-tl': getRounded()
'rounded-tl': [borderRadius]
}],

@@ -1358,3 +1564,3 @@

'rounded-tr': [{
'rounded-tr': getRounded()
'rounded-tr': [borderRadius]
}],

@@ -1367,3 +1573,3 @@

'rounded-br': [{
'rounded-br': getRounded()
'rounded-br': [borderRadius]
}],

@@ -1376,3 +1582,3 @@

'rounded-bl': [{
'rounded-bl': getRounded()
'rounded-bl': [borderRadius]
}],

@@ -1385,3 +1591,3 @@

'border-w': [{
border: getLengthWithEmpty()
border: [borderWidth]
}],

@@ -1394,3 +1600,3 @@

'border-w-t': [{
'border-t': getLengthWithEmpty()
'border-t': [borderWidth]
}],

@@ -1403,3 +1609,3 @@

'border-w-r': [{
'border-r': getLengthWithEmpty()
'border-r': [borderWidth]
}],

@@ -1412,3 +1618,3 @@

'border-w-b': [{
'border-b': getLengthWithEmpty()
'border-b': [borderWidth]
}],

@@ -1421,3 +1627,3 @@

'border-w-l': [{
'border-l': getLengthWithEmpty()
'border-l': [borderWidth]
}],

@@ -1430,3 +1636,3 @@

'border-opacity': [{
'border-opacity': getInteger()
'border-opacity': [opacity]
}],

@@ -1447,3 +1653,3 @@

'divide-x': [{
'divide-x': getLengthWithEmpty()
'divide-x': [borderWidth]
}],

@@ -1462,3 +1668,3 @@

'divide-y': [{
'divide-y': getLengthWithEmpty()
'divide-y': [borderWidth]
}],

@@ -1477,3 +1683,3 @@

'divide-opacity': [{
'divide-opacity': getInteger()
'divide-opacity': [opacity]
}],

@@ -1494,3 +1700,3 @@

'border-color': [{
border: getAny()
border: [borderColor]
}],

@@ -1503,3 +1709,3 @@

'border-color-t': [{
'border-t': getAny()
'border-t': [borderColor]
}],

@@ -1512,3 +1718,3 @@

'border-color-r': [{
'border-r': getAny()
'border-r': [borderColor]
}],

@@ -1521,3 +1727,3 @@

'border-color-b': [{
'border-b': getAny()
'border-b': [borderColor]
}],

@@ -1530,3 +1736,3 @@

'border-color-l': [{
'border-l': getAny()
'border-l': [borderColor]
}],

@@ -1539,3 +1745,3 @@

'divide-color': [{
divide: getAny()
divide: [borderColor]
}],

@@ -1562,3 +1768,3 @@

'ring-color': [{
ring: getAny()
ring: [colors]
}],

@@ -1571,3 +1777,3 @@

'ring-opacity': [{
'ring-opacity': getInteger()
'ring-opacity': [opacity]
}],

@@ -1580,3 +1786,3 @@

'ring-offset-w': [{
'ring-offset': getLength()
'ring-offset': [isLength]
}],

@@ -1589,3 +1795,3 @@

'ring-offset-color': [{
'ring-offset': getAny()
'ring-offset': [colors]
}],

@@ -1607,3 +1813,3 @@ // Effects

opacity: [{
opacity: getInteger()
opacity: [opacity]
}],

@@ -1633,3 +1839,3 @@

blur: [{
blur: ['none', '', ...getSizesSimple(), '3xl', isCustomLength]
blur: [blur]
}],

@@ -1642,3 +1848,3 @@

brightness: [{
brightness: getInteger()
brightness: [brightness]
}],

@@ -1651,3 +1857,3 @@

contrast: [{
contrast: getInteger()
contrast: [contrast]
}],

@@ -1668,3 +1874,3 @@

grayscale: [{
grayscale: getZeroAndEmpty()
grayscale: [grayscale]
}],

@@ -1677,3 +1883,3 @@

'hue-rotate': [{
'hue-rotate': getInteger()
'hue-rotate': [hueRotate]
}],

@@ -1686,3 +1892,3 @@

invert: [{
invert: getZeroAndEmpty()
invert: [invert]
}],

@@ -1695,3 +1901,3 @@

saturate: [{
saturate: getInteger()
saturate: [saturate]
}],

@@ -1704,3 +1910,3 @@

sepia: [{
sepia: getZeroAndEmpty()
sepia: [sepia]
}],

@@ -1721,3 +1927,3 @@

'backdrop-blur': [{
'backdrop-blur': ['none', '', ...getSizesSimple(), '3xl']
'backdrop-blur': [blur]
}],

@@ -1730,3 +1936,3 @@

'backdrop-brightness': [{
'backdrop-brightness': getInteger()
'backdrop-brightness': [brightness]
}],

@@ -1739,3 +1945,3 @@

'backdrop-contrast': [{
'backdrop-contrast': getInteger()
'backdrop-contrast': [contrast]
}],

@@ -1748,3 +1954,3 @@

'backdrop-grayscale': [{
'backdrop-grayscale': getZeroAndEmpty()
'backdrop-grayscale': [grayscale]
}],

@@ -1757,3 +1963,3 @@

'backdrop-hue-rotate': [{
'backdrop-hue-rotate': getInteger()
'backdrop-hue-rotate': [hueRotate]
}],

@@ -1766,3 +1972,3 @@

'backdrop-invert': [{
'backdrop-invert': getZeroAndEmpty()
'backdrop-invert': [invert]
}],

@@ -1775,3 +1981,3 @@

'backdrop-opacity': [{
'backdrop-opacity': getInteger()
'backdrop-opacity': [opacity]
}],

@@ -1784,3 +1990,3 @@

'backdrop-saturate': [{
'backdrop-saturate': getInteger()
'backdrop-saturate': [saturate]
}],

@@ -1793,3 +1999,3 @@

'backdrop-sepia': [{
'backdrop-sepia': getZeroAndEmpty()
'backdrop-sepia': [sepia]
}],

@@ -1828,3 +2034,3 @@ // Tables

duration: [{
duration: getInteger()
duration: [isInteger]
}],

@@ -1845,3 +2051,3 @@

delay: [{
delay: getInteger()
delay: [isInteger]
}],

@@ -1879,3 +2085,3 @@

scale: [{
scale: getInteger()
scale: [scale]
}],

@@ -1888,3 +2094,3 @@

'scale-x': [{
'scale-x': getInteger()
'scale-x': [scale]
}],

@@ -1897,3 +2103,3 @@

'scale-y': [{
'scale-y': getInteger()
'scale-y': [scale]
}],

@@ -1906,3 +2112,3 @@

rotate: [{
rotate: getInteger()
rotate: [isInteger]
}],

@@ -1915,3 +2121,3 @@

'translate-x': [{
'translate-x': getLength()
'translate-x': [translate]
}],

@@ -1924,3 +2130,3 @@

'translate-y': [{
'translate-y': getLength()
'translate-y': [translate]
}],

@@ -1933,3 +2139,3 @@

'skew-x': [{
'skew-x': getInteger()
'skew-x': [skew]
}],

@@ -1942,3 +2148,3 @@

'skew-y': [{
'skew-y': getInteger()
'skew-y': [skew]
}],

@@ -2015,3 +2221,3 @@ // Interactivity

'stroke-w': [{
stroke: getLength()
stroke: [isLength]
}],

@@ -2040,3 +2246,3 @@ // Accessibility

'caret-color': [{
caret: getAny()
caret: [colors]
}]

@@ -2078,2 +2284,4 @@ },

const twMerge = createTailwindMerge(getDefaultConfig);
/**

@@ -2120,5 +2328,3 @@ * @param baseConfig Config where other config will be merged into. This object will be mutated.

const twMerge = createTailwindMerge(getDefaultConfig);
export { createTailwindMerge, extendTailwindMerge, getDefaultConfig, mergeConfigs, twMerge, validators };
export { createTailwindMerge, extendTailwindMerge, fromTheme, getDefaultConfig, mergeConfigs, twMerge, validators };
//# sourceMappingURL=index.js.map

466

dist/index.module.js

@@ -89,2 +89,3 @@ import HLRU from 'hashlru';

function createClassMap(config) {
var theme = config.theme;
var classMap = {

@@ -97,3 +98,3 @@ nextPart: {},

classGroup = _ref2[1];
processClassesRecursively(classGroup, classMap, classGroupId);
processClassesRecursively(classGroup, classMap, classGroupId, theme);
});

@@ -103,3 +104,3 @@ return classMap;

function processClassesRecursively(classGroup, classPartObject, classGroupId) {
function processClassesRecursively(classGroup, classPartObject, classGroupId, theme) {
classGroup.forEach(function (classDefinition) {

@@ -109,3 +110,11 @@ if (typeof classDefinition === 'string') {

classPartObjectToEdit.classGroupId = classGroupId;
} else if (typeof classDefinition === 'function') {
return;
}
if (typeof classDefinition === 'function') {
if (isThemeGetter(classDefinition)) {
processClassesRecursively(classDefinition(theme), classPartObject, classGroupId, theme);
return;
}
classPartObject.validators.push({

@@ -115,9 +124,10 @@ validator: classDefinition,

});
} else {
Object.entries(classDefinition).forEach(function (_ref3) {
var key = _ref3[0],
classGroup = _ref3[1];
processClassesRecursively(classGroup, getPart(classPartObject, key), classGroupId);
});
return;
}
Object.entries(classDefinition).forEach(function (_ref3) {
var key = _ref3[0],
classGroup = _ref3[1];
processClassesRecursively(classGroup, getPart(classPartObject, key), classGroupId, theme);
});
});

@@ -141,2 +151,6 @@ }

function isThemeGetter(func) {
return func.isThemeGetter;
}
function createConfigUtils(config) {

@@ -261,2 +275,11 @@ return _extends({

function fromTheme(key) {
var themeGetter = function themeGetter(theme) {
return theme[key] || [];
};
themeGetter.isThemeGetter = true;
return themeGetter;
}
var customValueRegex = /^\[(.+)\]$/;

@@ -308,2 +331,26 @@ var fractionRegex = /^\d+\/\d+$/;

function getDefaultConfig() {
var colors = fromTheme('colors');
var spacing = fromTheme('spacing');
var blur = fromTheme('blur');
var brightness = fromTheme('brightness');
var borderColor = fromTheme('borderColor');
var borderRadius = fromTheme('borderRadius');
var borderWidth = fromTheme('borderWidth');
var contrast = fromTheme('contrast');
var grayscale = fromTheme('grayscale');
var hueRotate = fromTheme('hueRotate');
var invert = fromTheme('invert');
var gap = fromTheme('gap');
var gradientColorStops = fromTheme('gradientColorStops');
var inset = fromTheme('inset');
var margin = fromTheme('margin');
var opacity = fromTheme('opacity');
var padding = fromTheme('padding');
var saturate = fromTheme('saturate');
var scale = fromTheme('scale');
var sepia = fromTheme('sepia');
var skew = fromTheme('skew');
var space = fromTheme('space');
var translate = fromTheme('translate');
var getSizesSimple = function getSizesSimple() {

@@ -325,10 +372,6 @@ return ['sm', 'md', 'lg', 'xl', '2xl'];

var getLength = function getLength() {
return [isLength];
var getSpacingWithAuto = function getSpacingWithAuto() {
return ['auto', spacing];
};
var getLengthWithAuto = function getLengthWithAuto() {
return ['auto', isLength];
};
var getLengthWithEmpty = function getLengthWithEmpty() {

@@ -338,6 +381,2 @@ return ['', isLength];

var getInteger = function getInteger() {
return [isInteger];
};
var getIntegerWithAuto = function getIntegerWithAuto() {

@@ -347,6 +386,2 @@ return ['auto', isInteger];

var getAny = function getAny() {
return [isAny];
};
var getPositions = function getPositions() {

@@ -356,6 +391,2 @@ return ['bottom', 'center', 'left', 'left-bottom', 'left-top', 'right', 'right-bottom', 'right-top', 'top'];

var getRounded = function getRounded() {
return ['none', ''].concat(getSizesSimple(), ['3xl', 'full', isCustomLength]);
};
var getBorderStyles = function getBorderStyles() {

@@ -381,2 +412,169 @@ return ['solid', 'dashed', 'dotted', 'double', 'none'];

cacheSize: 500,
theme: {
colors: [isAny],
spacing: [isLength],
blur: ['none', ''].concat(getSizesSimple(), ['3xl', isCustomLength]),
brightness: [isInteger],
borderColor: [colors],
borderRadius: ['none', ''].concat(getSizesSimple(), ['3xl', 'full', isCustomLength]),
borderWidth: getLengthWithEmpty(),
contrast: [isInteger],
grayscale: getZeroAndEmpty(),
hueRotate: [isInteger],
invert: getZeroAndEmpty(),
gap: [spacing],
gradientColorStops: [colors],
inset: getSpacingWithAuto(),
margin: getSpacingWithAuto(),
opacity: [isInteger],
padding: [spacing],
saturate: [isInteger],
scale: [isInteger],
sepia: getZeroAndEmpty(),
skew: [isInteger],
space: [spacing],
translate: [spacing] // Tailwind theme keys not in use because they would apply only to a single classGroup:
// animation: ['none', 'spin', 'ping', 'pulse', 'bounce', isCustomValue],
// backdropBlur: [blur],
// backdropBrightness: [brightness],
// backdropContrast: [contrast],
// backdropGrayscale: [grayscale],
// backdropHueRotate: [hueRotate],
// backdropInvert: [invert],
// backdropOpacity: [opacity],
// backdropSaturate: [saturate],
// backdropSepia: [sepia],
// backgroundColor: [colors],
// backgroundImage: [
// 'none',
// { 'gradient-to': ['t', 'tr', 'r', 'br', 'b', 'bl', 'l', 'tl'] },
// ],
// backgroundOpacity: [opacity],
// backgroundPosition: getPositions(),
// backgroundSize: ['auto', 'cover', 'contain'],
// borderOpacity: [opacity],
// boxShadow: ['', ...getSizesSimple(), 'inner', 'none'],
// caretColor: [colors],
// container: ['container'],
// content: [isCustomValue],
// cursor: [
// 'auto',
// 'default',
// 'pointer',
// 'wait',
// 'text',
// 'move',
// 'help',
// 'not-allowed',
// isCustomValue,
// ],
// divideColor: [borderColor],
// divideOpacity: [borderOpacity],
// divideWidth: [borderWidth],
// dropShadow: ['', ...getSizesSimple(), 'none'],
// fill: ['current', isCustomValue],
// flex: ['1', 'auto', 'initial', 'none', isCustomValue],
// flexGrow: getZeroAndEmpty(),
// flexShrink: getZeroAndEmpty(),
// fontFamily: [isAny],
// fontSize: [
// 'xs',
// ...getSizesSimple(),
// 'base',
// ...getSizesExtended(),
// '8xl',
// '9xl',
// isCustomLength,
// ],
// fontWeight: [
// 'thin',
// 'extralight',
// 'light',
// 'normal',
// 'medium',
// 'semibold',
// 'bold',
// 'extrabold',
// 'black',
// ],
// gridAutoColumns: ['auto', 'min', 'max', 'fr', isCustomValue],
// gridAutoRows: ['auto', 'min', 'max', 'fr', isCustomValue],
// gridColumn: ['auto', { span: [isInteger] }],
// gridColumnEnd: getIntegerWithAuto(),
// gridColumnStart: getIntegerWithAuto(),
// gridRow: ['auto', { span: [isInteger] }],
// gridRowStart: getIntegerWithAuto(),
// gridRowEnd: getIntegerWithAuto(),
// gridTemplateColumns: [isAny],
// gridTemplateRows: [isAny],
// height: getSpacingWithAuto(),
// letterSpacing: [
// 'tighter',
// 'tight',
// 'normal',
// 'wide',
// 'wider',
// 'widest',
// isCustomLength,
// ],
// lineHeight: ['none', 'tight', 'snug', 'normal', 'relaxed', 'loose', isLength],
// listStyleType: ['none', 'disc', 'decimal', isCustomValue],
// maxHeight: [spacing],
// maxWidth: [
// '0',
// 'none',
// ...getSizesSimple(),
// ...getSizesExtended(),
// 'full',
// 'min',
// 'max',
// 'prose',
// { screen: getSizesSimple() },
// isCustomLength,
// ],
// minHeight: ['full', 'screen', isLength],
// minWidth: ['full', 'min', 'max', isLength],
// objectPosition: getPositions(),
// order: ['first', 'last', 'none', isInteger],
// outline: ['none', 'white', 'black'],
// placeholderColor: [colors],
// placeholderOpacity: [opacity],
// ringColor: [colors],
// ringOffsetColor: [colors],
// ringOffsetWidth: [isLength],
// ringOpacity: [opacity],
// ringWidth: getLengthWithEmpty(),
// rotate: [isInteger],
// stroke: ['current', isCustomValue],
// strokeWidth: [isLength],
// textColor: [colors],
// textOpacity: [opacity],
// transformOrigin: [
// 'center',
// 'top',
// 'top-right',
// 'right',
// 'bottom-right',
// 'bottom',
// 'bottom-left',
// 'left',
// 'top-left',
// ],
// transitionDelay: [isInteger],
// transitionDuration: [isInteger],
// transitionProperty: [
// 'none',
// 'all',
// '',
// 'colors',
// 'opacity',
// 'shadow',
// 'transform',
// isCustomValue,
// ],
// transitionTimingFunction: ['linear', 'in', 'out', 'in-out', isCustomValue],
// width: ['auto', 'min', 'max', spacing],
// zIndex: [isLength],
},
classGroups: {

@@ -510,3 +708,3 @@ // Layout

inset: [{
inset: getLengthWithAuto()
inset: [inset]
}],

@@ -519,3 +717,3 @@

'inset-x': [{
'inset-x': getLengthWithAuto()
'inset-x': [inset]
}],

@@ -528,3 +726,3 @@

'inset-y': [{
'inset-y': getLengthWithAuto()
'inset-y': [inset]
}],

@@ -537,3 +735,3 @@

top: [{
top: getLengthWithAuto()
top: [inset]
}],

@@ -546,3 +744,3 @@

right: [{
right: getLengthWithAuto()
right: [inset]
}],

@@ -555,3 +753,3 @@

bottom: [{
bottom: getLengthWithAuto()
bottom: [inset]
}],

@@ -564,3 +762,3 @@

left: [{
left: getLengthWithAuto()
left: [inset]
}],

@@ -579,3 +777,3 @@

z: [{
z: getLength()
z: [isLength]
}],

@@ -613,3 +811,3 @@ // Flexbox and Grid

'flex-grow': [{
'flex-grow': ['', isInteger]
'flex-grow': getZeroAndEmpty()
}],

@@ -622,3 +820,3 @@

'flex-shrink': [{
'flex-shrink': ['', isInteger]
'flex-shrink': getZeroAndEmpty()
}],

@@ -639,3 +837,3 @@

'grid-cols': [{
'grid-cols': getAny()
'grid-cols': [isAny]
}],

@@ -649,3 +847,3 @@

col: ['auto', {
span: getInteger()
span: [isInteger]
}]

@@ -675,3 +873,3 @@ }],

'grid-rows': [{
'grid-rows': getAny()
'grid-rows': [isAny]
}],

@@ -685,3 +883,3 @@

row: ['auto', {
span: getInteger()
span: [isInteger]
}]

@@ -735,3 +933,3 @@ }],

gap: [{
gap: getLength()
gap: [gap]
}],

@@ -744,3 +942,3 @@

'gap-x': [{
'gap-x': getLength()
'gap-x': [gap]
}],

@@ -753,3 +951,3 @@

'gap-y': [{
'gap-y': getLength()
'gap-y': [gap]
}],

@@ -835,3 +1033,3 @@

p: [{
p: getLength()
p: [padding]
}],

@@ -844,3 +1042,3 @@

px: [{
px: getLength()
px: [padding]
}],

@@ -853,3 +1051,3 @@

py: [{
py: getLength()
py: [padding]
}],

@@ -862,3 +1060,3 @@

pt: [{
pt: getLength()
pt: [padding]
}],

@@ -871,3 +1069,3 @@

pr: [{
pr: getLength()
pr: [padding]
}],

@@ -880,3 +1078,3 @@

pb: [{
pb: getLength()
pb: [padding]
}],

@@ -889,3 +1087,3 @@

pl: [{
pl: getLength()
pl: [padding]
}],

@@ -898,3 +1096,3 @@

m: [{
m: getLengthWithAuto()
m: [margin]
}],

@@ -907,3 +1105,3 @@

mx: [{
mx: getLengthWithAuto()
mx: [margin]
}],

@@ -916,3 +1114,3 @@

my: [{
my: getLengthWithAuto()
my: [margin]
}],

@@ -925,3 +1123,3 @@

mt: [{
mt: getLengthWithAuto()
mt: [margin]
}],

@@ -934,3 +1132,3 @@

mr: [{
mr: getLengthWithAuto()
mr: [margin]
}],

@@ -943,3 +1141,3 @@

mb: [{
mb: getLengthWithAuto()
mb: [margin]
}],

@@ -952,3 +1150,3 @@

ml: [{
ml: getLengthWithAuto()
ml: [margin]
}],

@@ -961,3 +1159,3 @@

'space-x': [{
'space-x': getLength()
'space-x': [space]
}],

@@ -976,3 +1174,3 @@

'space-y': [{
'space-y': getLength()
'space-y': [space]
}],

@@ -992,3 +1190,3 @@

w: [{
w: ['auto', 'min', 'max', isLength]
w: ['auto', 'min', 'max', spacing]
}],

@@ -1019,3 +1217,3 @@

h: [{
h: getLengthWithAuto()
h: getSpacingWithAuto()
}],

@@ -1036,3 +1234,3 @@

'max-h': [{
'max-h': getLength()
'max-h': [spacing]
}],

@@ -1046,3 +1244,3 @@ // Typography

'font-family': [{
font: getAny()
font: [isAny]
}],

@@ -1151,3 +1349,3 @@

'placeholder-color': [{
placeholder: getAny()
placeholder: [colors]
}],

@@ -1160,3 +1358,3 @@

'placeholder-opacity': [{
'placeholder-opacity': getInteger()
'placeholder-opacity': [opacity]
}],

@@ -1177,3 +1375,3 @@

'text-color': [{
text: getAny()
text: [colors]
}],

@@ -1186,3 +1384,3 @@

'text-opacity': [{
'text-opacity': getInteger()
'text-opacity': [opacity]
}],

@@ -1254,3 +1452,3 @@

'bg-opacity': [{
'bg-opacity': getInteger()
'bg-opacity': [opacity]
}],

@@ -1315,3 +1513,3 @@

'bg-color': [{
bg: getAny()
bg: [colors]
}],

@@ -1324,3 +1522,3 @@

'gradient-from': [{
from: getAny()
from: [gradientColorStops]
}],

@@ -1333,3 +1531,3 @@

'gradient-via': [{
via: getAny()
via: [gradientColorStops]
}],

@@ -1342,3 +1540,3 @@

'gradient-to': [{
to: getAny()
to: [gradientColorStops]
}],

@@ -1352,3 +1550,3 @@ // Borders

rounded: [{
rounded: getRounded()
rounded: [borderRadius]
}],

@@ -1361,3 +1559,3 @@

'rounded-t': [{
'rounded-t': getRounded()
'rounded-t': [borderRadius]
}],

@@ -1370,3 +1568,3 @@

'rounded-r': [{
'rounded-r': getRounded()
'rounded-r': [borderRadius]
}],

@@ -1379,3 +1577,3 @@

'rounded-b': [{
'rounded-b': getRounded()
'rounded-b': [borderRadius]
}],

@@ -1388,3 +1586,3 @@

'rounded-l': [{
'rounded-l': getRounded()
'rounded-l': [borderRadius]
}],

@@ -1397,3 +1595,3 @@

'rounded-tl': [{
'rounded-tl': getRounded()
'rounded-tl': [borderRadius]
}],

@@ -1406,3 +1604,3 @@

'rounded-tr': [{
'rounded-tr': getRounded()
'rounded-tr': [borderRadius]
}],

@@ -1415,3 +1613,3 @@

'rounded-br': [{
'rounded-br': getRounded()
'rounded-br': [borderRadius]
}],

@@ -1424,3 +1622,3 @@

'rounded-bl': [{
'rounded-bl': getRounded()
'rounded-bl': [borderRadius]
}],

@@ -1433,3 +1631,3 @@

'border-w': [{
border: getLengthWithEmpty()
border: [borderWidth]
}],

@@ -1442,3 +1640,3 @@

'border-w-t': [{
'border-t': getLengthWithEmpty()
'border-t': [borderWidth]
}],

@@ -1451,3 +1649,3 @@

'border-w-r': [{
'border-r': getLengthWithEmpty()
'border-r': [borderWidth]
}],

@@ -1460,3 +1658,3 @@

'border-w-b': [{
'border-b': getLengthWithEmpty()
'border-b': [borderWidth]
}],

@@ -1469,3 +1667,3 @@

'border-w-l': [{
'border-l': getLengthWithEmpty()
'border-l': [borderWidth]
}],

@@ -1478,3 +1676,3 @@

'border-opacity': [{
'border-opacity': getInteger()
'border-opacity': [opacity]
}],

@@ -1495,3 +1693,3 @@

'divide-x': [{
'divide-x': getLengthWithEmpty()
'divide-x': [borderWidth]
}],

@@ -1510,3 +1708,3 @@

'divide-y': [{
'divide-y': getLengthWithEmpty()
'divide-y': [borderWidth]
}],

@@ -1525,3 +1723,3 @@

'divide-opacity': [{
'divide-opacity': getInteger()
'divide-opacity': [opacity]
}],

@@ -1542,3 +1740,3 @@

'border-color': [{
border: getAny()
border: [borderColor]
}],

@@ -1551,3 +1749,3 @@

'border-color-t': [{
'border-t': getAny()
'border-t': [borderColor]
}],

@@ -1560,3 +1758,3 @@

'border-color-r': [{
'border-r': getAny()
'border-r': [borderColor]
}],

@@ -1569,3 +1767,3 @@

'border-color-b': [{
'border-b': getAny()
'border-b': [borderColor]
}],

@@ -1578,3 +1776,3 @@

'border-color-l': [{
'border-l': getAny()
'border-l': [borderColor]
}],

@@ -1587,3 +1785,3 @@

'divide-color': [{
divide: getAny()
divide: [borderColor]
}],

@@ -1610,3 +1808,3 @@

'ring-color': [{
ring: getAny()
ring: [colors]
}],

@@ -1619,3 +1817,3 @@

'ring-opacity': [{
'ring-opacity': getInteger()
'ring-opacity': [opacity]
}],

@@ -1628,3 +1826,3 @@

'ring-offset-w': [{
'ring-offset': getLength()
'ring-offset': [isLength]
}],

@@ -1637,3 +1835,3 @@

'ring-offset-color': [{
'ring-offset': getAny()
'ring-offset': [colors]
}],

@@ -1655,3 +1853,3 @@ // Effects

opacity: [{
opacity: getInteger()
opacity: [opacity]
}],

@@ -1681,3 +1879,3 @@

blur: [{
blur: ['none', ''].concat(getSizesSimple(), ['3xl', isCustomLength])
blur: [blur]
}],

@@ -1690,3 +1888,3 @@

brightness: [{
brightness: getInteger()
brightness: [brightness]
}],

@@ -1699,3 +1897,3 @@

contrast: [{
contrast: getInteger()
contrast: [contrast]
}],

@@ -1716,3 +1914,3 @@

grayscale: [{
grayscale: getZeroAndEmpty()
grayscale: [grayscale]
}],

@@ -1725,3 +1923,3 @@

'hue-rotate': [{
'hue-rotate': getInteger()
'hue-rotate': [hueRotate]
}],

@@ -1734,3 +1932,3 @@

invert: [{
invert: getZeroAndEmpty()
invert: [invert]
}],

@@ -1743,3 +1941,3 @@

saturate: [{
saturate: getInteger()
saturate: [saturate]
}],

@@ -1752,3 +1950,3 @@

sepia: [{
sepia: getZeroAndEmpty()
sepia: [sepia]
}],

@@ -1769,3 +1967,3 @@

'backdrop-blur': [{
'backdrop-blur': ['none', ''].concat(getSizesSimple(), ['3xl'])
'backdrop-blur': [blur]
}],

@@ -1778,3 +1976,3 @@

'backdrop-brightness': [{
'backdrop-brightness': getInteger()
'backdrop-brightness': [brightness]
}],

@@ -1787,3 +1985,3 @@

'backdrop-contrast': [{
'backdrop-contrast': getInteger()
'backdrop-contrast': [contrast]
}],

@@ -1796,3 +1994,3 @@

'backdrop-grayscale': [{
'backdrop-grayscale': getZeroAndEmpty()
'backdrop-grayscale': [grayscale]
}],

@@ -1805,3 +2003,3 @@

'backdrop-hue-rotate': [{
'backdrop-hue-rotate': getInteger()
'backdrop-hue-rotate': [hueRotate]
}],

@@ -1814,3 +2012,3 @@

'backdrop-invert': [{
'backdrop-invert': getZeroAndEmpty()
'backdrop-invert': [invert]
}],

@@ -1823,3 +2021,3 @@

'backdrop-opacity': [{
'backdrop-opacity': getInteger()
'backdrop-opacity': [opacity]
}],

@@ -1832,3 +2030,3 @@

'backdrop-saturate': [{
'backdrop-saturate': getInteger()
'backdrop-saturate': [saturate]
}],

@@ -1841,3 +2039,3 @@

'backdrop-sepia': [{
'backdrop-sepia': getZeroAndEmpty()
'backdrop-sepia': [sepia]
}],

@@ -1876,3 +2074,3 @@ // Tables

duration: [{
duration: getInteger()
duration: [isInteger]
}],

@@ -1893,3 +2091,3 @@

delay: [{
delay: getInteger()
delay: [isInteger]
}],

@@ -1927,3 +2125,3 @@

scale: [{
scale: getInteger()
scale: [scale]
}],

@@ -1936,3 +2134,3 @@

'scale-x': [{
'scale-x': getInteger()
'scale-x': [scale]
}],

@@ -1945,3 +2143,3 @@

'scale-y': [{
'scale-y': getInteger()
'scale-y': [scale]
}],

@@ -1954,3 +2152,3 @@

rotate: [{
rotate: getInteger()
rotate: [isInteger]
}],

@@ -1963,3 +2161,3 @@

'translate-x': [{
'translate-x': getLength()
'translate-x': [translate]
}],

@@ -1972,3 +2170,3 @@

'translate-y': [{
'translate-y': getLength()
'translate-y': [translate]
}],

@@ -1981,3 +2179,3 @@

'skew-x': [{
'skew-x': getInteger()
'skew-x': [skew]
}],

@@ -1990,3 +2188,3 @@

'skew-y': [{
'skew-y': getInteger()
'skew-y': [skew]
}],

@@ -2063,3 +2261,3 @@ // Interactivity

'stroke-w': [{
stroke: getLength()
stroke: [isLength]
}],

@@ -2088,3 +2286,3 @@ // Accessibility

'caret-color': [{
caret: getAny()
caret: [colors]
}]

@@ -2126,2 +2324,4 @@ },

var twMerge = createTailwindMerge(getDefaultConfig);
/**

@@ -2171,5 +2371,3 @@ * @param baseConfig Config where other config will be merged into. This object will be mutated.

var twMerge = createTailwindMerge(getDefaultConfig);
export { createTailwindMerge, extendTailwindMerge, getDefaultConfig, mergeConfigs, twMerge, validators };
export { createTailwindMerge, extendTailwindMerge, fromTheme, getDefaultConfig, mergeConfigs, twMerge, validators };
//# sourceMappingURL=index.module.js.map

211

dist/types/default-config.d.ts
import { isAny, isCustomLength, isCustomValue, isInteger, isLength } from './validators';
export declare function getDefaultConfig(): {
readonly cacheSize: 500;
readonly theme: {
readonly colors: readonly [typeof isAny];
readonly spacing: readonly [typeof isLength];
readonly blur: readonly ["none", "", "sm", "md", "lg", "xl", "2xl", "3xl", typeof isCustomLength];
readonly brightness: readonly [typeof isInteger];
readonly borderColor: readonly [import("./types").ThemeGetter];
readonly borderRadius: readonly ["none", "", "sm", "md", "lg", "xl", "2xl", "3xl", "full", typeof isCustomLength];
readonly borderWidth: readonly ["", typeof isLength];
readonly contrast: readonly [typeof isInteger];
readonly grayscale: readonly ["", "0"];
readonly hueRotate: readonly [typeof isInteger];
readonly invert: readonly ["", "0"];
readonly gap: readonly [import("./types").ThemeGetter];
readonly gradientColorStops: readonly [import("./types").ThemeGetter];
readonly inset: readonly ["auto", import("./types").ThemeGetter];
readonly margin: readonly ["auto", import("./types").ThemeGetter];
readonly opacity: readonly [typeof isInteger];
readonly padding: readonly [import("./types").ThemeGetter];
readonly saturate: readonly [typeof isInteger];
readonly scale: readonly [typeof isInteger];
readonly sepia: readonly ["", "0"];
readonly skew: readonly [typeof isInteger];
readonly space: readonly [import("./types").ThemeGetter];
readonly translate: readonly [import("./types").ThemeGetter];
};
readonly classGroups: {

@@ -114,3 +139,3 @@ /**

readonly inset: readonly [{
readonly inset: readonly ["auto", typeof isLength];
readonly inset: readonly [import("./types").ThemeGetter];
}];

@@ -122,3 +147,3 @@ /**

readonly 'inset-x': readonly [{
readonly 'inset-x': readonly ["auto", typeof isLength];
readonly 'inset-x': readonly [import("./types").ThemeGetter];
}];

@@ -130,3 +155,3 @@ /**

readonly 'inset-y': readonly [{
readonly 'inset-y': readonly ["auto", typeof isLength];
readonly 'inset-y': readonly [import("./types").ThemeGetter];
}];

@@ -138,3 +163,3 @@ /**

readonly top: readonly [{
readonly top: readonly ["auto", typeof isLength];
readonly top: readonly [import("./types").ThemeGetter];
}];

@@ -146,3 +171,3 @@ /**

readonly right: readonly [{
readonly right: readonly ["auto", typeof isLength];
readonly right: readonly [import("./types").ThemeGetter];
}];

@@ -154,3 +179,3 @@ /**

readonly bottom: readonly [{
readonly bottom: readonly ["auto", typeof isLength];
readonly bottom: readonly [import("./types").ThemeGetter];
}];

@@ -162,3 +187,3 @@ /**

readonly left: readonly [{
readonly left: readonly ["auto", typeof isLength];
readonly left: readonly [import("./types").ThemeGetter];
}];

@@ -203,3 +228,3 @@ /**

readonly 'flex-grow': readonly [{
readonly 'flex-grow': readonly ["", typeof isInteger];
readonly 'flex-grow': readonly ["", "0"];
}];

@@ -211,3 +236,3 @@ /**

readonly 'flex-shrink': readonly [{
readonly 'flex-shrink': readonly ["", typeof isInteger];
readonly 'flex-shrink': readonly ["", "0"];
}];

@@ -307,3 +332,3 @@ /**

readonly gap: readonly [{
readonly gap: readonly [typeof isLength];
readonly gap: readonly [import("./types").ThemeGetter];
}];

@@ -315,3 +340,3 @@ /**

readonly 'gap-x': readonly [{
readonly 'gap-x': readonly [typeof isLength];
readonly 'gap-x': readonly [import("./types").ThemeGetter];
}];

@@ -323,3 +348,3 @@ /**

readonly 'gap-y': readonly [{
readonly 'gap-y': readonly [typeof isLength];
readonly 'gap-y': readonly [import("./types").ThemeGetter];
}];

@@ -394,3 +419,3 @@ /**

readonly p: readonly [{
readonly p: readonly [typeof isLength];
readonly p: readonly [import("./types").ThemeGetter];
}];

@@ -402,3 +427,3 @@ /**

readonly px: readonly [{
readonly px: readonly [typeof isLength];
readonly px: readonly [import("./types").ThemeGetter];
}];

@@ -410,3 +435,3 @@ /**

readonly py: readonly [{
readonly py: readonly [typeof isLength];
readonly py: readonly [import("./types").ThemeGetter];
}];

@@ -418,3 +443,3 @@ /**

readonly pt: readonly [{
readonly pt: readonly [typeof isLength];
readonly pt: readonly [import("./types").ThemeGetter];
}];

@@ -426,3 +451,3 @@ /**

readonly pr: readonly [{
readonly pr: readonly [typeof isLength];
readonly pr: readonly [import("./types").ThemeGetter];
}];

@@ -434,3 +459,3 @@ /**

readonly pb: readonly [{
readonly pb: readonly [typeof isLength];
readonly pb: readonly [import("./types").ThemeGetter];
}];

@@ -442,3 +467,3 @@ /**

readonly pl: readonly [{
readonly pl: readonly [typeof isLength];
readonly pl: readonly [import("./types").ThemeGetter];
}];

@@ -450,3 +475,3 @@ /**

readonly m: readonly [{
readonly m: readonly ["auto", typeof isLength];
readonly m: readonly [import("./types").ThemeGetter];
}];

@@ -458,3 +483,3 @@ /**

readonly mx: readonly [{
readonly mx: readonly ["auto", typeof isLength];
readonly mx: readonly [import("./types").ThemeGetter];
}];

@@ -466,3 +491,3 @@ /**

readonly my: readonly [{
readonly my: readonly ["auto", typeof isLength];
readonly my: readonly [import("./types").ThemeGetter];
}];

@@ -474,3 +499,3 @@ /**

readonly mt: readonly [{
readonly mt: readonly ["auto", typeof isLength];
readonly mt: readonly [import("./types").ThemeGetter];
}];

@@ -482,3 +507,3 @@ /**

readonly mr: readonly [{
readonly mr: readonly ["auto", typeof isLength];
readonly mr: readonly [import("./types").ThemeGetter];
}];

@@ -490,3 +515,3 @@ /**

readonly mb: readonly [{
readonly mb: readonly ["auto", typeof isLength];
readonly mb: readonly [import("./types").ThemeGetter];
}];

@@ -498,3 +523,3 @@ /**

readonly ml: readonly [{
readonly ml: readonly ["auto", typeof isLength];
readonly ml: readonly [import("./types").ThemeGetter];
}];

@@ -506,3 +531,3 @@ /**

readonly 'space-x': readonly [{
readonly 'space-x': readonly [typeof isLength];
readonly 'space-x': readonly [import("./types").ThemeGetter];
}];

@@ -519,3 +544,3 @@ /**

readonly 'space-y': readonly [{
readonly 'space-y': readonly [typeof isLength];
readonly 'space-y': readonly [import("./types").ThemeGetter];
}];

@@ -532,3 +557,3 @@ /**

readonly w: readonly [{
readonly w: readonly ["auto", "min", "max", typeof isLength];
readonly w: readonly ["auto", "min", "max", import("./types").ThemeGetter];
}];

@@ -556,3 +581,3 @@ /**

readonly h: readonly [{
readonly h: readonly ["auto", typeof isLength];
readonly h: readonly ["auto", import("./types").ThemeGetter];
}];

@@ -571,3 +596,3 @@ /**

readonly 'max-h': readonly [{
readonly 'max-h': readonly [typeof isLength];
readonly 'max-h': readonly [import("./types").ThemeGetter];
}];

@@ -668,3 +693,3 @@ /**

readonly 'placeholder-color': readonly [{
readonly placeholder: readonly [typeof isAny];
readonly placeholder: readonly [import("./types").ThemeGetter];
}];

@@ -676,3 +701,3 @@ /**

readonly 'placeholder-opacity': readonly [{
readonly 'placeholder-opacity': readonly [typeof isInteger];
readonly 'placeholder-opacity': readonly [import("./types").ThemeGetter];
}];

@@ -691,3 +716,3 @@ /**

readonly 'text-color': readonly [{
readonly text: readonly [typeof isAny];
readonly text: readonly [import("./types").ThemeGetter];
}];

@@ -699,3 +724,3 @@ /**

readonly 'text-opacity': readonly [{
readonly 'text-opacity': readonly [typeof isInteger];
readonly 'text-opacity': readonly [import("./types").ThemeGetter];
}];

@@ -757,3 +782,3 @@ /**

readonly 'bg-opacity': readonly [{
readonly 'bg-opacity': readonly [typeof isInteger];
readonly 'bg-opacity': readonly [import("./types").ThemeGetter];
}];

@@ -813,3 +838,3 @@ /**

readonly 'bg-color': readonly [{
readonly bg: readonly [typeof isAny];
readonly bg: readonly [import("./types").ThemeGetter];
}];

@@ -821,3 +846,3 @@ /**

readonly 'gradient-from': readonly [{
readonly from: readonly [typeof isAny];
readonly from: readonly [import("./types").ThemeGetter];
}];

@@ -829,3 +854,3 @@ /**

readonly 'gradient-via': readonly [{
readonly via: readonly [typeof isAny];
readonly via: readonly [import("./types").ThemeGetter];
}];

@@ -837,3 +862,3 @@ /**

readonly 'gradient-to': readonly [{
readonly to: readonly [typeof isAny];
readonly to: readonly [import("./types").ThemeGetter];
}];

@@ -845,3 +870,3 @@ /**

readonly rounded: readonly [{
readonly rounded: readonly ["none", "", "sm", "md", "lg", "xl", "2xl", "3xl", "full", typeof isCustomLength];
readonly rounded: readonly [import("./types").ThemeGetter];
}];

@@ -853,3 +878,3 @@ /**

readonly 'rounded-t': readonly [{
readonly 'rounded-t': readonly ["none", "", "sm", "md", "lg", "xl", "2xl", "3xl", "full", typeof isCustomLength];
readonly 'rounded-t': readonly [import("./types").ThemeGetter];
}];

@@ -861,3 +886,3 @@ /**

readonly 'rounded-r': readonly [{
readonly 'rounded-r': readonly ["none", "", "sm", "md", "lg", "xl", "2xl", "3xl", "full", typeof isCustomLength];
readonly 'rounded-r': readonly [import("./types").ThemeGetter];
}];

@@ -869,3 +894,3 @@ /**

readonly 'rounded-b': readonly [{
readonly 'rounded-b': readonly ["none", "", "sm", "md", "lg", "xl", "2xl", "3xl", "full", typeof isCustomLength];
readonly 'rounded-b': readonly [import("./types").ThemeGetter];
}];

@@ -877,3 +902,3 @@ /**

readonly 'rounded-l': readonly [{
readonly 'rounded-l': readonly ["none", "", "sm", "md", "lg", "xl", "2xl", "3xl", "full", typeof isCustomLength];
readonly 'rounded-l': readonly [import("./types").ThemeGetter];
}];

@@ -885,3 +910,3 @@ /**

readonly 'rounded-tl': readonly [{
readonly 'rounded-tl': readonly ["none", "", "sm", "md", "lg", "xl", "2xl", "3xl", "full", typeof isCustomLength];
readonly 'rounded-tl': readonly [import("./types").ThemeGetter];
}];

@@ -893,3 +918,3 @@ /**

readonly 'rounded-tr': readonly [{
readonly 'rounded-tr': readonly ["none", "", "sm", "md", "lg", "xl", "2xl", "3xl", "full", typeof isCustomLength];
readonly 'rounded-tr': readonly [import("./types").ThemeGetter];
}];

@@ -901,3 +926,3 @@ /**

readonly 'rounded-br': readonly [{
readonly 'rounded-br': readonly ["none", "", "sm", "md", "lg", "xl", "2xl", "3xl", "full", typeof isCustomLength];
readonly 'rounded-br': readonly [import("./types").ThemeGetter];
}];

@@ -909,3 +934,3 @@ /**

readonly 'rounded-bl': readonly [{
readonly 'rounded-bl': readonly ["none", "", "sm", "md", "lg", "xl", "2xl", "3xl", "full", typeof isCustomLength];
readonly 'rounded-bl': readonly [import("./types").ThemeGetter];
}];

@@ -917,3 +942,3 @@ /**

readonly 'border-w': readonly [{
readonly border: readonly ["", typeof isLength];
readonly border: readonly [import("./types").ThemeGetter];
}];

@@ -925,3 +950,3 @@ /**

readonly 'border-w-t': readonly [{
readonly 'border-t': readonly ["", typeof isLength];
readonly 'border-t': readonly [import("./types").ThemeGetter];
}];

@@ -933,3 +958,3 @@ /**

readonly 'border-w-r': readonly [{
readonly 'border-r': readonly ["", typeof isLength];
readonly 'border-r': readonly [import("./types").ThemeGetter];
}];

@@ -941,3 +966,3 @@ /**

readonly 'border-w-b': readonly [{
readonly 'border-b': readonly ["", typeof isLength];
readonly 'border-b': readonly [import("./types").ThemeGetter];
}];

@@ -949,3 +974,3 @@ /**

readonly 'border-w-l': readonly [{
readonly 'border-l': readonly ["", typeof isLength];
readonly 'border-l': readonly [import("./types").ThemeGetter];
}];

@@ -957,3 +982,3 @@ /**

readonly 'border-opacity': readonly [{
readonly 'border-opacity': readonly [typeof isInteger];
readonly 'border-opacity': readonly [import("./types").ThemeGetter];
}];

@@ -972,3 +997,3 @@ /**

readonly 'divide-x': readonly [{
readonly 'divide-x': readonly ["", typeof isLength];
readonly 'divide-x': readonly [import("./types").ThemeGetter];
}];

@@ -985,3 +1010,3 @@ /**

readonly 'divide-y': readonly [{
readonly 'divide-y': readonly ["", typeof isLength];
readonly 'divide-y': readonly [import("./types").ThemeGetter];
}];

@@ -998,3 +1023,3 @@ /**

readonly 'divide-opacity': readonly [{
readonly 'divide-opacity': readonly [typeof isInteger];
readonly 'divide-opacity': readonly [import("./types").ThemeGetter];
}];

@@ -1013,3 +1038,3 @@ /**

readonly 'border-color': readonly [{
readonly border: readonly [typeof isAny];
readonly border: readonly [import("./types").ThemeGetter];
}];

@@ -1021,3 +1046,3 @@ /**

readonly 'border-color-t': readonly [{
readonly 'border-t': readonly [typeof isAny];
readonly 'border-t': readonly [import("./types").ThemeGetter];
}];

@@ -1029,3 +1054,3 @@ /**

readonly 'border-color-r': readonly [{
readonly 'border-r': readonly [typeof isAny];
readonly 'border-r': readonly [import("./types").ThemeGetter];
}];

@@ -1037,3 +1062,3 @@ /**

readonly 'border-color-b': readonly [{
readonly 'border-b': readonly [typeof isAny];
readonly 'border-b': readonly [import("./types").ThemeGetter];
}];

@@ -1045,3 +1070,3 @@ /**

readonly 'border-color-l': readonly [{
readonly 'border-l': readonly [typeof isAny];
readonly 'border-l': readonly [import("./types").ThemeGetter];
}];

@@ -1053,3 +1078,3 @@ /**

readonly 'divide-color': readonly [{
readonly divide: readonly [typeof isAny];
readonly divide: readonly [import("./types").ThemeGetter];
}];

@@ -1073,3 +1098,3 @@ /**

readonly 'ring-color': readonly [{
readonly ring: readonly [typeof isAny];
readonly ring: readonly [import("./types").ThemeGetter];
}];

@@ -1081,3 +1106,3 @@ /**

readonly 'ring-opacity': readonly [{
readonly 'ring-opacity': readonly [typeof isInteger];
readonly 'ring-opacity': readonly [import("./types").ThemeGetter];
}];

@@ -1096,3 +1121,3 @@ /**

readonly 'ring-offset-color': readonly [{
readonly 'ring-offset': readonly [typeof isAny];
readonly 'ring-offset': readonly [import("./types").ThemeGetter];
}];

@@ -1111,3 +1136,3 @@ /**

readonly opacity: readonly [{
readonly opacity: readonly [typeof isInteger];
readonly opacity: readonly [import("./types").ThemeGetter];
}];

@@ -1135,3 +1160,3 @@ /**

readonly blur: readonly [{
readonly blur: readonly ["none", "", "sm", "md", "lg", "xl", "2xl", "3xl", typeof isCustomLength];
readonly blur: readonly [import("./types").ThemeGetter];
}];

@@ -1143,3 +1168,3 @@ /**

readonly brightness: readonly [{
readonly brightness: readonly [typeof isInteger];
readonly brightness: readonly [import("./types").ThemeGetter];
}];

@@ -1151,3 +1176,3 @@ /**

readonly contrast: readonly [{
readonly contrast: readonly [typeof isInteger];
readonly contrast: readonly [import("./types").ThemeGetter];
}];

@@ -1166,3 +1191,3 @@ /**

readonly grayscale: readonly [{
readonly grayscale: readonly ["", "0"];
readonly grayscale: readonly [import("./types").ThemeGetter];
}];

@@ -1174,3 +1199,3 @@ /**

readonly 'hue-rotate': readonly [{
readonly 'hue-rotate': readonly [typeof isInteger];
readonly 'hue-rotate': readonly [import("./types").ThemeGetter];
}];

@@ -1182,3 +1207,3 @@ /**

readonly invert: readonly [{
readonly invert: readonly ["", "0"];
readonly invert: readonly [import("./types").ThemeGetter];
}];

@@ -1190,3 +1215,3 @@ /**

readonly saturate: readonly [{
readonly saturate: readonly [typeof isInteger];
readonly saturate: readonly [import("./types").ThemeGetter];
}];

@@ -1198,3 +1223,3 @@ /**

readonly sepia: readonly [{
readonly sepia: readonly ["", "0"];
readonly sepia: readonly [import("./types").ThemeGetter];
}];

@@ -1213,3 +1238,3 @@ /**

readonly 'backdrop-blur': readonly [{
readonly 'backdrop-blur': readonly ["none", "", "sm", "md", "lg", "xl", "2xl", "3xl"];
readonly 'backdrop-blur': readonly [import("./types").ThemeGetter];
}];

@@ -1221,3 +1246,3 @@ /**

readonly 'backdrop-brightness': readonly [{
readonly 'backdrop-brightness': readonly [typeof isInteger];
readonly 'backdrop-brightness': readonly [import("./types").ThemeGetter];
}];

@@ -1229,3 +1254,3 @@ /**

readonly 'backdrop-contrast': readonly [{
readonly 'backdrop-contrast': readonly [typeof isInteger];
readonly 'backdrop-contrast': readonly [import("./types").ThemeGetter];
}];

@@ -1237,3 +1262,3 @@ /**

readonly 'backdrop-grayscale': readonly [{
readonly 'backdrop-grayscale': readonly ["", "0"];
readonly 'backdrop-grayscale': readonly [import("./types").ThemeGetter];
}];

@@ -1245,3 +1270,3 @@ /**

readonly 'backdrop-hue-rotate': readonly [{
readonly 'backdrop-hue-rotate': readonly [typeof isInteger];
readonly 'backdrop-hue-rotate': readonly [import("./types").ThemeGetter];
}];

@@ -1253,3 +1278,3 @@ /**

readonly 'backdrop-invert': readonly [{
readonly 'backdrop-invert': readonly ["", "0"];
readonly 'backdrop-invert': readonly [import("./types").ThemeGetter];
}];

@@ -1261,3 +1286,3 @@ /**

readonly 'backdrop-opacity': readonly [{
readonly 'backdrop-opacity': readonly [typeof isInteger];
readonly 'backdrop-opacity': readonly [import("./types").ThemeGetter];
}];

@@ -1269,3 +1294,3 @@ /**

readonly 'backdrop-saturate': readonly [{
readonly 'backdrop-saturate': readonly [typeof isInteger];
readonly 'backdrop-saturate': readonly [import("./types").ThemeGetter];
}];

@@ -1277,3 +1302,3 @@ /**

readonly 'backdrop-sepia': readonly [{
readonly 'backdrop-sepia': readonly ["", "0"];
readonly 'backdrop-sepia': readonly [import("./types").ThemeGetter];
}];

@@ -1348,3 +1373,3 @@ /**

readonly scale: readonly [{
readonly scale: readonly [typeof isInteger];
readonly scale: readonly [import("./types").ThemeGetter];
}];

@@ -1356,3 +1381,3 @@ /**

readonly 'scale-x': readonly [{
readonly 'scale-x': readonly [typeof isInteger];
readonly 'scale-x': readonly [import("./types").ThemeGetter];
}];

@@ -1364,3 +1389,3 @@ /**

readonly 'scale-y': readonly [{
readonly 'scale-y': readonly [typeof isInteger];
readonly 'scale-y': readonly [import("./types").ThemeGetter];
}];

@@ -1379,3 +1404,3 @@ /**

readonly 'translate-x': readonly [{
readonly 'translate-x': readonly [typeof isLength];
readonly 'translate-x': readonly [import("./types").ThemeGetter];
}];

@@ -1387,3 +1412,3 @@ /**

readonly 'translate-y': readonly [{
readonly 'translate-y': readonly [typeof isLength];
readonly 'translate-y': readonly [import("./types").ThemeGetter];
}];

@@ -1395,3 +1420,3 @@ /**

readonly 'skew-x': readonly [{
readonly 'skew-x': readonly [typeof isInteger];
readonly 'skew-x': readonly [import("./types").ThemeGetter];
}];

@@ -1403,3 +1428,3 @@ /**

readonly 'skew-y': readonly [{
readonly 'skew-y': readonly [typeof isInteger];
readonly 'skew-y': readonly [import("./types").ThemeGetter];
}];

@@ -1484,3 +1509,3 @@ /**

readonly 'caret-color': readonly [{
readonly caret: readonly [typeof isAny];
readonly caret: readonly [import("./types").ThemeGetter];
}];

@@ -1487,0 +1512,0 @@ };

8

dist/types/index.d.ts

@@ -1,8 +0,8 @@

import { createTailwindMerge } from './create-tailwind-merge';
import { getDefaultConfig } from './default-config';
export declare const twMerge: (...classLists: (string | false | null | undefined)[]) => string;
export { createTailwindMerge, getDefaultConfig };
export { twMerge } from './tailwind-merge';
export { getDefaultConfig } from './default-config';
export { extendTailwindMerge } from './extend-tailwind-merge';
export { createTailwindMerge } from './create-tailwind-merge';
export type { Config } from './types';
export * as validators from './validators';
export { mergeConfigs } from './merge-configs';
export { fromTheme } from './from-theme';

14

dist/types/types.d.ts

@@ -9,2 +9,7 @@ export interface Config {

/**
* Theme scales used in classGroups.
* The keys are the same as in the Tailwind config but the values are sometimes defined more broadly.
*/
theme: ThemeObject;
/**
* Object with groups of classes.

@@ -28,7 +33,12 @@ * @example

}
export declare type ThemeObject = Record<string, ClassGroup>;
export declare type ClassGroupId = string;
export declare type ClassGroup = readonly ClassDefinition[];
declare type ClassDefinition = string | ClassValidator | ClassObject;
declare type ClassDefinition = string | ClassValidator | ThemeGetter | ClassObject;
export declare type ClassValidator = (classPart: string) => boolean;
export interface ThemeGetter {
(theme: ThemeObject): ClassGroup;
isThemeGetter: true;
}
declare type ClassObject = Record<string, readonly ClassDefinition[]>;
export declare type ClassGroupId = string;
export {};

20

package.json
{
"name": "tailwind-merge",
"version": "0.8.2",
"version": "0.9.0",
"description": "Merge Tailwind CSS classes without style conflicts",

@@ -54,17 +54,17 @@ "keywords": [

"devDependencies": {
"@types/jest": "^27.0.2",
"@typescript-eslint/eslint-plugin": "^5.1.0",
"@typescript-eslint/parser": "^5.1.0",
"eslint": "^8.0.1",
"eslint-plugin-import": "^2.25.2",
"eslint-plugin-jest": "^25.2.2",
"@types/jest": "^27.0.3",
"@typescript-eslint/eslint-plugin": "^5.4.0",
"@typescript-eslint/parser": "^5.4.0",
"eslint": "^8.3.0",
"eslint-plugin-import": "^2.25.3",
"eslint-plugin-jest": "^25.3.0",
"fp-ts": "^2.11.5",
"jest": "^27.3.1",
"microbundle": "^0.14.1",
"package-build-stats": "^7.3.5",
"microbundle": "^0.14.2",
"package-build-stats": "^7.3.6",
"prettier": "^2.3.2",
"ts-jest": "^27.0.7",
"typescript": "^4.4.4",
"typescript": "^4.5.2",
"zx": "^4.0.0"
}
}

249

README.md
<div align="center">
<br />
<a href="https://github.com/dcastil/tailwind-merge">
<!-- AUTOGENERATED START logo-image --><img src="https://github.com/dcastil/tailwind-merge/raw/v0.8.2/assets/logo.svg" alt="tailwind-merge" width="221px" /><!-- AUTOGENERATED END -->
<!-- AUTOGENERATED START logo-image --><img src="https://github.com/dcastil/tailwind-merge/raw/v0.9.0/assets/logo.svg" alt="tailwind-merge" width="221px" /><!-- AUTOGENERATED END -->
</a>

@@ -22,3 +22,3 @@ </div>

- Fully typed
- [<!-- AUTOGENERATED START package-gzip-size -->4.8 kB<!-- AUTOGENERATED END --> minified + gzipped](https://bundlephobia.com/package/tailwind-merge) (<!-- AUTOGENERATED START package-composition -->96.5% self, 3.5% hashlru<!-- AUTOGENERATED END -->)
- [<!-- AUTOGENERATED START package-gzip-size -->5.2 kB<!-- AUTOGENERATED END --> minified + gzipped](https://bundlephobia.com/package/tailwind-merge) (<!-- AUTOGENERATED START package-composition -->96.7% self, 3.3% hashlru<!-- AUTOGENERATED END -->)

@@ -29,3 +29,3 @@ ## Early development

I want to keep the library on v0 until I feel confident enough that there aren't any major bugs or flaws in its API and implementation. If you find a bug or something you don't like, please [submit an issue](https://github.com/dcastil/tailwind-merge/issues/new) or a pull request. I'm happy about any kind of feedback!
I want to keep the library on v0 until I feel confident enough that there aren't any major bugs or flaws in its API and implementation. If you find a bug or something you don't like, please [submit an issue](https://github.com/dcastil/tailwind-merge/issues/new/choose) or a pull request. I'm happy about any kind of feedback!

@@ -137,2 +137,203 @@ ## What is it for

## 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 of 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,
theme: {
// Theme scales are defined here
},
classGroups: {
// Class groups are defined here
},
conflictingClassGroups: {
// Conflcits 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 custom 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 isCustomValue = (classPart: string) => /^\[.+\]$/.test(classPart)
const fillClassGroup = [{ fill: ['current', isCustomValue] }]
```
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 am 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 asymetric 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 _rceive_ 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`
- `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(() => ({
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

@@ -148,11 +349,6 @@

Default function to use if you're using the default Tailwind config or are close enough to the default config. You can use this function if all of the following points apply to your Tailwind config:
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.
- 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 `twMerge` doesn't work for you, you can create your own custom merge function with [`extendTailwindMerge`](#extendtailwindmerge).
If some of these points don't apply to you, it makes sense to test whether `twMerge` still works as intended with your custom classes. Otherwise, you can create your own custom merge function with [`extendTailwindMerge`](#extendtailwindmerge).
### `getDefaultConfig`

@@ -166,2 +362,26 @@

### `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`

@@ -184,5 +404,7 @@

cacheSize: 0, // ← Disabling cache
prefixes: [
'my-custom-prefix', // ← Adding custom prefix
],
// ↓ 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

@@ -239,3 +461,2 @@ classGroups: {

cacheSize: 0,
prefixes: [...defaultConfig.prefixes, 'my-custom-prefix'],
classGroups: {

@@ -242,0 +463,0 @@ ...defaultConfig.classGroups,

42

src/class-utils.ts

@@ -1,2 +0,2 @@

import { ClassGroupId, Config, ClassGroup, ClassValidator } from './types'
import { ClassGroupId, Config, ClassGroup, ClassValidator, ThemeObject, ThemeGetter } from './types'

@@ -71,2 +71,3 @@ export interface ClassPartObject {

export function createClassMap(config: Config) {
const { theme } = config
const classMap: ClassPartObject = {

@@ -78,3 +79,3 @@ nextPart: {},

Object.entries(config.classGroups).forEach(([classGroupId, classGroup]) => {
processClassesRecursively(classGroup, classMap, classGroupId)
processClassesRecursively(classGroup, classMap, classGroupId, theme)
})

@@ -88,3 +89,4 @@

classPartObject: ClassPartObject,
classGroupId: ClassGroupId
classGroupId: ClassGroupId,
theme: ThemeObject
) {

@@ -96,3 +98,16 @@ classGroup.forEach((classDefinition) => {

classPartObjectToEdit.classGroupId = classGroupId
} else if (typeof classDefinition === 'function') {
return
}
if (typeof classDefinition === 'function') {
if (isThemeGetter(classDefinition)) {
processClassesRecursively(
classDefinition(theme),
classPartObject,
classGroupId,
theme
)
return
}
classPartObject.validators.push({

@@ -102,7 +117,14 @@ validator: classDefinition,

})
} else {
Object.entries(classDefinition).forEach(([key, classGroup]) => {
processClassesRecursively(classGroup, getPart(classPartObject, key), classGroupId)
})
return
}
Object.entries(classDefinition).forEach(([key, classGroup]) => {
processClassesRecursively(
classGroup,
getPart(classPartObject, key),
classGroupId,
theme
)
})
})

@@ -127,1 +149,5 @@ }

}
function isThemeGetter(func: ClassValidator | ThemeGetter): func is ThemeGetter {
return (func as ThemeGetter).isThemeGetter
}

409

src/default-config.ts

@@ -0,4 +1,29 @@

import { fromTheme } from './from-theme'
import { isAny, isCustomLength, isCustomValue, isInteger, isLength } from './validators'
export function getDefaultConfig() {
const colors = fromTheme('colors')
const spacing = fromTheme('spacing')
const blur = fromTheme('blur')
const brightness = fromTheme('brightness')
const borderColor = fromTheme('borderColor')
const borderRadius = fromTheme('borderRadius')
const borderWidth = fromTheme('borderWidth')
const contrast = fromTheme('contrast')
const grayscale = fromTheme('grayscale')
const hueRotate = fromTheme('hueRotate')
const invert = fromTheme('invert')
const gap = fromTheme('gap')
const gradientColorStops = fromTheme('gradientColorStops')
const inset = fromTheme('inset')
const margin = fromTheme('margin')
const opacity = fromTheme('opacity')
const padding = fromTheme('padding')
const saturate = fromTheme('saturate')
const scale = fromTheme('scale')
const sepia = fromTheme('sepia')
const skew = fromTheme('skew')
const space = fromTheme('space')
const translate = fromTheme('translate')
const getSizesSimple = () => ['sm', 'md', 'lg', 'xl', '2xl'] as const

@@ -8,8 +33,5 @@ const getSizesExtended = () => ['3xl', '4xl', '5xl', '6xl', '7xl'] as const

const getOverflow = () => ['auto', 'hidden', 'visible', 'scroll'] as const
const getLength = () => [isLength] as const
const getLengthWithAuto = () => ['auto', isLength] as const
const getSpacingWithAuto = () => ['auto', spacing] as const
const getLengthWithEmpty = () => ['', isLength] as const
const getInteger = () => [isInteger] as const
const getIntegerWithAuto = () => ['auto', isInteger] as const
const getAny = () => [isAny] as const
const getPositions = () =>

@@ -27,4 +49,2 @@ [

] as const
const getRounded = () =>
['none', '', ...getSizesSimple(), '3xl', 'full', isCustomLength] as const
const getBorderStyles = () => ['solid', 'dashed', 'dotted', 'double', 'none'] as const

@@ -59,2 +79,171 @@ const getBlendModes = () =>

cacheSize: 500,
theme: {
colors: [isAny],
spacing: [isLength],
blur: ['none', '', ...getSizesSimple(), '3xl', isCustomLength],
brightness: [isInteger],
borderColor: [colors],
borderRadius: ['none', '', ...getSizesSimple(), '3xl', 'full', isCustomLength],
borderWidth: getLengthWithEmpty(),
contrast: [isInteger],
grayscale: getZeroAndEmpty(),
hueRotate: [isInteger],
invert: getZeroAndEmpty(),
gap: [spacing],
gradientColorStops: [colors],
inset: getSpacingWithAuto(),
margin: getSpacingWithAuto(),
opacity: [isInteger],
padding: [spacing],
saturate: [isInteger],
scale: [isInteger],
sepia: getZeroAndEmpty(),
skew: [isInteger],
space: [spacing],
translate: [spacing],
// Tailwind theme keys not in use because they would apply only to a single classGroup:
// animation: ['none', 'spin', 'ping', 'pulse', 'bounce', isCustomValue],
// backdropBlur: [blur],
// backdropBrightness: [brightness],
// backdropContrast: [contrast],
// backdropGrayscale: [grayscale],
// backdropHueRotate: [hueRotate],
// backdropInvert: [invert],
// backdropOpacity: [opacity],
// backdropSaturate: [saturate],
// backdropSepia: [sepia],
// backgroundColor: [colors],
// backgroundImage: [
// 'none',
// { 'gradient-to': ['t', 'tr', 'r', 'br', 'b', 'bl', 'l', 'tl'] },
// ],
// backgroundOpacity: [opacity],
// backgroundPosition: getPositions(),
// backgroundSize: ['auto', 'cover', 'contain'],
// borderOpacity: [opacity],
// boxShadow: ['', ...getSizesSimple(), 'inner', 'none'],
// caretColor: [colors],
// container: ['container'],
// content: [isCustomValue],
// cursor: [
// 'auto',
// 'default',
// 'pointer',
// 'wait',
// 'text',
// 'move',
// 'help',
// 'not-allowed',
// isCustomValue,
// ],
// divideColor: [borderColor],
// divideOpacity: [borderOpacity],
// divideWidth: [borderWidth],
// dropShadow: ['', ...getSizesSimple(), 'none'],
// fill: ['current', isCustomValue],
// flex: ['1', 'auto', 'initial', 'none', isCustomValue],
// flexGrow: getZeroAndEmpty(),
// flexShrink: getZeroAndEmpty(),
// fontFamily: [isAny],
// fontSize: [
// 'xs',
// ...getSizesSimple(),
// 'base',
// ...getSizesExtended(),
// '8xl',
// '9xl',
// isCustomLength,
// ],
// fontWeight: [
// 'thin',
// 'extralight',
// 'light',
// 'normal',
// 'medium',
// 'semibold',
// 'bold',
// 'extrabold',
// 'black',
// ],
// gridAutoColumns: ['auto', 'min', 'max', 'fr', isCustomValue],
// gridAutoRows: ['auto', 'min', 'max', 'fr', isCustomValue],
// gridColumn: ['auto', { span: [isInteger] }],
// gridColumnEnd: getIntegerWithAuto(),
// gridColumnStart: getIntegerWithAuto(),
// gridRow: ['auto', { span: [isInteger] }],
// gridRowStart: getIntegerWithAuto(),
// gridRowEnd: getIntegerWithAuto(),
// gridTemplateColumns: [isAny],
// gridTemplateRows: [isAny],
// height: getSpacingWithAuto(),
// letterSpacing: [
// 'tighter',
// 'tight',
// 'normal',
// 'wide',
// 'wider',
// 'widest',
// isCustomLength,
// ],
// lineHeight: ['none', 'tight', 'snug', 'normal', 'relaxed', 'loose', isLength],
// listStyleType: ['none', 'disc', 'decimal', isCustomValue],
// maxHeight: [spacing],
// maxWidth: [
// '0',
// 'none',
// ...getSizesSimple(),
// ...getSizesExtended(),
// 'full',
// 'min',
// 'max',
// 'prose',
// { screen: getSizesSimple() },
// isCustomLength,
// ],
// minHeight: ['full', 'screen', isLength],
// minWidth: ['full', 'min', 'max', isLength],
// objectPosition: getPositions(),
// order: ['first', 'last', 'none', isInteger],
// outline: ['none', 'white', 'black'],
// placeholderColor: [colors],
// placeholderOpacity: [opacity],
// ringColor: [colors],
// ringOffsetColor: [colors],
// ringOffsetWidth: [isLength],
// ringOpacity: [opacity],
// ringWidth: getLengthWithEmpty(),
// rotate: [isInteger],
// stroke: ['current', isCustomValue],
// strokeWidth: [isLength],
// textColor: [colors],
// textOpacity: [opacity],
// transformOrigin: [
// 'center',
// 'top',
// 'top-right',
// 'right',
// 'bottom-right',
// 'bottom',
// 'bottom-left',
// 'left',
// 'top-left',
// ],
// transitionDelay: [isInteger],
// transitionDuration: [isInteger],
// transitionProperty: [
// 'none',
// 'all',
// '',
// 'colors',
// 'opacity',
// 'shadow',
// 'transform',
// isCustomValue,
// ],
// transitionTimingFunction: ['linear', 'in', 'out', 'in-out', isCustomValue],
// width: ['auto', 'min', 'max', spacing],
// zIndex: [isLength],
},
classGroups: {

@@ -168,3 +357,3 @@ // Layout

*/
inset: [{ inset: getLengthWithAuto() }],
inset: [{ inset: [inset] }],
/**

@@ -174,3 +363,3 @@ * Right / Left

*/
'inset-x': [{ 'inset-x': getLengthWithAuto() }],
'inset-x': [{ 'inset-x': [inset] }],
/**

@@ -180,3 +369,3 @@ * Top / Bottom

*/
'inset-y': [{ 'inset-y': getLengthWithAuto() }],
'inset-y': [{ 'inset-y': [inset] }],
/**

@@ -186,3 +375,3 @@ * Top

*/
top: [{ top: getLengthWithAuto() }],
top: [{ top: [inset] }],
/**

@@ -192,3 +381,3 @@ * Right

*/
right: [{ right: getLengthWithAuto() }],
right: [{ right: [inset] }],
/**

@@ -198,3 +387,3 @@ * Bottom

*/
bottom: [{ bottom: getLengthWithAuto() }],
bottom: [{ bottom: [inset] }],
/**

@@ -204,3 +393,3 @@ * Left

*/
left: [{ left: getLengthWithAuto() }],
left: [{ left: [inset] }],
/**

@@ -215,3 +404,3 @@ * Visibility

*/
z: [{ z: getLength() }],
z: [{ z: [isLength] }],
// Flexbox and Grid

@@ -237,3 +426,3 @@ /**

*/
'flex-grow': [{ 'flex-grow': ['', isInteger] }],
'flex-grow': [{ 'flex-grow': getZeroAndEmpty() }],
/**

@@ -243,3 +432,3 @@ * Flex Shrink

*/
'flex-shrink': [{ 'flex-shrink': ['', isInteger] }],
'flex-shrink': [{ 'flex-shrink': getZeroAndEmpty() }],
/**

@@ -254,3 +443,3 @@ * Order

*/
'grid-cols': [{ 'grid-cols': getAny() }],
'grid-cols': [{ 'grid-cols': [isAny] }],
/**

@@ -260,3 +449,3 @@ * Grid Column Start / End

*/
'col-start-end': [{ col: ['auto', { span: getInteger() }] }],
'col-start-end': [{ col: ['auto', { span: [isInteger] }] }],
/**

@@ -276,3 +465,3 @@ * Grid Column Start

*/
'grid-rows': [{ 'grid-rows': getAny() }],
'grid-rows': [{ 'grid-rows': [isAny] }],
/**

@@ -282,3 +471,3 @@ * Grid Row Start / End

*/
'row-start-end': [{ row: ['auto', { span: getInteger() }] }],
'row-start-end': [{ row: ['auto', { span: [isInteger] }] }],
/**

@@ -313,3 +502,3 @@ * Grid Row Start

*/
gap: [{ gap: getLength() }],
gap: [{ gap: [gap] }],
/**

@@ -319,3 +508,3 @@ * Gap X

*/
'gap-x': [{ 'gap-x': getLength() }],
'gap-x': [{ 'gap-x': [gap] }],
/**

@@ -325,3 +514,3 @@ * Gap Y

*/
'gap-y': [{ 'gap-y': getLength() }],
'gap-y': [{ 'gap-y': [gap] }],
/**

@@ -377,3 +566,3 @@ * Justify Content

*/
p: [{ p: getLength() }],
p: [{ p: [padding] }],
/**

@@ -383,3 +572,3 @@ * Padding X

*/
px: [{ px: getLength() }],
px: [{ px: [padding] }],
/**

@@ -389,3 +578,3 @@ * Padding Y

*/
py: [{ py: getLength() }],
py: [{ py: [padding] }],
/**

@@ -395,3 +584,3 @@ * Padding Top

*/
pt: [{ pt: getLength() }],
pt: [{ pt: [padding] }],
/**

@@ -401,3 +590,3 @@ * Padding Right

*/
pr: [{ pr: getLength() }],
pr: [{ pr: [padding] }],
/**

@@ -407,3 +596,3 @@ * Padding Bottom

*/
pb: [{ pb: getLength() }],
pb: [{ pb: [padding] }],
/**

@@ -413,3 +602,3 @@ * Padding Left

*/
pl: [{ pl: getLength() }],
pl: [{ pl: [padding] }],
/**

@@ -419,3 +608,3 @@ * Margin

*/
m: [{ m: getLengthWithAuto() }],
m: [{ m: [margin] }],
/**

@@ -425,3 +614,3 @@ * Margin X

*/
mx: [{ mx: getLengthWithAuto() }],
mx: [{ mx: [margin] }],
/**

@@ -431,3 +620,3 @@ * Margin Y

*/
my: [{ my: getLengthWithAuto() }],
my: [{ my: [margin] }],
/**

@@ -437,3 +626,3 @@ * Margin Top

*/
mt: [{ mt: getLengthWithAuto() }],
mt: [{ mt: [margin] }],
/**

@@ -443,3 +632,3 @@ * Margin Right

*/
mr: [{ mr: getLengthWithAuto() }],
mr: [{ mr: [margin] }],
/**

@@ -449,3 +638,3 @@ * Margin Bottom

*/
mb: [{ mb: getLengthWithAuto() }],
mb: [{ mb: [margin] }],
/**

@@ -455,3 +644,3 @@ * Margin Left

*/
ml: [{ ml: getLengthWithAuto() }],
ml: [{ ml: [margin] }],
/**

@@ -461,3 +650,3 @@ * Space Between X

*/
'space-x': [{ 'space-x': getLength() }],
'space-x': [{ 'space-x': [space] }],
/**

@@ -472,3 +661,3 @@ * Space Between X Reverse

*/
'space-y': [{ 'space-y': getLength() }],
'space-y': [{ 'space-y': [space] }],
/**

@@ -484,3 +673,3 @@ * Space Between Y Reverse

*/
w: [{ w: ['auto', 'min', 'max', isLength] }],
w: [{ w: ['auto', 'min', 'max', spacing] }],
/**

@@ -515,3 +704,3 @@ * Min-Width

*/
h: [{ h: getLengthWithAuto() }],
h: [{ h: getSpacingWithAuto() }],
/**

@@ -526,3 +715,3 @@ * Min-Height

*/
'max-h': [{ 'max-h': getLength() }],
'max-h': [{ 'max-h': [spacing] }],
// Typography

@@ -533,3 +722,3 @@ /**

*/
'font-family': [{ font: getAny() }],
'font-family': [{ font: [isAny] }],
/**

@@ -649,3 +838,3 @@ * Font Size

*/
'placeholder-color': [{ placeholder: getAny() }],
'placeholder-color': [{ placeholder: [colors] }],
/**

@@ -655,3 +844,3 @@ * Placeholder Opacity

*/
'placeholder-opacity': [{ 'placeholder-opacity': getInteger() }],
'placeholder-opacity': [{ 'placeholder-opacity': [opacity] }],
/**

@@ -666,3 +855,3 @@ * Text Alignment

*/
'text-color': [{ text: getAny() }],
'text-color': [{ text: [colors] }],
/**

@@ -672,3 +861,3 @@ * Text Opacity

*/
'text-opacity': [{ 'text-opacity': getInteger() }],
'text-opacity': [{ 'text-opacity': [opacity] }],
/**

@@ -721,3 +910,3 @@ * Text Decoration

*/
'bg-opacity': [{ 'bg-opacity': getInteger() }],
'bg-opacity': [{ 'bg-opacity': [opacity] }],
/**

@@ -759,3 +948,3 @@ * Background Origin

*/
'bg-color': [{ bg: getAny() }],
'bg-color': [{ bg: [colors] }],
/**

@@ -765,3 +954,3 @@ * Gradient Color Stops From

*/
'gradient-from': [{ from: getAny() }],
'gradient-from': [{ from: [gradientColorStops] }],
/**

@@ -771,3 +960,3 @@ * Gradient Color Stops Via

*/
'gradient-via': [{ via: getAny() }],
'gradient-via': [{ via: [gradientColorStops] }],
/**

@@ -777,3 +966,3 @@ * Gradient Color Stops To

*/
'gradient-to': [{ to: getAny() }],
'gradient-to': [{ to: [gradientColorStops] }],
// Borders

@@ -784,3 +973,3 @@ /**

*/
rounded: [{ rounded: getRounded() }],
rounded: [{ rounded: [borderRadius] }],
/**

@@ -790,3 +979,3 @@ * Border Radius Top

*/
'rounded-t': [{ 'rounded-t': getRounded() }],
'rounded-t': [{ 'rounded-t': [borderRadius] }],
/**

@@ -796,3 +985,3 @@ * Border Radius Right

*/
'rounded-r': [{ 'rounded-r': getRounded() }],
'rounded-r': [{ 'rounded-r': [borderRadius] }],
/**

@@ -802,3 +991,3 @@ * Border Radius Bottom

*/
'rounded-b': [{ 'rounded-b': getRounded() }],
'rounded-b': [{ 'rounded-b': [borderRadius] }],
/**

@@ -808,3 +997,3 @@ * Border Radius Left

*/
'rounded-l': [{ 'rounded-l': getRounded() }],
'rounded-l': [{ 'rounded-l': [borderRadius] }],
/**

@@ -814,3 +1003,3 @@ * Border Radius Top Left

*/
'rounded-tl': [{ 'rounded-tl': getRounded() }],
'rounded-tl': [{ 'rounded-tl': [borderRadius] }],
/**

@@ -820,3 +1009,3 @@ * Border Radius Top Right

*/
'rounded-tr': [{ 'rounded-tr': getRounded() }],
'rounded-tr': [{ 'rounded-tr': [borderRadius] }],
/**

@@ -826,3 +1015,3 @@ * Border Radius Bottom Right

*/
'rounded-br': [{ 'rounded-br': getRounded() }],
'rounded-br': [{ 'rounded-br': [borderRadius] }],
/**

@@ -832,3 +1021,3 @@ * Border Radius Bottom Left

*/
'rounded-bl': [{ 'rounded-bl': getRounded() }],
'rounded-bl': [{ 'rounded-bl': [borderRadius] }],
/**

@@ -838,3 +1027,3 @@ * Border Width

*/
'border-w': [{ border: getLengthWithEmpty() }],
'border-w': [{ border: [borderWidth] }],
/**

@@ -844,3 +1033,3 @@ * Border Width Top

*/
'border-w-t': [{ 'border-t': getLengthWithEmpty() }],
'border-w-t': [{ 'border-t': [borderWidth] }],
/**

@@ -850,3 +1039,3 @@ * Border Width Right

*/
'border-w-r': [{ 'border-r': getLengthWithEmpty() }],
'border-w-r': [{ 'border-r': [borderWidth] }],
/**

@@ -856,3 +1045,3 @@ * Border Width Bottom

*/
'border-w-b': [{ 'border-b': getLengthWithEmpty() }],
'border-w-b': [{ 'border-b': [borderWidth] }],
/**

@@ -862,3 +1051,3 @@ * Border Width Left

*/
'border-w-l': [{ 'border-l': getLengthWithEmpty() }],
'border-w-l': [{ 'border-l': [borderWidth] }],
/**

@@ -868,3 +1057,3 @@ * Border Opacity

*/
'border-opacity': [{ 'border-opacity': getInteger() }],
'border-opacity': [{ 'border-opacity': [opacity] }],
/**

@@ -879,3 +1068,3 @@ * Border Style

*/
'divide-x': [{ 'divide-x': getLengthWithEmpty() }],
'divide-x': [{ 'divide-x': [borderWidth] }],
/**

@@ -890,3 +1079,3 @@ * Divide Width X Reverse

*/
'divide-y': [{ 'divide-y': getLengthWithEmpty() }],
'divide-y': [{ 'divide-y': [borderWidth] }],
/**

@@ -901,3 +1090,3 @@ * Divide Width Y Reverse

*/
'divide-opacity': [{ 'divide-opacity': getInteger() }],
'divide-opacity': [{ 'divide-opacity': [opacity] }],
/**

@@ -912,3 +1101,3 @@ * Divide Style

*/
'border-color': [{ border: getAny() }],
'border-color': [{ border: [borderColor] }],
/**

@@ -918,3 +1107,3 @@ * Border Color Top

*/
'border-color-t': [{ 'border-t': getAny() }],
'border-color-t': [{ 'border-t': [borderColor] }],
/**

@@ -924,3 +1113,3 @@ * Border Color Right

*/
'border-color-r': [{ 'border-r': getAny() }],
'border-color-r': [{ 'border-r': [borderColor] }],
/**

@@ -930,3 +1119,3 @@ * Border Color Bottom

*/
'border-color-b': [{ 'border-b': getAny() }],
'border-color-b': [{ 'border-b': [borderColor] }],
/**

@@ -936,3 +1125,3 @@ * Border Color Left

*/
'border-color-l': [{ 'border-l': getAny() }],
'border-color-l': [{ 'border-l': [borderColor] }],
/**

@@ -942,3 +1131,3 @@ * Divide Color

*/
'divide-color': [{ divide: getAny() }],
'divide-color': [{ divide: [borderColor] }],
/**

@@ -958,3 +1147,3 @@ * Ring Width

*/
'ring-color': [{ ring: getAny() }],
'ring-color': [{ ring: [colors] }],
/**

@@ -964,3 +1153,3 @@ * Ring Opacity

*/
'ring-opacity': [{ 'ring-opacity': getInteger() }],
'ring-opacity': [{ 'ring-opacity': [opacity] }],
/**

@@ -970,3 +1159,3 @@ * Ring Offset Width

*/
'ring-offset-w': [{ 'ring-offset': getLength() }],
'ring-offset-w': [{ 'ring-offset': [isLength] }],
/**

@@ -976,3 +1165,3 @@ * Ring Offset Color

*/
'ring-offset-color': [{ 'ring-offset': getAny() }],
'ring-offset-color': [{ 'ring-offset': [colors] }],
// Effects

@@ -988,3 +1177,3 @@ /**

*/
opacity: [{ opacity: getInteger() }],
opacity: [{ opacity: [opacity] }],
/**

@@ -1005,3 +1194,3 @@ * Mix Beldn Mode

*/
blur: [{ blur: ['none', '', ...getSizesSimple(), '3xl', isCustomLength] }],
blur: [{ blur: [blur] }],
/**

@@ -1011,3 +1200,3 @@ * Brightness

*/
brightness: [{ brightness: getInteger() }],
brightness: [{ brightness: [brightness] }],
/**

@@ -1017,3 +1206,3 @@ * Contrast

*/
contrast: [{ contrast: getInteger() }],
contrast: [{ contrast: [contrast] }],
/**

@@ -1028,3 +1217,3 @@ * Drop Shadow

*/
grayscale: [{ grayscale: getZeroAndEmpty() }],
grayscale: [{ grayscale: [grayscale] }],
/**

@@ -1034,3 +1223,3 @@ * Hue Rotate

*/
'hue-rotate': [{ 'hue-rotate': getInteger() }],
'hue-rotate': [{ 'hue-rotate': [hueRotate] }],
/**

@@ -1040,3 +1229,3 @@ * Invert

*/
invert: [{ invert: getZeroAndEmpty() }],
invert: [{ invert: [invert] }],
/**

@@ -1046,3 +1235,3 @@ * Saturate

*/
saturate: [{ saturate: getInteger() }],
saturate: [{ saturate: [saturate] }],
/**

@@ -1052,3 +1241,3 @@ * Sepia

*/
sepia: [{ sepia: getZeroAndEmpty() }],
sepia: [{ sepia: [sepia] }],
/**

@@ -1063,3 +1252,3 @@ * Backdrop Filter

*/
'backdrop-blur': [{ 'backdrop-blur': ['none', '', ...getSizesSimple(), '3xl'] }],
'backdrop-blur': [{ 'backdrop-blur': [blur] }],
/**

@@ -1069,3 +1258,3 @@ * Backdrop Brightness

*/
'backdrop-brightness': [{ 'backdrop-brightness': getInteger() }],
'backdrop-brightness': [{ 'backdrop-brightness': [brightness] }],
/**

@@ -1075,3 +1264,3 @@ * Backdrop Contrast

*/
'backdrop-contrast': [{ 'backdrop-contrast': getInteger() }],
'backdrop-contrast': [{ 'backdrop-contrast': [contrast] }],
/**

@@ -1081,3 +1270,3 @@ * Backdrop Grayscale

*/
'backdrop-grayscale': [{ 'backdrop-grayscale': getZeroAndEmpty() }],
'backdrop-grayscale': [{ 'backdrop-grayscale': [grayscale] }],
/**

@@ -1087,3 +1276,3 @@ * Backdrop Hue Rotate

*/
'backdrop-hue-rotate': [{ 'backdrop-hue-rotate': getInteger() }],
'backdrop-hue-rotate': [{ 'backdrop-hue-rotate': [hueRotate] }],
/**

@@ -1093,3 +1282,3 @@ * Backdrop Invert

*/
'backdrop-invert': [{ 'backdrop-invert': getZeroAndEmpty() }],
'backdrop-invert': [{ 'backdrop-invert': [invert] }],
/**

@@ -1099,3 +1288,3 @@ * Backdrop Opacity

*/
'backdrop-opacity': [{ 'backdrop-opacity': getInteger() }],
'backdrop-opacity': [{ 'backdrop-opacity': [opacity] }],
/**

@@ -1105,3 +1294,3 @@ * Backdrop Saturate

*/
'backdrop-saturate': [{ 'backdrop-saturate': getInteger() }],
'backdrop-saturate': [{ 'backdrop-saturate': [saturate] }],
/**

@@ -1111,3 +1300,3 @@ * Backdrop Sepia

*/
'backdrop-sepia': [{ 'backdrop-sepia': getZeroAndEmpty() }],
'backdrop-sepia': [{ 'backdrop-sepia': [sepia] }],
// Tables

@@ -1147,3 +1336,3 @@ /**

*/
duration: [{ duration: getInteger() }],
duration: [{ duration: [isInteger] }],
/**

@@ -1158,3 +1347,3 @@ * Transition Timing Function

*/
delay: [{ delay: getInteger() }],
delay: [{ delay: [isInteger] }],
/**

@@ -1194,3 +1383,3 @@ * Animation

*/
scale: [{ scale: getInteger() }],
scale: [{ scale: [scale] }],
/**

@@ -1200,3 +1389,3 @@ * Scale X

*/
'scale-x': [{ 'scale-x': getInteger() }],
'scale-x': [{ 'scale-x': [scale] }],
/**

@@ -1206,3 +1395,3 @@ * Scale Y

*/
'scale-y': [{ 'scale-y': getInteger() }],
'scale-y': [{ 'scale-y': [scale] }],
/**

@@ -1212,3 +1401,3 @@ * Rotate

*/
rotate: [{ rotate: getInteger() }],
rotate: [{ rotate: [isInteger] }],
/**

@@ -1218,3 +1407,3 @@ * Translate X

*/
'translate-x': [{ 'translate-x': getLength() }],
'translate-x': [{ 'translate-x': [translate] }],
/**

@@ -1224,3 +1413,3 @@ * Translate Y

*/
'translate-y': [{ 'translate-y': getLength() }],
'translate-y': [{ 'translate-y': [translate] }],
/**

@@ -1230,3 +1419,3 @@ * Skew X

*/
'skew-x': [{ 'skew-x': getInteger() }],
'skew-x': [{ 'skew-x': [skew] }],
/**

@@ -1236,3 +1425,3 @@ * Skew Y

*/
'skew-y': [{ 'skew-y': getInteger() }],
'skew-y': [{ 'skew-y': [skew] }],
// Interactivity

@@ -1298,3 +1487,3 @@ /**

*/
'stroke-w': [{ stroke: getLength() }],
'stroke-w': [{ stroke: [isLength] }],
// Accessibility

@@ -1316,3 +1505,3 @@ /**

*/
'caret-color': [{ caret: getAny() }],
'caret-color': [{ caret: [colors] }],
},

@@ -1319,0 +1508,0 @@ conflictingClassGroups: {

10

src/index.ts

@@ -1,10 +0,8 @@

import { createTailwindMerge } from './create-tailwind-merge'
import { getDefaultConfig } from './default-config'
export const twMerge = createTailwindMerge(getDefaultConfig)
export { createTailwindMerge, getDefaultConfig }
export { twMerge } from './tailwind-merge'
export { getDefaultConfig } from './default-config'
export { extendTailwindMerge } from './extend-tailwind-merge'
export { createTailwindMerge } from './create-tailwind-merge'
export type { Config } from './types'
export * as validators from './validators'
export { mergeConfigs } from './merge-configs'
export { fromTheme } from './from-theme'

15

src/types.ts

@@ -9,2 +9,7 @@ export interface Config {

/**
* Theme scales used in classGroups.
* The keys are the same as in the Tailwind config but the values are sometimes defined more broadly.
*/
theme: ThemeObject
/**
* Object with groups of classes.

@@ -29,7 +34,11 @@ * @example

export type ThemeObject = Record<string, ClassGroup>
export type ClassGroupId = string
export type ClassGroup = readonly ClassDefinition[]
type ClassDefinition = string | ClassValidator | ClassObject
type ClassDefinition = string | ClassValidator | ThemeGetter | ClassObject
export type ClassValidator = (classPart: string) => boolean
export interface ThemeGetter {
(theme: ThemeObject): ClassGroup
isThemeGetter: true
}
type ClassObject = Record<string, readonly ClassDefinition[]>
export type ClassGroupId = string
dist/index.cjs

Sorry, the diff of this file is not supported yet

dist/index.cjs.map

Sorry, the diff of this file is not supported yet

dist/index.js.map

Sorry, the diff of this file is not supported yet

dist/index.module.js.map

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc