Why are custom height measures not working in my tailwind.config.js?-CodePudding

I have been working on a project with NextJS and Tailwind CSS.

I need to use the height class h-96 for a couple of components, but since it is not default-defined I decided to added it to my tailwind.config.js like this:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './app/**/*.{js,ts,jsx,tsx}',
    './pages/**/*.{js,ts,jsx,tsx}',
    './ui/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {
      height: {
        '96': '24rem',
      },
      // https://vercel.com/design/color
      colors: {
        vercel: {
          primaryGreen: '#92c700',
          primaryBlue: '#111871',
          primaryPurple: '#5c068c',
          secondaryPurple: '#6d0793',
        },
      },
    },
  },
};

I was expecting to be able to use h-96 but it seems that the configuration in the tailwind.config.js file are not been applied to the project.

NOTE: I also tried to set the height like this:

height: {
  96: '24rem',
},

since the linting auto-corrected it for me, but this didn't work either.

CodePudding user response：

h-96 is already defined in the tailwind css classes. You can update the h-96 default value in the tailwind.config.js in the following way.

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      height: {
        '96':'124rem'
      }
      // ...
    },
  },
  plugins: [],
}

Also , if you are just using it for couple of components, you can also directly change the values in the components itself like h-[124rem].

More info here

CodePudding user response：

Height 96 (h-96) is a default theme. Since you are attempting to override a default, you must add it directly under the theme tab because you are not 'extending' anything, but rather changing the default configuration.

Source: Here

Try this:

/** @type {import('tailwindcss').Config} */
    module.exports = {
      content: [
        './app/**/*.{js,ts,jsx,tsx}',
        './pages/**/*.{js,ts,jsx,tsx}',
        './ui/**/*.{js,ts,jsx,tsx}',
        './components/**/*.{js,ts,jsx,tsx}',
      ],
      theme: {
        height: {
            96: '24rem',
          },
        extend: {
          // https://vercel.com/design/color
          colors: {
            vercel: {
              primaryGreen: '#92c700',
              primaryBlue: '#111871',
              primaryPurple: '#5c068c',
              secondaryPurple: '#6d0793',
            },
          },
        },
      },
    };