Fix rtl/ltr to work with dir=auto (#14306)

This fixes the following issue
#14305 by using
`:dir()`

---------

Co-authored-by: Philipp Spiess <[email protected]>
Co-authored-by: Robin Malfait <[email protected]>

Author: 3 people

CHANGELOG.md

@@ -26,6 +26,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Skip candidates with invalid `theme()` calls ([#14437](https://github.com/tailwindlabs/tailwindcss/pull/14437))
 - Don't generate `inset-*` utilities for `--inset-shadow-*` and `--inset-ring-*` theme values ([#14447](https://github.com/tailwindlabs/tailwindcss/pull/14447))
 - Include `--default-transition-*` variables in `transition-*` utility output ([#14482](https://github.com/tailwindlabs/tailwindcss/pull/14482))
+- Ensure `rtl` and `ltr` variants work with `[dir=auto]` ([#14306](https://github.com/tailwindlabs/tailwindcss/pull/14306))
 
 ### Changed
 

packages/tailwindcss/src/index.test.ts

@@ -1979,7 +1979,7 @@ describe('plugins', () => {
 
     expect(optimizeCss(compiled).trim()).toMatchInlineSnapshot(`
       "@layer utilities {
-        .rtl\\:flex:where([dir="rtl"], [dir="rtl"] *) {
+        .rtl\\:flex:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
           display: flex;
         }
 
@@ -2489,7 +2489,7 @@ describe('@variant', () => {
       ),
     ).toMatchInlineSnapshot(`
       "@layer utilities {
-        .rtl\\:flex:where([dir="rtl"], [dir="rtl"] *) {
+        .rtl\\:flex:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
           display: flex;
         }
 

packages/tailwindcss/src/variants.test.ts

@@ -928,7 +928,7 @@ test('peer-*', async () => {
 
 test('ltr', async () => {
   expect(await run(['ltr:flex'])).toMatchInlineSnapshot(`
-    ".ltr\\:flex:where([dir="ltr"], [dir="ltr"] *) {
+    ".ltr\\:flex:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) {
       display: flex;
     }"
   `)
@@ -937,7 +937,7 @@ test('ltr', async () => {
 
 test('rtl', async () => {
   expect(await run(['rtl:flex'])).toMatchInlineSnapshot(`
-    ".rtl\\:flex:where([dir="rtl"], [dir="rtl"] *) {
+    ".rtl\\:flex:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
       display: flex;
     }"
   `)
@@ -2762,11 +2762,11 @@ test('variant order', async () => {
       }
     }
 
-    .ltr\\:flex:where([dir="ltr"], [dir="ltr"] *) {
+    .ltr\\:flex:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) {
       display: flex;
     }
 
-    .rtl\\:flex:where([dir="rtl"], [dir="rtl"] *) {
+    .rtl\\:flex:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
       display: flex;
     }
 

packages/tailwindcss/src/variants.ts

@@ -901,8 +901,8 @@ export function createVariants(theme: Theme): Variants {
   staticVariant('portrait', ['@media (orientation: portrait)'], { compounds: false })
   staticVariant('landscape', ['@media (orientation: landscape)'], { compounds: false })
 
-  staticVariant('ltr', ['&:where([dir="ltr"], [dir="ltr"] *)'])
-  staticVariant('rtl', ['&:where([dir="rtl"], [dir="rtl"] *)'])
+  staticVariant('ltr', ['&:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *)'])
+  staticVariant('rtl', ['&:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *)'])
 
   staticVariant('dark', ['@media (prefers-color-scheme: dark)'], { compounds: false })