Breaking with Tailwind 4.x

[LilaRest]

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]

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

[andriytyurnikov]

@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]

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]

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]

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]

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]

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 😓

[stormwarning]

@LilaRest are you using the new CSS config, or a path to a JS config?

[LilaRest]

@stormwarning A path to a TS config