max-h-number is available but max-w-number isn't

[gyhyfj]

For example:

1. max-h-24 can be compiled to max-height: 6rem;
2. max-w-24 can not be complied.
3. max-h-[6rem] can be complied to max-height: 6rem;

It's a bit confused.

[djflorio]

Exact same issue here.

Using next@14.0.4 and tailwindcss@3.3.2

Here's my tailwind.config.ts:

import type { Config } from 'tailwindcss';

const config: Config = {
  content: [
    '../../packages/common/dist/ui/**/*.{js,ts,jsx,tsx,mdx}',
    './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
    './src/components/**/*.{js,ts,jsx,tsx,mdx}',
    './src/app/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    extend: {
      colors: {
        primary: {
          DEFAULT: '#4A282A',
          100: '#802529',
          200: '#66272A',
          400: '#4A282A',
        },
        secondary: {
          DEFAULT: '#F7E2D2',
        },
      },
    },
  },
  plugins: [require('@tailwindcss/forms')],
};
export default config;

If I try to use max-w-24 it doesn't get added (the class is not included in the compiled css). Using an arbitrary width, like max-w-[6rem], works fine.

[wongjn]

Consider updating Tailwind to v3.4.0 which adds support for spacing values for max-w-* classes. Otherwise, you can add the value yourself into your Tailwind configuration like:

import type { Config } from 'tailwindcss';

const config: Config = {
  // …
  theme: {
    extend: {
      // …
      maxWidth: {
        '24': 'your value',
      },
    },
  },
  // …
};
export default config;

[djflorio]

Wow perfect timing! I see it was released a few hours ago.

Updating to 3.4.0 worked for me (had to restart my next.js dev server for it to take effect).

Thanks 👍