Can't create custom responsive class

[renanyudimt]

Im trying to create custom height classes named in example: h-50px and h-73px, Im importing all the tailwindcss and layers/variants, but i cant make those classes work into responsive breakpoint.

I dont know if im lack of knowledge, but i think it should work.

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
  @variants responsive {
    .h-50px {
      height: 50px;
    }
    .h-76px {
      height: 76px;
    }
  }
}

here is an example not working:

<div className="h-50px lg:h-73px container flex content-around mx-auto"></div>

Its always 50px

[alexanderbluhm]

@renanyudimt First, the "v" in "variants" should be no capital letter.
So:

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
  @variants responsive {
    .h-50px {
      height: 50px;
    }
    .h-76px {
      height: 76px;
    }
  }
}

Then, in your example you are using lg:h-73px but this class doesn't exist. You should use lg:h-76px instead. Then it is working as you wanted.

[renanyudimt]

@renanyudimt First, the "v" in "variants" should be no capital letter.
So:

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
  @variants responsive {
    .h-50px {
      height: 50px;
    }
    .h-76px {
      height: 76px;
    }
  }
}

Then, in your example you are using lg:h-73px but this class doesn't exist. You should use lg:h-76px instead. Then it is working as you wanted.

Thank you for answering, but i give up to create my custom classes like this and now i create them inside tailwind.config.js

[renanyudimt]

@renanyudimt First, the "v" in "variants" should be no capital letter.
So:

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
  @variants responsive {
    .h-50px {
      height: 50px;
    }
    .h-76px {
      height: 76px;
    }
  }
}

Then, in your example you are using lg:h-73px but this class doesn't exist. You should use lg:h-76px instead. Then it is working as you wanted.

Hey @alexanderbluhm i tried the capital "V" on variants but no success. About lg:h-73px instead lg:h-76px i misstype it.

Currently i need this work again, lol. In this case, im gonna create an element with pseudo-class ::after and ::before, as long as i didnt find any other way to create them with tailwind