Solution 1 :

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.

Solution 2 :

have you tried doing:

<style type="text/tailwindcss">
    @layer components {
      .some-class {
        @apply px-4 py-6 md:py-0 hover:bg-yellow-500 md:hover:bg-transparent text-white duration-500;
      }
    }
</style>

Solution 3 :

You should add ‘group’ class to parent and after work with group subclasses:

<div class="group p-4">
  <p class="group-hover:bg-red-400">lorem ipsum</p>
</div>

after this code if you hover on div element, p elements backgroundColor will be change to red.

Problem :

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>

Comments

Comment posted by Hello There

I see what you are trying to tell me but the case is that i want to group the clases and then do what you are saying me. I mean, I want to have a amount of clases in a stylesheet where each class is a group af clases of Tailwind. So at the end I will have my custom clases using Tailwind. I dont know if you undertand what I am looking for, let me know if you don’t and I will try to improve the question.

Comment posted by Jakub Kotrs

That’s not what you

Comment posted by Hello There

So this is not a “problem” and if I have a long line of classes is not bad?. I am new with Tailwind, and when I start coding I thougth that this was not like “good practice” to have a pile of classes.

Comment posted by Jakub Kotrs

No, it’s not a problem. It can be an issue for maintenance if you have to maintain them manually, which is why we create small reusable components and not copy paste the classes everywhere, but the list is definitely not a problem on its own. Either you “get used” to it, or you will dislike it, so the subjective feeling plays a big part it this.

Comment posted by Hello There

Thanks for the help, now I understand better how to use Tailwind and the objective of it

Comment posted by Hello There

I try it and the vs code shows me this alert: “Unknown at rule @layercss(unknownAtRules)” and it dosn’t apply anything to the element with the class I stablish

Comment posted by joshxfi

I think he meant how to group tailwindcss classes like @apply (but on cdn), not how to use the group class

By