Estoy intentando agrupar las clases de Tailwind CSS para que el código quede más limpio y evitar estar repitiendo el mismo conjunto de clases una y otra vez.
En la documentación hacen referencia al "@apply" pero como estoy con el CDN no me funciona. ¿Hay alguna forma de agrupar las clases en una hoja de estilos css o en un SASS o Less por ejemplo? Quiero hacer lo siguiente, dejo un ejemplo de lo que busco:
<ul class="md:flex md:items-center z-[-1] md:z-auto md:static absolute bg-gray-800 w-full left-0 md:w-auto md:py-0 py-4 md:pr-0 pr-7 md:pl-0 pl-7 md:opacity-100 opacity-0 top-[-400px] transition-all ease-in duration-200">
<li class="nav-element">
<a href="#" class="text-x1 md:hover:text-yellow-300 duration-500">Home</a>
</li>
<li class="px-4 py-6 md:py-0 hover:bg-yellow-500 md:hover:bg-transparent text-white duration-500">
<a href="#" class="text-x1 md:hover:text-yellow-300 duration-500">About Us</a>
</li>
<li class="px-4 py-6 md:py-0 hover:bg-yellow-500 md:hover:bg-transparent text-white duration-500">
<a href="#" class="text-x1 md:hover:text-yellow-300 duration-500">Services</a>
</li>
<li class="px-4 py-6 md:py-0 hover:bg-yellow-500 md:hover:bg-transparent text-white duration-500">
<a href="#" class="text-x1 md:hover:text-yellow-300 duration-500">Contact Us</a>
</li>
<button class="md:w-auto w-full bg-transparent text-white font-[Poppins] duration-500 px-6 py-2 hover:bg-white hover:text-gray-800 border border-white border-dotted rounded-lg">
Log In
</button>
<button class="md:w-auto w-full bg-yellow-500 text-white font-[Poppins] duration-500 px-6 py-2 md:mx-4 hover:bg-yellow-600 rounded-lg">
Sign In
</button>
</ul>
<ul class="nav-elemnts">
<li class="nav-element">
<a href="#" class="nav-link">Home</a>
</li>
<li class="nav-element">
<a href="#" class="nav-link">About Us</a>
</li>
<li class="nav-element">
<a href="#" class="nav-link">Services</a>
</li>
<li class="nav-element">
<a href="#" class="nav-link">Contact Us</a>
</li>
<button class="button-login">
Log In
</button>
<button class="button-signin">
Sign In
</button>
</ul>