Theme variables do not apply to container

[nofalx]

in tailwind v3 you could do something like this

module.exports = {
  theme: {
    screens: {
      sm: '640px',  // Custom global breakpoint
      md: '768px',  // Custom global breakpoint
      lg: '1024px', // Custom global breakpoint
      xl: '1280px', // Custom global breakpoint
    },
    container: {
      center: true,
      screens: {
        sm: '600px',  // Custom container max-width at 'sm' breakpoint
        md: '728px',  // Custom container max-width at 'md' breakpoint
        lg: '984px',  // Custom container max-width at 'lg' breakpoint
        xl: '1240px', // Custom container max-width at 'xl' breakpoint
      },
    },
  },
};

but in v4 we only got the below which only applies to @container and not container

  --container-3xs: 16rem;
  --container-2xs: 18rem;
  --container-xs: 20rem;
  --container-sm: 24rem;
  --container-md: 28rem;
  --container-lg: 32rem;
  --container-xl: 36rem;
  --container-2xl: 42rem;
  --container-3xl: 48rem;
  --container-4xl: 56rem;
  --container-5xl: 64rem;
  --container-6xl: 72rem;
  --container-7xl: 80rem;

[wongjn]

Indeed, in v4, container only uses the --breakpoint variables:

tailwindcss/packages/tailwindcss/src/utilities.ts

Lines 1005 to 1015 in fc94ab4

	utilities.static('container', () => {
	let breakpoints = [...theme.namespace('--breakpoint').values()]
	breakpoints.sort((a, z) => compareBreakpoints(a, z, 'asc'))
	let decls: AstNode[] = [decl('--tw-sort', '--tw-container-component'), decl('width', '100%')]
	for (let breakpoint of breakpoints) {
	decls.push(atRule('@media', `(width >= ${breakpoint})`, [decl('max-width', breakpoint)]))
	}
	return decls
	})

But you can override container using @utility like:

@utility container {
  margin-inline: auto;
  max-width: none;

  @media (width >= 37.5rem) {
    max-width: 37.5rem;
  }
  @media (width >= 45.5rem) {
    max-width: 45.5rem;
  }
  @media (width >= 61.5rem) {
    max-width: 61.5rem;
  }
  @media (width >= 77.5rem) {
    max-width: 77.5rem;
  }
}

https://play.tailwindcss.com/dY6jvDWhqY?file=css

[nofalx]

This maybe out of the scope but how can we make something like this work

@utility container {
  @media (width >= var(--breakpoint-xl))  {
        max-width: calc( 0.8 * var(--breakpoint-xl))
    }
}

the issue is with the width >= var(--breakpoint-xl) but it works with width >= 80rem

[wongjn]

You can do:

@utility container {
  @variant xl  {
    max-width: calc(0.8 * var(--breakpoint-xl));
  }
}