Skip to content

Commit 0af9546

Browse files
dcastildcastil
authored
Merge pull request #210 from dcastil/feature/add-support-for-tailwind-3.3
Add support for Tailwind CSS v3.3 except line-height shorthand
2 parents 626ccb0 + dfde5da commit 0af9546

9 files changed

+396
-174
lines changed

‎README.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ twMerge('px-2 py-1 bg-red hover:bg-dark-red', 'p-3 bg-[#B91C1C]')
1818
// → 'hover:bg-dark-red p-3 bg-[#B91C1C]'
1919
```
2020

21-
- Supports Tailwind v3.0 up to v3.2 (if you use Tailwind v2, use [tailwind-merge v0.9.0](https://github.com/dcastil/tailwind-merge/tree/v0.9.0))
21+
- Supports Tailwind v3.0 up to v3.3 (except line-height shorthand, tracked in [#211](https://github.com/dcastil/tailwind-merge/issues/211); if you use Tailwind v2, use [tailwind-merge v0.9.0](https://github.com/dcastil/tailwind-merge/tree/v0.9.0))
2222
- Works in all modern browsers and Node >=12
2323
- Fully typed
2424
- [Check bundle size on Bundlephobia](https://bundlephobia.com/package/tailwind-merge)

‎docs/api-reference.md

+2
Original file line numberDiff line numberDiff line change
@@ -201,6 +201,7 @@ interface Validators {
201201
isArbitraryLength(value: string): boolean
202202
isNumber(value: string): boolean
203203
isInteger(value: string): boolean
204+
isPercent(value: string): boolean
204205
isArbitraryValue(value: string): boolean
205206
isTshirtSize(value: string): boolean
206207
isArbitrarySize(value: string): boolean
@@ -225,6 +226,7 @@ A brief summary for each validator:
225226
- `isNumber` checks for numbers (`3`, `1.5`)
226227
- `isArbitraryNumber` checks whether class part is an arbitrary value which starts with `number:` or is a number (`[number:var(--value)]`, `[450]`) which is necessary for font-weight and stroke-width classNames.
227228
- `isInteger` checks for integer values (`3`) and arbitrary integer values (`[3]`).
229+
- `isPercent` checks for percent values (`12.5%`) which is used for color stop positions.
228230
- `isArbitraryValue` checks whether the class part is enclosed in brackets (`[something]`)
229231
- `isTshirtSize`checks whether class part is a T-shirt size (`sm`, `xl`), optionally with a preceding number (`2xl`).
230232
- `isArbitrarySize` checks whether class part is an arbitrary value which starts with `size:` (`[size:200px_100px]`) which is necessary for background-size classNames.

‎docs/configuration.md

+1
Original file line numberDiff line numberDiff line change
@@ -128,6 +128,7 @@ In the Tailwind config you can modify theme scales. tailwind-merge follows the s
128128
- `invert`
129129
- `gap`
130130
- `gradientColorStops`
131+
- `gradientColorStopPositions`
131132
- `inset`
132133
- `margin`
133134
- `opacity`

‎src/lib/default-config.ts

+159-9
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import {
1111
isInteger,
1212
isLength,
1313
isNumber,
14+
isPercent,
1415
isTshirtSize,
1516
} from './validators'
1617

@@ -29,6 +30,7 @@ export function getDefaultConfig() {
2930
const invert = fromTheme('invert')
3031
const gap = fromTheme('gap')
3132
const gradientColorStops = fromTheme('gradientColorStops')
33+
const gradientColorStopPositions = fromTheme('gradientColorStopPositions')
3234
const inset = fromTheme('inset')
3335
const margin = fromTheme('margin')
3436
const opacity = fromTheme('opacity')
@@ -78,7 +80,8 @@ export function getDefaultConfig() {
7880
'luminosity',
7981
'plus-lighter',
8082
] as const
81-
const getAlign = () => ['start', 'end', 'center', 'between', 'around', 'evenly'] as const
83+
const getAlign = () =>
84+
['start', 'end', 'center', 'between', 'around', 'evenly', 'stretch'] as const
8285
const getZeroAndEmpty = () => ['', '0', isArbitraryValue] as const
8386
const getBreaks = () =>
8487
['auto', 'avoid', 'all', 'avoid-page', 'page', 'left', 'right', 'column'] as const
@@ -102,6 +105,7 @@ export function getDefaultConfig() {
102105
invert: getZeroAndEmpty(),
103106
gap: [spacing],
104107
gradientColorStops: [colors],
108+
gradientColorStopPositions: [isPercent, isArbitraryLength],
105109
inset: getSpacingWithAuto(),
106110
margin: getSpacingWithAuto(),
107111
opacity: getNumber(),
@@ -257,6 +261,16 @@ export function getDefaultConfig() {
257261
* @see https://tailwindcss.com/docs/top-right-bottom-left
258262
*/
259263
'inset-y': [{ 'inset-y': [inset] }],
264+
/**
265+
* Start
266+
* @see https://tailwindcss.com/docs/top-right-bottom-left
267+
*/
268+
start: [{ start: [inset] }],
269+
/**
270+
* End
271+
* @see https://tailwindcss.com/docs/top-right-bottom-left
272+
*/
273+
end: [{ end: [inset] }],
260274
/**
261275
* Top
262276
* @see https://tailwindcss.com/docs/top-right-bottom-left
@@ -397,7 +411,7 @@ export function getDefaultConfig() {
397411
* Justify Content
398412
* @see https://tailwindcss.com/docs/justify-content
399413
*/
400-
'justify-content': [{ justify: getAlign() }],
414+
'justify-content': [{ justify: ['normal', ...getAlign()] }],
401415
/**
402416
* Justify Items
403417
* @see https://tailwindcss.com/docs/justify-items
@@ -412,7 +426,7 @@ export function getDefaultConfig() {
412426
* Align Content
413427
* @see https://tailwindcss.com/docs/align-content
414428
*/
415-
'align-content': [{ content: [...getAlign(), 'baseline'] }],
429+
'align-content': [{ content: ['normal', ...getAlign(), 'baseline'] }],
416430
/**
417431
* Align Items
418432
* @see https://tailwindcss.com/docs/align-items
@@ -427,7 +441,7 @@ export function getDefaultConfig() {
427441
* Place Content
428442
* @see https://tailwindcss.com/docs/place-content
429443
*/
430-
'place-content': [{ 'place-content': [...getAlign(), 'baseline', 'stretch'] }],
444+
'place-content': [{ 'place-content': [...getAlign(), 'baseline'] }],
431445
/**
432446
* Place Items
433447
* @see https://tailwindcss.com/docs/place-items
@@ -454,6 +468,16 @@ export function getDefaultConfig() {
454468
* @see https://tailwindcss.com/docs/padding
455469
*/
456470
py: [{ py: [padding] }],
471+
/**
472+
* Padding Start
473+
* @see https://tailwindcss.com/docs/padding
474+
*/
475+
ps: [{ ps: [padding] }],
476+
/**
477+
* Padding End
478+
* @see https://tailwindcss.com/docs/padding
479+
*/
480+
pe: [{ pe: [padding] }],
457481
/**
458482
* Padding Top
459483
* @see https://tailwindcss.com/docs/padding
@@ -489,6 +513,16 @@ export function getDefaultConfig() {
489513
* @see https://tailwindcss.com/docs/margin
490514
*/
491515
my: [{ my: [margin] }],
516+
/**
517+
* Margin Start
518+
* @see https://tailwindcss.com/docs/margin
519+
*/
520+
ms: [{ ms: [margin] }],
521+
/**
522+
* Margin End
523+
* @see https://tailwindcss.com/docs/margin
524+
*/
525+
me: [{ me: [margin] }],
492526
/**
493527
* Margin Top
494528
* @see https://tailwindcss.com/docs/margin
@@ -663,13 +697,23 @@ export function getDefaultConfig() {
663697
],
664698
},
665699
],
700+
/**
701+
* Line Clamp
702+
* @see https://tailwindcss.com/docs/line-clamp
703+
*/
704+
'line-clamp': [{ 'line-clamp': ['none', isNumber, isArbitraryNumber] }],
666705
/**
667706
* Line Height
668707
* @see https://tailwindcss.com/docs/line-height
669708
*/
670709
leading: [
671710
{ leading: ['none', 'tight', 'snug', 'normal', 'relaxed', 'loose', isLength] },
672711
],
712+
/**
713+
* List Style Image
714+
* @see https://tailwindcss.com/docs/list-style-image
715+
*/
716+
'list-image': [{ 'list-image': ['none', isArbitraryValue] }],
673717
/**
674718
* List Style Type
675719
* @see https://tailwindcss.com/docs/list-style-type
@@ -769,12 +813,19 @@ export function getDefaultConfig() {
769813
* Whitespace
770814
* @see https://tailwindcss.com/docs/whitespace
771815
*/
772-
whitespace: [{ whitespace: ['normal', 'nowrap', 'pre', 'pre-line', 'pre-wrap'] }],
816+
whitespace: [
817+
{ whitespace: ['normal', 'nowrap', 'pre', 'pre-line', 'pre-wrap', 'break-spaces'] },
818+
],
773819
/**
774820
* Word Break
775821
* @see https://tailwindcss.com/docs/word-break
776822
*/
777823
break: [{ break: ['normal', 'words', 'all', 'keep'] }],
824+
/**
825+
* Hyphens
826+
* @see https://tailwindcss.com/docs/hyphens
827+
*/
828+
hyphens: [{ hyphens: ['none', 'manual', 'auto'] }],
778829
/**
779830
* Content
780831
* @see https://tailwindcss.com/docs/content
@@ -835,6 +886,21 @@ export function getDefaultConfig() {
835886
* @see https://tailwindcss.com/docs/background-color
836887
*/
837888
'bg-color': [{ bg: [colors] }],
889+
/**
890+
* Gradient Color Stops From Position
891+
* @see https://tailwindcss.com/docs/gradient-color-stops
892+
*/
893+
'gradient-from-pos': [{ from: [gradientColorStopPositions] }],
894+
/**
895+
* Gradient Color Stops Via Position
896+
* @see https://tailwindcss.com/docs/gradient-color-stops
897+
*/
898+
'gradient-via-pos': [{ via: [gradientColorStopPositions] }],
899+
/**
900+
* Gradient Color Stops To Position
901+
* @see https://tailwindcss.com/docs/gradient-color-stops
902+
*/
903+
'gradient-to-pos': [{ to: [gradientColorStopPositions] }],
838904
/**
839905
* Gradient Color Stops From
840906
* @see https://tailwindcss.com/docs/gradient-color-stops
@@ -856,6 +922,16 @@ export function getDefaultConfig() {
856922
* @see https://tailwindcss.com/docs/border-radius
857923
*/
858924
rounded: [{ rounded: [borderRadius] }],
925+
/**
926+
* Border Radius Start
927+
* @see https://tailwindcss.com/docs/border-radius
928+
*/
929+
'rounded-s': [{ 'rounded-s': [borderRadius] }],
930+
/**
931+
* Border Radius End
932+
* @see https://tailwindcss.com/docs/border-radius
933+
*/
934+
'rounded-e': [{ 'rounded-e': [borderRadius] }],
859935
/**
860936
* Border Radius Top
861937
* @see https://tailwindcss.com/docs/border-radius
@@ -876,6 +952,26 @@ export function getDefaultConfig() {
876952
* @see https://tailwindcss.com/docs/border-radius
877953
*/
878954
'rounded-l': [{ 'rounded-l': [borderRadius] }],
955+
/**
956+
* Border Radius Start Start
957+
* @see https://tailwindcss.com/docs/border-radius
958+
*/
959+
'rounded-ss': [{ 'rounded-ss': [borderRadius] }],
960+
/**
961+
* Border Radius Start End
962+
* @see https://tailwindcss.com/docs/border-radius
963+
*/
964+
'rounded-se': [{ 'rounded-se': [borderRadius] }],
965+
/**
966+
* Border Radius End End
967+
* @see https://tailwindcss.com/docs/border-radius
968+
*/
969+
'rounded-ee': [{ 'rounded-ee': [borderRadius] }],
970+
/**
971+
* Border Radius End Start
972+
* @see https://tailwindcss.com/docs/border-radius
973+
*/
974+
'rounded-es': [{ 'rounded-es': [borderRadius] }],
879975
/**
880976
* Border Radius Top Left
881977
* @see https://tailwindcss.com/docs/border-radius
@@ -911,6 +1007,16 @@ export function getDefaultConfig() {
9111007
* @see https://tailwindcss.com/docs/border-width
9121008
*/
9131009
'border-w-y': [{ 'border-y': [borderWidth] }],
1010+
/**
1011+
* Border Width Start
1012+
* @see https://tailwindcss.com/docs/border-width
1013+
*/
1014+
'border-w-s': [{ 'border-s': [borderWidth] }],
1015+
/**
1016+
* Border Width End
1017+
* @see https://tailwindcss.com/docs/border-width
1018+
*/
1019+
'border-w-e': [{ 'border-e': [borderWidth] }],
9141020
/**
9151021
* Border Width Top
9161022
* @see https://tailwindcss.com/docs/border-width
@@ -1216,6 +1322,11 @@ export function getDefaultConfig() {
12161322
* @see https://tailwindcss.com/docs/table-layout
12171323
*/
12181324
'table-layout': [{ table: ['auto', 'fixed'] }],
1325+
/**
1326+
* Caption Side
1327+
* @see https://tailwindcss.com/docs/caption-side
1328+
*/
1329+
caption: [{ caption: ['top', 'bottom'] }],
12191330
// Transitions and Animation
12201331
/**
12211332
* Tranisition Property
@@ -1414,6 +1525,16 @@ export function getDefaultConfig() {
14141525
* @see https://tailwindcss.com/docs/scroll-margin
14151526
*/
14161527
'scroll-my': [{ 'scroll-my': [spacing] }],
1528+
/**
1529+
* Scroll Margin Start
1530+
* @see https://tailwindcss.com/docs/scroll-margin
1531+
*/
1532+
'scroll-ms': [{ 'scroll-ms': [spacing] }],
1533+
/**
1534+
* Scroll Margin End
1535+
* @see https://tailwindcss.com/docs/scroll-margin
1536+
*/
1537+
'scroll-me': [{ 'scroll-me': [spacing] }],
14171538
/**
14181539
* Scroll Margin Top
14191540
* @see https://tailwindcss.com/docs/scroll-margin
@@ -1449,6 +1570,16 @@ export function getDefaultConfig() {
14491570
* @see https://tailwindcss.com/docs/scroll-padding
14501571
*/
14511572
'scroll-py': [{ 'scroll-py': [spacing] }],
1573+
/**
1574+
* Scroll Padding Start
1575+
* @see https://tailwindcss.com/docs/scroll-padding
1576+
*/
1577+
'scroll-ps': [{ 'scroll-ps': [spacing] }],
1578+
/**
1579+
* Scroll Padding End
1580+
* @see https://tailwindcss.com/docs/scroll-padding
1581+
*/
1582+
'scroll-pe': [{ 'scroll-pe': [spacing] }],
14521583
/**
14531584
* Scroll Padding Top
14541585
* @see https://tailwindcss.com/docs/scroll-padding
@@ -1542,15 +1673,15 @@ export function getDefaultConfig() {
15421673
conflictingClassGroups: {
15431674
overflow: ['overflow-x', 'overflow-y'],
15441675
overscroll: ['overscroll-x', 'overscroll-y'],
1545-
inset: ['inset-x', 'inset-y', 'top', 'right', 'bottom', 'left'],
1676+
inset: ['inset-x', 'inset-y', 'start', 'end', 'top', 'right', 'bottom', 'left'],
15461677
'inset-x': ['right', 'left'],
15471678
'inset-y': ['top', 'bottom'],
15481679
flex: ['basis', 'grow', 'shrink'],
15491680
gap: ['gap-x', 'gap-y'],
1550-
p: ['px', 'py', 'pt', 'pr', 'pb', 'pl'],
1681+
p: ['px', 'py', 'ps', 'pe', 'pt', 'pr', 'pb', 'pl'],
15511682
px: ['pr', 'pl'],
15521683
py: ['pt', 'pb'],
1553-
m: ['mx', 'my', 'mt', 'mr', 'mb', 'ml'],
1684+
m: ['mx', 'my', 'ms', 'me', 'mt', 'mr', 'mb', 'ml'],
15541685
mx: ['mr', 'ml'],
15551686
my: ['mt', 'mb'],
15561687
'font-size': ['leading'],
@@ -1567,21 +1698,36 @@ export function getDefaultConfig() {
15671698
'fvn-spacing': ['fvn-normal'],
15681699
'fvn-fraction': ['fvn-normal'],
15691700
rounded: [
1701+
'rounded-s',
1702+
'rounded-e',
15701703
'rounded-t',
15711704
'rounded-r',
15721705
'rounded-b',
15731706
'rounded-l',
1707+
'rounded-ss',
1708+
'rounded-se',
1709+
'rounded-ee',
1710+
'rounded-es',
15741711
'rounded-tl',
15751712
'rounded-tr',
15761713
'rounded-br',
15771714
'rounded-bl',
15781715
],
1716+
'rounded-s': ['rounded-ss', 'rounded-es'],
1717+
'rounded-e': ['rounded-se', 'rounded-ee'],
15791718
'rounded-t': ['rounded-tl', 'rounded-tr'],
15801719
'rounded-r': ['rounded-tr', 'rounded-br'],
15811720
'rounded-b': ['rounded-br', 'rounded-bl'],
15821721
'rounded-l': ['rounded-tl', 'rounded-bl'],
15831722
'border-spacing': ['border-spacing-x', 'border-spacing-y'],
1584-
'border-w': ['border-w-t', 'border-w-r', 'border-w-b', 'border-w-l'],
1723+
'border-w': [
1724+
'border-w-s',
1725+
'border-w-e',
1726+
'border-w-t',
1727+
'border-w-r',
1728+
'border-w-b',
1729+
'border-w-l',
1730+
],
15851731
'border-w-x': ['border-w-r', 'border-w-l'],
15861732
'border-w-y': ['border-w-t', 'border-w-b'],
15871733
'border-color': [
@@ -1595,6 +1741,8 @@ export function getDefaultConfig() {
15951741
'scroll-m': [
15961742
'scroll-mx',
15971743
'scroll-my',
1744+
'scroll-ms',
1745+
'scroll-me',
15981746
'scroll-mt',
15991747
'scroll-mr',
16001748
'scroll-mb',
@@ -1605,6 +1753,8 @@ export function getDefaultConfig() {
16051753
'scroll-p': [
16061754
'scroll-px',
16071755
'scroll-py',
1756+
'scroll-ps',
1757+
'scroll-pe',
16081758
'scroll-pt',
16091759
'scroll-pr',
16101760
'scroll-pb',

0 commit comments

Comments
 (0)