fix(corePlugins): more browser compatibility for rtl/ltr

[AliMD]

I'd like to propose an improvement to the rtl/ltr core plugin that addresses compatibility issues on certain browsers and devices.

Current Issue:

The existing implementation uses the :where CSS selector to achieve bidirectionality support. While this approach offers certain advantages, it has limited browser compatibility, particularly on iPhone devices before September 2020. This can cause layout and rendering problems for users on these browsers.

Proposed Solution:

I propose replacing the :where selector with the [dir="ltr"] selector. This alternative:

• Offers broader browser compatibility, ensuring that the plugin functions correctly on all major browsers and devices, including older iPhones.
• Maintains the desired functionality of providing LTR/RTL support.
• Is generally considered a more widely supported and reliable approach for achieving bidirectionality.

Benefits:

By adopting this change, we can:

• Improve user experience for a wider range of users by ensuring consistent plugin functionality across different browsers and devices.
• Reduce potential bugs and support issues related to browser compatibility.
• Align with standard practices for achieving bidirectionality in CSS.

Testing:

I have thoroughly tested this change on various browsers and devices.
These tests confirm that the [dir="rtl"] selector functions as expected and addresses the compatibility issues associated with :where.

Request:

I kindly request that you review my proposed change and consider merging this pull request to improve the plugin's compatibility and user experience. I am confident that this modification will have a positive impact on the project and its users.

Thank you for your time and consideration.

[AliMD]

Browser compatibility :is: https://caniuse.com/css-matches-pseudo :where: https://caniuse.com/mdn-css_selectors_where

[AliMD]

@adamwathan could you please check this pr

[adamwathan]

Hey! So this was a change we made deliberately back in March in this PR:

https://github.com/tailwindlabs/tailwindcss/pull/10766

If we revert that change (which is what this PR would effectively do), then the dark and rtl variants would be sensitive to DOM order again as explained in that PR, and that's something we really felt was important to improve.

Generally we try not to make things unnecessarily incompatible with older browsers, but with :where support being added in Safari 14 back in 2020 and with the significant benefit we get from using it in this situation, I think we want to to keep this one in there.

Two possible solutions for you:

1. Stick with Tailwind v3.2 until you don't need to support older versions of Safari — you probably aren't missing any other great features you can take advantage of in v3.3 and above because most of the new stuff in recent versions are also very modern CSS features that won't work in Safari < 14.
2. Create a custom variant to use instead of the built-in rtl variant — you can make a little variant plugin like this:

// tailwind.config.js
module.exports = {
  theme: {
    // ...
  },
  plugins: [
    function ({ addVariant }) {
      addVariant('dir-ltr', ['[dir="ltr"] &', '&[dir="ltr"]']);
      addVariant('dir-rtl', ['[dir="rtl"] &', '&[dir="rtl"]']);
    },
  ],
};

Then you can use classes like dir-rtl:pr-4 instead of rtl:pr-4 and it'll work for you in older versions of Safari.

Worth noting that the dark variants are also implemented with :where if you aren't using the media strategy, so if you need to support dark mode you might want to do the same sort of thing there.

Hope that helps, appreciate the PR either way!