ltr and rtl don't respect the direction when dir=auto is used

[shedokan]

What version of Tailwind CSS are you using?

3.4.10

What build tool (or framework if it abstracts the build tool) are you using?

postcss 8.4.41, svelte 4.2.19, vite 5.4.2

What version of Node.js are you using?

v20.17.0

What browser are you using?

Arc (Chromium based)

What operating system are you using?

macOS

Reproduction URL

It is expected that when using dir=auto the english(ltr) and hebrew(rtl) texts would also be coloured

https://play.tailwindcss.com/ZKvy8eFhha

Describe your issue

When using dir=auto on an element, the user agent parses the content and figures out the direction to be used.

The current attributes depend on the attribute, instead of the :dir()

tailwindcss/packages/tailwindcss/src/variants.ts

Lines 902 to 903 in ac6d4a6

	staticVariant('ltr', ['&:where([dir="ltr"], [dir="ltr"] *)'])
	staticVariant('rtl', ['&:where([dir="rtl"], [dir="rtl"] *)'])

Note: Things like ps and pe do work