How to group clases in CSS - Tailwind

I am trying to group clases so the code will be cleaner and legible. In the documentation of Tailwind it talks about "@apply", that can be used for this objective but I am using the CDN and therefore this is not working for me. So my question is, ¿Is there any form I can accomplish what I am looking for? Maybe by using SASS/SCSS or LESS?

Here is an example of what I wnat:

<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>

Solution

Tailwind encourages you to use components. Instead of copy pasting the classes all over the place, you should use a system that allows you to create and use components.

Since your question is HTML + CSS only, you don't really have the right tools for this. But if you were using a scripting language like JS, Python, PHP etc., you could create components from elements and reuse them. Since I am familiar with React framework, I can show an example of that:

function NavElement(props) {
  return (
    <li class="px-4 py-6 md:py-0 hover:bg-yellow-500 md:hover:bg-transparent text-white duration-500">
      <a href={props.href} class="text-x1 md:hover:text-yellow-300 duration-500">{props.children}</a>
    </li>
  )
}

and then use it as

function NavElements() {
  return (
    <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">
      <NavElement href="/">Home</NavElement>
      <NavElement href="/services">Services</NavElement>
      <NavElement href="/about-us">About us</NavElement>
    </ul>
  )
}

As you can see, with this approach, you extract the huge list of modifiers into a small component that you can use multiple times without much repetition in the code.

You are free to choose any tool, language, system that will enable making components. That is what Tailwind kind of expects you to do.