Skip to content
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

Breaking with Tailwind 4.x #241

Open
LilaRest opened this issue Jan 30, 2025 · 7 comments
Open

Breaking with Tailwind 4.x #241

LilaRest opened this issue Jan 30, 2025 · 7 comments

Comments

@LilaRest
Copy link

Hey!

We just upgraded to Tailwind 4.x and our builds were failing with the following error:
TypeError: undefined is not a function

After disabling the tailwindcss-capsize, the issue is gone.

Any idea about what in the plugin could be leading to that error?

@stormwarning
Copy link
Owner

I wonder if v4 changed something about the internal corePlugins which this plugin tries to override... 🤔

@andriytyurnikov
Copy link
Contributor

@LilaRest, having forward/backward compatibility for Tailwind plugins would be a huge luck this days.
Internal architecture changes of config and plugin systems of Tailwind v4 vs v3 are simply too deep.

@stormwarning
Copy link
Owner

Well shit: https://tailwindcss.com/docs/upgrade-guide#disabling-core-plugins

In v3 there was a corePlugins option you could use to completely disable certain utilities in the framework. This is no longer supported in v4.

I think it might be possible to have it work without disabling corePlugins but it might mean the built CSS isn't as "clean" — for example, there'd be a text-lg class from Tailwind with the font-size property, and a text-lg class from this plugin which just sets the custom property used in the text-box-trim calculation

@LilaRest
Copy link
Author

LilaRest commented Jan 30, 2025

Hey @andriytyurnikov and @stormwarning, thanks for your input here!

I've identified that the above error was due to the plugin function no longer receiving the e() function as a parameter. I managed to temporarily fix it by explicitly defining e() in the plugin file.

function e(className) {
    return className.replace(/\\,/g, '\\2c ');
}

I've found the source code of the function here and removed the usage of postcss-selector-parser because it was raising some errors. I'm not sure this implementation will work for all the edge cases, but for now it works.

Happy to get your thoughts on that!

@andriytyurnikov
Copy link
Contributor

Luckily for me - my personal capsizing plugin has no users, so I am just abandoning it.
I applaud to your grit though - tailwind plugin users are caught between a rock and a hard place.
I suspect your fix will be needed by many.
Thanks for sharing, @LilaRest !

@LilaRest
Copy link
Author

I've seen that you pushed some updates yesterday @stormwarning, did this included the patch to this bug? Or should I maintain a version of this plugin in our monorepo as it won't be updated?

@stormwarning
Copy link
Owner

Not yet, just updating some devDependencies while I dig into the issue. I'll do a proper release when I get a working version; I had some trouble even getting tests to run yesterday 😓

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants