Skip to content

Add support for Tailwind CSS v4.1 #565

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 21 commits into from
Apr 6, 2025

Conversation

dcastil
Copy link
Owner

@dcastil dcastil commented Apr 5, 2025

Closes #556

@github-actions github-actions bot added feature Is new feature context-v3 Related to tailwind-merge v3 labels Apr 5, 2025
Copy link

github-actions bot commented Apr 5, 2025

Metrics report

At head commit 442502d and base commit b7527c4 at 2025-04-06T20:34:30.719Z

Size

Export Size original Size minified Size minified and Brotli compressed
tailwind-merge esm 91.14 kB +8.5% 🔴 25.35 kB +12.9% 🔴 6.71 kB +6.8% 🔴
 › extendTailwindMerge 90.43 kB +8.6% 🔴 24.71 kB +13.3% 🔴 6.49 kB +6.8% 🔴
 › getDefaultConfig 74.68 kB +10.6% 🔴 20.21 kB +16.7% 🔴 4.87 kB +9.8% 🔴
 › twMerge 88.12 kB +8.8% 🔴 23.86 kB +13.8% 🔴 6.25 kB +7.1% 🔴
 › validators 4.43 kB -1.4% 🟢 1.68 kB -0.3% 🟢 0.73 kB -0.8% 🟢
tailwind-merge cjs 91.40 kB +8.5% 🔴 31.23 kB +11.0% 🔴 7.05 kB +6.1% 🔴
tailwind-merge/es5 esm 96.54 kB +8.2% 🔴 27.32 kB +12.1% 🔴 6.94 kB +6.8% 🔴
 › extendTailwindMerge 95.44 kB +8.3% 🔴 26.69 kB +12.4% 🔴 6.71 kB +6.8% 🔴
 › getDefaultConfig 77.24 kB +10.5% 🔴 21.37 kB +16.0% 🔴 4.96 kB +9.2% 🔴
 › twMerge 92.53 kB +8.6% 🔴 25.62 kB +13.0% 🔴 6.48 kB +7.3% 🔴
 › validators 6.03 kB -0.9% 🟢 2.22 kB -0.3% 🟢 0.75 kB -1.7% 🟢
tailwind-merge/es5 cjs 96.80 kB +8.2% 🔴 33.23 kB +10.4% 🔴 7.27 kB +6.1% 🔴
All size metrics
Export Size original Size minified Size minified and Brotli compressed
tailwind-merge esm 91.14 kB +8.5% 🔴 25.35 kB +12.9% 🔴 6.71 kB +6.8% 🔴
 › createTailwindMerge 13.42 kB 0% 3.61 kB 0% 1.44 kB 0%
 › extendTailwindMerge 90.43 kB +8.6% 🔴 24.71 kB +13.3% 🔴 6.49 kB +6.8% 🔴
 › fromTheme 0.16 kB 0% 0.08 kB 0% 0.09 kB 0%
 › getDefaultConfig 74.68 kB +10.6% 🔴 20.21 kB +16.7% 🔴 4.87 kB +9.8% 🔴
 › mergeConfigs 2.12 kB 0% 0.80 kB 0% 0.27 kB 0%
 › twJoin 1.06 kB 0% 0.26 kB 0% 0.16 kB 0%
 › twMerge 88.12 kB +8.8% 🔴 23.86 kB +13.8% 🔴 6.25 kB +7.1% 🔴
 › validators 4.43 kB -1.4% 🟢 1.68 kB -0.3% 🟢 0.73 kB -0.8% 🟢
tailwind-merge cjs 91.40 kB +8.5% 🔴 31.23 kB +11.0% 🔴 7.05 kB +6.1% 🔴
tailwind-merge/es5 esm 96.54 kB +8.2% 🔴 27.32 kB +12.1% 🔴 6.94 kB +6.8% 🔴
 › createTailwindMerge 15.27 kB 0% 4.20 kB 0% 1.56 kB 0%
 › extendTailwindMerge 95.44 kB +8.3% 🔴 26.69 kB +12.4% 🔴 6.71 kB +6.8% 🔴
 › fromTheme 0.21 kB 0% 0.10 kB 0% 0.09 kB 0%
 › getDefaultConfig 77.24 kB +10.5% 🔴 21.37 kB +16.0% 🔴 4.96 kB +9.2% 🔴
 › mergeConfigs 2.46 kB 0% 0.87 kB 0% 0.29 kB 0%
 › twJoin 1.08 kB 0% 0.26 kB 0% 0.14 kB 0%
 › twMerge 92.53 kB +8.6% 🔴 25.62 kB +13.0% 🔴 6.48 kB +7.3% 🔴
 › validators 6.03 kB -0.9% 🟢 2.22 kB -0.3% 🟢 0.75 kB -1.7% 🟢
tailwind-merge/es5 cjs 96.80 kB +8.2% 🔴 33.23 kB +10.4% 🔴 7.27 kB +6.1% 🔴

Copy link

codspeed-hq bot commented Apr 5, 2025

CodSpeed Performance Report

Merging #565 will degrade performances by 15.2%

Comparing feature/556/add-support-for-tailwind-css-v4.1 (442502d) with main (b7527c4)

Summary

❌ 3 (👁 3) regressions
✅ 2 untouched benchmarks

Benchmarks breakdown

Benchmark BASE HEAD Change
👁 heavy 4.2 ms 4.9 ms -13.69%
👁 init 4.8 ms 5.6 ms -15.2%
👁 simple 3.9 ms 4.6 ms -14.45%

dcastil added 15 commits April 5, 2025 22:01
I also loosened the rules on position vs. origin a bit and allow classes like `*-top-left` and `*-left-top` everywhere.

The reason for this is that Tailwind used one style in some groups and another style in others in the past, but moved to support the same order in all groups while keeping the old style working. That means some class groups allow both styles and some not:
- object-position: supports both
- background-position: supports both
- mask-position: Y direction first only
- perspective-origin: Y direction first only
- transform-origin: Y direction first only

To make things simpler and keep the bundle size of tailwind-merge small, I decided to support both styles everywhere.
This is very verbose, but I intend to optimize this later
In the Tailwind CSS codebase it's belonging to position.
I don't know why I had it under size.
This reverts commit fedad41.

The reverted commit reduced increased `twMerge` bundle size from +7.4% to +5.9% but at the same time made init runtime perf a lot worse from -15.13% to -51.44%
…ha>`, and `text-shadow-*/<alpha>` utilities to control shadow opacity

Already supported, only adding test case
@dcastil dcastil marked this pull request as ready for review April 6, 2025 20:28
@dcastil dcastil merged commit 858ad0e into main Apr 6, 2025
6 checks passed
@dcastil dcastil deleted the feature/556/add-support-for-tailwind-css-v4.1 branch April 6, 2025 20:36
Copy link

github-actions bot commented Apr 6, 2025

This was addressed in release v3.2.0.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
context-v3 Related to tailwind-merge v3 feature Is new feature
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Add support for Tailwind CSS v4.1
1 participant