The plugin logical utilities get in conflict with those from Tailwind CSS

[dgonzalezr]

Hello, we are trying to add this plugin to our project to have support for those logical properties still not available on Tailwind CSS, but we're facing an issue related to a clash between the plugin utilities and the Tailwind.

For example, according to Tailwind CSS there's support for border-radius, and we do use it in our project, but the moment I've added the plugin and try to compile it, I get the following error:

I suppose that utilities already supported in Tailwind CSS should be skipped in the plugin, is there any way to do that?

Also, when using native Tailwind CSS utilities for logical properties, it relies on the corresponding CSS logical property:

While, when I look at the demo page of the plugin, seems it doesn't rely on the CSS logical properties as expected.

Considering the scenario above, shouldn't be border-end-end-radius? Am I missing something?

[stevecochrane]

Hello, good questions and I can answer both.

Re: overlapping styles, it’s true that there are some overlapping styles now that Tailwind has added some basic support for CSS Logical Properties and Values. If you minify your CSS output for your production build, that removes the duplicate styles, though I understand getting warnings in development could still be noisy.

The alternative approach would be for me to issue updates to the plugin whenever Tailwind adds new LP&V features to remove these duplicates as they happen. I’ve decided not to do this so far because I didn’t want to make several updates with breaking changes to the plugin, but now that the feature has been stable for a while, maybe it’s worth it and I might reconsider. I’m traveling at the moment but I’ll try to take a look in the next few weeks.

Re: the demo page, it hasn’t been updated in over a year and at that time, browser support was still incomplete, so the demo page uses some PostCSS plugins for better compatibility. This is also something I can reevaluate and potentially remove if it’s no longer necessary. The plugin will generate the actual LP&V styles as expected without the polyfills.

[stevecochrane]

After taking a look at the current state of browser support, everything provided by this plugin is well-supported everywhere now so the polyfills on the demo page are no longer necessary and I've removed them. The demo page now uses unmodified styles from the plugin with no PostCSS applied after the build.

As for updating to remove the overlapping styles, I think I'm going to hold on that until Tailwind v4 comes out later this year, because I'll very likely need to make some breaking changes then anyway. I'll keep this open until then.

[stevecochrane]

Hi @dgonzalezr, it's been a while but I'm proud to say this issue has finally been addressed in tailwindcss-logical v4.0.0! I've updated the plugin for compatibility with Tailwind v4 and also removed any of the utilities that have been made redundant, including float, clear, text-align, and the single-side border-radius utilities that you were seeing duplicates of before. You can read more about what's new in the v4.0.0 release notes.

With that I think I can close this issue now, but if there's still anything that needs attention just let me know!