Logical properties (ms-*, me-*, ps-*, pe-*) not working with Next.js 15.5.0

[CaarLo1337]

What version of Tailwind CSS are you using?

v4.1.10 also testet on (v4.1.12)

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

Next.js 15.5.2 (turbopack)

What version of Node.js are you using?

v22.14.0

What browser are you using?

All browsers

What operating system are you using?

Windows

Reproduction URL

• https://github.com/CaarLo1337/tailwind-nextjs-issue
• CaarLo1337/tailwind-nextjs-issue@b0e9ee1

Describe your issue

After upgrading from Next.js 15.3.4 to 15.5.0, Tailwind CSS logical properties (ms-*, me-*, ps-*, pe-*) are workings differently, including responsive variants don't apply (md:ps-10, lg:ms-4, etc.).

Screenshot from 15.3.4

Screenshot from 15.5.0

Both screenshots shows the same component with filter "padding" applied in dev-tools

[wongjn]

Having a look around the GitHub, I found the :lang() in postcss-lightningcss. Testing it in Lightning CSS Playground does seem to introduce the same syntax.

Now it's the question of where the browser configuration target is set so low. It shouldn't be from Tailwind's run of Lightning CSS since it does not run it in dev and also is enforced to be quite new:

tailwindcss/packages/@tailwindcss-node/src/optimize.ts

Lines 48 to 53 in 8165e04

	targets: {
	safari: (16 << 16) | (4 << 8),
	ios_saf: (16 << 16) | (4 << 8),
	firefox: 128 << 16,
	chrome: 111 << 16,
	},

[thecrypticace]

Nah, it's not from our use of Lightning CSS. Drop --turbopack from the next build command and the issue disappears.

[wongjn]

Yea, removing @tailwindcss/postcss and replacing the CSS with only:

.banner {
  padding-inline: 20px 40px;
}

Still produces the verbose CSS:

/* [project]/src/app/globals.css [app-client] (css) */
.banner:not(:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
  padding-left: 20px;
  padding-right: 40px;
}

.banner:not(:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
  padding-left: 20px;
  padding-right: 40px;
}

.banner:not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
  padding-left: 20px;
  padding-right: 40px;
}

.banner:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
  padding-left: 40px;
  padding-right: 20px;
}

.banner:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
  padding-left: 40px;
  padding-right: 20px;
}

.banner:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
  padding-left: 40px;
  padding-right: 20px;
}

[thecrypticace]

Our build explicitly disables this feature by excluding both DirSelector and LogicalProperties:

tailwindcss/packages/@tailwindcss-node/src/optimize.ts

Line 47 in 8165e04

exclude: Features.LogicalProperties | Features.DirSelector | Features.LightDark,

Gonna close this since it's a Next.js problem

[CaarLo1337]

Nah, it's not from our use of Lightning CSS. Drop --turbopack from the next build command and the issue disappears.

yes that worked but i want to keep turbopack.. I'm working on a huge repo, and this handy tool cuts my startup time in half.