0

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>

1 respuesta 1

1

He realizado la misma pregunta en SO Inglés, y ya me han respondido. La cosa es que Tailwind no está pensado para agrupar las clases de por sí. Si que es verdad que te dan la facilidad de ello mediante el "@apply" como menciono en la pregunta pero si se agrupa todo se vuelve otra vez al uso normal del css, es decir: tener que inventar nombres de clase, administrar selectores, etc. Tailwind está ahí para que no tengas que hacer eso. Os dejo el link de la pregunta con su respuesta y os recomiendo leeros los comentarios de Jakub Kotrs ya que os resolvera la misma duda que tenía yo

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.