Oxygen Menu element with Tailwind CSS

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

@layer components {

    #menu-main{                 @apply hidden md:flex;    }
    #menu-main .menu-item a{    @apply bg-slate-100 hover:bg-slate-200 mx-4 px-4 py-2;    }

    /* Menu toggle *******************************************************/ 
    .oxy-menu-toggle{               @apply md:hidden;    }
    .oxy-nav-menu-hamburger{        @apply w-10 h-8 flex justify-between flex-col;    }
    .oxy-nav-menu-hamburger-line{   @apply h-1.5 bg-slate-600;    }
    /* End of Menu toggle *************************************************/ 


    /* Menu is open *******************************************************/ 
    .oxy-nav-menu-open {                            @apply fixed bottom-0 left-0 right-0 top-0 flex flex-col bg-white z-50; }
    .oxy-nav-menu-open #menu-main {                 @apply flex flex-col my-16 justify-items-center text-center; }
    .oxy-nav-menu-open #menu-main li {              @apply my-2 flex; }
    .oxy-nav-menu-open #menu-main li a {            @apply w-full; }
    .oxy-nav-menu-open .oxy-nav-menu-hamburger {    @apply ml-auto; }
    .oxy-nav-menu-open .oxy-menu-toggle {           @apply  p-8; }
    /* End of Menu is open *************************************************/ 
}