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.