[v4] In a production environment, the theme does not contain breakpoint variables

[thyeone]

What version of Tailwind CSS are you using?

For example: v4.1.12

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

For example: Next.js 14.2.25

What version of Node.js are you using?

For example: v22.18.0

What browser are you using?

For example: Chrome, Safari

What operating system are you using?

For example: macOS

Describe your issue

Also, breakpoint styles are not applied

globals.css

@import "tailwindcss";

@theme {
  --spacing: 1px;

  --breakpoint-base: 450px;
  --breakpoint-tablet: 900px;
  --breakpoint-mobile: 450px;
  --breakpoint-pc: 1200px;

  --color-transparent: transparent;
  --color-white: #ffffff;
  --color-black: #000000;
  --color-gray-50: #f9f9f9;
  --color-gray-100: #f5f5f5;
  --color-gray-200: #e5ebee;
  --color-gray-300: #d1d5db;
  --color-gray-400: #9ca3ad;
  --color-gray-500: #6d727d;
  --color-gray-600: #4d5665;
  --color-gray-700: #39404f;
  --color-gray-800: #222837;
  --color-gray-900: #131825;
  --color-gray-950: #1e1e1e;
  --color-blue-500: #3b82f6;
  --color-blue-50: #eff6ff;
  --color-red-500: #ef4444;
  --color-red-50: #fee2e2;
  --color-pink-50: #fdf2f8;
  --color-pink-500: #ec4899;
  --color-amber-500: #f59e0b;
  --color-amber-50: #fffbeb;
  --color-brand-500: #eb3f3f;
  --color-brand-100: #ffefef;
  --color-brand-50: #fff9f9;
  --color-emerald-500: #10b981;
  --color-yellow-500: #fde047;
  --text-12: 12px;
  --text-12--line-height: 18px;
  --text-13: 13px;
  --text-14: 14px;
  --text-15: 15px;
  --text-16: 16px;
  --text-17: 17px;
  --text-18: 18px;
  --text-20: 20px;
  --text-28: 28px;
  --text-32: 32px;
  --text-40: 40px;
  --z-index-modal: 1000;
  --z-index-dim: 999;
  --z-index-header: 998;
}

[wongjn]

Seems to work as expected. CSS variables only get output in the compiled CSS if they are used. The --breakpoint-* variables are used to define media queries but you can't use CSS variables in media queries there, thus they don't need to be output with the other theme token CSS variables.

They would be output if you used them in CSS as a value like:

selector {
  property: var(--breakpoint-pc);
}

Or in a utility class like max-w-(--breakpoint-pc). Or in some other code that references the CSS variable like var(--breakpoint-pc).

If you still need them output in the CSS regardless of usage, you can use the static keyword to output the variables:

@import "tailwindcss";

@theme static {
  --breakpoint-base: 450px;
  --breakpoint-tablet: 900px;
  --breakpoint-mobile: 450px;
  --breakpoint-pc: 1200px;
}

@theme {
  --spacing: 1px;

  --color-transparent: transparent;
  --color-white: #ffffff;
  …
}

Also, breakpoint styles are not applied

This could happen if you are using default Tailwind breakpoints in conjunction with your own. As per the documentation:

Note that it's important to always use the same unit for defining your breakpoints or the generated utilities may be sorted in an unexpected order, causing breakpoint classes to override each other in unexpected ways.

Tailwind uses rem for the default breakpoints, so if you are adding additional breakpoints to the defaults, make sure you use rem as well.

Or if converting to rem still does not work, please provide a git repo that reproduces the unexpected behavior and we can take a look.

[thyeone]

It's included, but the style isn't applied. It seems there's another cause, but I have no idea.

[wongjn]

Consider providing a git repo that reproduces the issue and we can take a look for you.

[rozsazoltan]

Off: Although it might not be related to the issue, it's worth noting that you are declaring px-based breakpoints, while TailwindCSS ships with rem-based breakpoints by default. Using both at the same time is not recommended, so it's better to remove the default breakpoints altogether.

• How to add and use custom breakpoint TailwindCSS v4
• How to overwrite container width in TailwindCSS v4?
• rem is dynamic. px is not. Together? Chaos.

@theme {
  --breakpoint-*: initial;
  --breakpoint-base: 450px;
  --breakpoint-tablet: 900px;
  --breakpoint-mobile: 450px;
  --breakpoint-pc: 1200px;
}

Tip

To ensure better accessibility, consider using rem-based sizing. Since it automatically calculates all sizes relative to the default font size of the website. This way, if the font size is manipulated externally, the layout won't break, and it will remain more readable for visually impaired users.

[FragsterAt]

Seems to work as expected. CSS variables only get output in the compiled CSS if they are used

It's sad, but all tw variables are present in output file (bundling with vite), significantly increasing it's size (in v3, there were only used variables)

[RobinMalfait]

Converted this to a discussion because this does seem to work as expected. If you are still running into issues @thyeone then please provide a minimal reproduction repo so we can take a look.

[oliverlangan]

I am actually seeing this same problem. In our pages we are using e.g.

<div class="flex flex-col gap-8 max-w-(--breakpoint-sm) mx-auto">

and in the output CSS, there are no --breakpoint-* items in the theme:

...
@layer theme {
  :root, :host {
    --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
      "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
      "Courier New", monospace;
    --spacing: 0.25rem;
    --container-sm: 24rem;
    --container-md: 28rem;
    --container-xl: 36rem;
    --container-3xl: 48rem;
    --container-4xl: 56rem;
    --font-weight-normal: 400;
...

the styles that use the properties are present in the ouput:

...
  .max-w-\(--breakpoint-lg\) {
    max-width: var(--breakpoint-lg);
  }
  .max-w-\(--breakpoint-sm\) {
    max-width: var(--breakpoint-sm);
  }
  .max-w-\(--breakpoint-xl\) {
    max-width: var(--breakpoint-xl);
  }
...

# tailwindcss --version
≈ tailwindcss v4.1.12

[rozsazoltan]

Minimally reproducible in Play? I didn't succeed.

• https://play.tailwindcss.com/hgpHHKdAeJ?file=css (okay without @theme)
• https://play.tailwindcss.com/TI0JrmFsjS?file=css (okay with @theme)

If I disable the default with --breakpoint-* : initial;, then I can reproduce it, but in that case, this is the expected result:

• https://play.tailwindcss.com/d4rNc23Cv0?file=css

[oliverlangan]

if I use the old v3 style, the values are inserted directly:

  .max-w-screen-md {
    max-width: 48rem;
  }
  .max-w-screen-sm {
    max-width: 40rem;
  }

[oliverlangan]

ah, I figured it out!

I am transitioning the project, and it still has a tailwind.config file, which had a themes key.

I removed that, and the breakpoints now work.