Closed 2manoj1 closed 5 months ago
Hey!
Left side is v4 version, Right side is v3.3.3 version
I see the result on the right with the reproduction you provided. Make sure you remove the .next
folder in case there are some caches left.
The CSS on the body
doesn't use Tailwind CSS at all, because this is all native CSS and Tailwind CSS itself is not being used here:
:root {
--foreground-rgb: 0, 0, 0;
--background-start-rgb: 214, 219, 220;
--background-end-rgb: 255, 255, 255;
}
@media (prefers-color-scheme: dark) {
:root {
--foreground-rgb: 255, 255, 255;
--background-start-rgb: 0, 0, 0;
--background-end-rgb: 0, 0, 0;
}
}
body {
color: rgb(var(--foreground-rgb));
background: linear-gradient(to bottom, transparent, rgb(var(--background-end-rgb))) rgb(var(--background-start-rgb));
}
In dark mode, the colors are mapped to white
(255, 255, 255) and black
(0, 0, 0), that's why you see the white to black gradient at the top.
The next issue is the radial gradient, the blue-ish one you see. This currently doesn't work because this is using a custom bg-gradient-radial
. This gradient-radial
is coming from the tailwind.config.js
file.
This is the tailwind.config.js
file that Next.js ships with:
import type { Config } from "tailwindcss";
const config: Config = {
content: [
"./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
"./src/components/**/*.{js,ts,jsx,tsx,mdx}",
"./src/app/**/*.{js,ts,jsx,tsx,mdx}",
],
theme: {
extend: {
backgroundImage: {
"gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
"gradient-conic":
"conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
},
},
},
plugins: [],
};
export default config;
Notice the theme
config.
You can get this back by adjusting your globals.css
file:
@theme {
--font-family-display: 'Satoshi', 'sans-serif';
+ --background-image-gradient-radial: radial-gradient(var(--tw-gradient-stops));
+ --background-image-gradient-conic: conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops));
}
Hope this helps!
Got it. Thanks. But bg-zinc-800 / 30 differ v3.3.3 and v4 Alpha
v3.3.3
@media (prefers-color-scheme: dark)
.dark\:bg-zinc-800\/30 {
background-color: rgb(39 39 42 / 0.3);
}
Are I missing some config?
In v4 we use color-mix
so that we can use the opacity on top of an existing color or event currentColor
, so v4 will generate this: color-mix(in srgb, #27272a 30%, transparent);
Later, Lightning CSS optimizes this to a hex value. So while v3 and v4 will look different (code wise), the final result is the same thing.
rgb(39 39 42 / 0.3)
can be converted to #27272a4d
color-mix(in srgb, #27272a 30%, transparent);
can be converted to #27272a4d
@RobinMalfait got it.
Another part I notice dark:form-inherit
not applied in V4 Alpha. How to do that?
https://tailwindcss.com/docs/gradient-color-stops
In my example Get Started P tag not look same as v3 version V3 having this but not in V4
@media (prefers-color-scheme: dark) {
.dark\:from-inherit {
--tw-gradient-from: inherit var(--tw-gradient-from-position);
--tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
}
Aha that's because "inherit" is currently not a color. We'll add that 👍
Alright, this is fixed by #13258 and will be available in the next alpha version.
Thanks! Will test and confirm you after available version
What version of Tailwind CSS are you using? v4.0.0-alpha.6
What build tool (or framework if it abstracts the build tool) are you using?
Next.js 14.1.3
For example: postcss-cli 8.3.1, Next.js 10.0.9, webpack 5.28.0
What version of Node.js are you using? v20.11.1
What browser are you using? Chrome
What operating system are you using? macOS
Reproduction URL https://github.com/2manoj1/poc-tailwind4-nextjs14-theme
Describe your issue I'm encountering an issue with background linear gradients not being applied in the Next.js starter project (version 14.1.3) when using Tailwind CSS v4 Alpha.
Steps to Reproduce:
Create a new Next.js project using the npx create-next-app@latest command (ensuring it uses the 14.1.3 starter).
Implement Tailwind CSS according to the installation guide v4 (https://tailwindcss.com/blog/tailwindcss-v4-alpha). or follow setup https://github.com/tailwindlabs/tailwindcss/tree/next/playgrounds/nextjs
Add CSS for a background linear gradient to a body element.
Observe that the background linear gradient is not applied, and the body displays a solid color instead.
Also
Get started by editing
background not applied properlyAttaching Screenshot:
Left side is v4 version, Right side is v3.3.3 version