title: How to group clases in CSS - Tailwind
body: <p>I am trying to group clases so the code will be cleaner and legible. In the <a href="https://v2.tailwindcss.com/docs/functions-and-directives#apply" rel="nofollow noreferrer">documentation</a> of Tailwind it talks about &quot;@apply&quot;, 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, <strong>¿Is there any form I can accomplish what I am looking for?</strong> Maybe by using SASS/SCSS or LESS?</p>
  <p>Here is an example of what I wnat:</p>
  <pre><code>&lt;ul class=&quot;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&quot;&gt;
    &lt;li class=&quot;nav-element&quot;&gt;
      &lt;a href=&quot;#&quot; class=&quot;text-x1 md:hover:text-yellow-300 duration-500&quot;&gt;Home&lt;/a&gt;
    &lt;/li&gt;
    &lt;li class=&quot;px-4 py-6 md:py-0 hover:bg-yellow-500 md:hover:bg-transparent text-white duration-500&quot;&gt;
      &lt;a href=&quot;#&quot; class=&quot;text-x1 md:hover:text-yellow-300 duration-500&quot;&gt;About Us&lt;/a&gt;
    &lt;/li&gt;
    &lt;li class=&quot;px-4 py-6 md:py-0 hover:bg-yellow-500 md:hover:bg-transparent text-white duration-500&quot;&gt;
      &lt;a href=&quot;#&quot; class=&quot;text-x1 md:hover:text-yellow-300 duration-500&quot;&gt;Services&lt;/a&gt;
    &lt;/li&gt;
    &lt;li class=&quot;px-4 py-6 md:py-0 hover:bg-yellow-500 md:hover:bg-transparent text-white duration-500&quot;&gt;
      &lt;a href=&quot;#&quot; class=&quot;text-x1 md:hover:text-yellow-300 duration-500&quot;&gt;Contact Us&lt;/a&gt;
    &lt;/li&gt;
    &lt;button class=&quot;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&quot;&gt;
      Log In
    &lt;/button&gt;
    &lt;button class=&quot;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&quot;&gt;
      Sign In
    &lt;/button&gt;
  &lt;/ul&gt;
  </code></pre>
  <hr />
  <pre><code>&lt;ul class=&quot;nav-elemnts&quot;&gt;
    &lt;li class=&quot;nav-element&quot;&gt;
      &lt;a href=&quot;#&quot; class=&quot;nav-link&quot;&gt;Home&lt;/a&gt;
    &lt;/li&gt;
    &lt;li class=&quot;nav-element&quot;&gt;
      &lt;a href=&quot;#&quot; class=&quot;nav-link&quot;&gt;About Us&lt;/a&gt;
    &lt;/li&gt;
    &lt;li class=&quot;nav-element&quot;&gt;
      &lt;a href=&quot;#&quot; class=&quot;nav-link&quot;&gt;Services&lt;/a&gt;
    &lt;/li&gt;
    &lt;li class=&quot;nav-element&quot;&gt;
      &lt;a href=&quot;#&quot; class=&quot;nav-link&quot;&gt;Contact Us&lt;/a&gt;
    &lt;/li&gt;
    &lt;button class=&quot;button-login&quot;&gt;
      Log In
    &lt;/button&gt;
    &lt;button class=&quot;button-signin&quot;&gt;
      Sign In
    &lt;/button&gt;
  &lt;/ul&gt;
  </code></pre>