[v4] light-dark is broken in optimized build #15438
Comments
imjeehoo
changed the title
|
The workaround is to explicitly disable /** @type {import('postcss-load-config').Config} */
const config = {
plugins: {
'@tailwindcss/postcss': {
optimize: false,
},
},
};
export default config; |
|
Hey! I'm guessing this is because you are missing a https://lightningcss.dev/transpilation.html#light-dark()-color-function Are you using the |
Yes, I omitted the After experimenting, I discovered that with optimization enabled, LightningCSS exclusively respects the <html className="scheme-light dark:scheme-dark">
<...>
<div className="text-foreground">Hello</div>
<div className="text-foreground scheme-only-dark">Hello</div>
</...>
</html>Without optimization: With optimization: |
|
Following is an example code based on light-dark MDN. Due to how it transpiles All of them produce light mode in optimized build. :root {
--color-background: light-dark(white, black);
--color-foreground: light-dark(black, white);
}
* {
background-color: var(--color-background); /* not working in optimized build */
color: var(--color-foreground); /* not working in optimized build */
background-color: light-dark(white, black); /* working */
color: light-dark(black, white); /* working */
}{/* Assuming parent html tag has `scheme-light dark:scheme-dark` */}
<h1>
<code>light-dark()</code> CSS function
</h1>
<section>
<h2>Automatic</h2>
<p>
This section will react to the users system or user agent setting.
</p>
</section>
<section className="scheme-light">
<h2>Light</h2>
<p>
This section will be light due to the{" "}
<code>color-scheme: light;</code>.
</p>
</section>
<section className="scheme-dark">
<h2>Dark</h2>
<p>
This section will be dark due to the <code>color-scheme: dark;</code>.
</p>
</section> |
|
Is this same case with #15018 ? |
The issue seems to be that the I’m not sure if the standard allows omitting color styles when Personally, I find it frustrating that Lightning CSS introduces random caveats that cause differences between development and production. Since I use Tailwind, I don’t expect to deal with its dependencies’ caveats. I want it to handle things correctly, behave exactly as specified by the supported version of the standard, and remain consistent across development and production environments. I believe Tailwind team’s already aware, but I want to emphasize again that encountering these silently introduced inconsistencies between development and production is a horrible experience for a developer. In fact, it’s even worse than facing a compile error. |
|
Yeah i know it's like lightningcss behaviour or something, but opening issue in in tailwindcss doesn't do anything. Try do it in lightningcss repo. |
If Tailwind doesn’t consider it their bug (which I think is understandable) because the transpilation issues are entirely derived from Lightning CSS, I’m willing to open an issue there. However, since @adamwathan mentioned he can configure it not to transpile |
Nah definitely our problem, working on a solution already. |
|
Update — Lightning is going to expose an option for us to disable transpiling |
|
Thank you for keeping Tailwind best, and most correct framework! |
What version of Tailwind CSS are you using?
4.0.0-beta.8
What build tool (or framework if it abstracts the build tool) are you using?
Next.js 15.1.1, postcss 8.4.49
What version of Node.js are you using?
Bun 1.1.40
What browser are you using?
Safari
What operating system are you using?
macOS 15.2
Describe your issue
Original description
Color works fine in dev, but broken in production
bun run devbun run build && bun run startWith optimization enabled, LightningCSS exclusively respects the color-scheme declaration set on the html element, not elsewhere.
Without optimization:
With optimization:
The text was updated successfully, but these errors were encountered: