[V4 Alpha] - Background Linear Gradients Not Applied in Next.js Starter 14.1.3

[2manoj1]

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.

body {
  color: rgb(var(--foreground-rgb));
  background: linear-gradient(to bottom, transparent, rgb(var(--background-end-rgb))) rgb(var(--background-start-rgb));
}

• 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 properly

Attaching Screenshot:

Left side is v4 version, Right side is v3.3.3 version

[RobinMalfait]

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!

[2manoj1]

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?

[RobinMalfait]

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

[2manoj1]

@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);
    }
}

[RobinMalfait]

Aha that's because "inherit" is currently not a color. We'll add that 👍

[RobinMalfait]

Alright, this is fixed by #13258 and will be available in the next alpha version.

[2manoj1]

Thanks! Will test and confirm you after available version