Custom class with Tailwind + Angular

[quijano930a]

Hello , im learning front end , im using tailwindcss i follow the rules to use it and all works perfect , now im doing an app and i notice im using the same class so i want to creat my own clases just to dont repeat i know how to do it with pure css but y dont know with tailwind

i read in internet using apply but this is not working with v4 something like that , i use this guide https://tailwindcss.com/docs/installation/framework-guides/angular works perfect

<button routerLink ="/select" class="text-white absolute bottom-3 left-3 text-sm sm:text-base md:text-lg px-3 py-1.5 rounded-xl bg-[linear-gradient(to_bottom,var(--color-linear1),var(--color-linear2))] transition duration-300 hover:scale-105">A ENTRENAR</button> </div>

and how to put this
class="text-white absolute bottom-3 left-3 text-sm sm:text-base md:text-lg px-3 py-1.5 rounded-xl bg-[linear-gradient(to_bottom,var(--color-linear1),var(--color-linear2))] transition duration-300 hover:scale-105">A

        in a class in style.css

[wongjn]

The ultimate Tailwind paradigm would be abstract the repetition as a component rather than write any custom CSS (pseudo-code since I don't know Angular):

<!-- my-button -->
<button class="text-white absolute bottom-3 left-3 text-sm sm:text-base md:text-lg px-3 py-1.5 rounded-xl   bg-[linear-gradient(to_bottom,var(--color-linear1),var(--color-linear2))] transition duration-300 hover:scale-105">
  <ng-content />
</button>

<my-button routerLink ="/select">A ENTRENAR</my-button>

However, if you still want to write custom CSS for it, you can transpose the class names to regular CSS:

@layer components {
.foo {
  color: var(--color-white); /* text-white */
  position: absolute; /* absolute */
  bottom: --spacing(3); /* bottom-3 */
  left: --spacing(3); /* left-3 */
  font-size: var(--text-sm); /* text-sm */
  line-height: var(--text-sm--line-height); /* text-sm */
  padding-inline: --spacing(3); /* px-3 */
  padding-block: --spacing(1.5); /* py-1.5 */
  border-radius: var(--radius-xl); /* rounded-xl */
  background-image: linear-gradient(to_bottom, var(--color-linear1), var(--color-linear2)); /* bg-[linear-gradient(to_bottom,var(--color-linear1),var(--color-linear2))] */
  transition-property: scale; /* transition */
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); /* transition */
  transition-duration: 300ms; /* duration-300 */

  @variant hover {
    scale: 1.05; /* hover:scale-105 */
  }

  @variant sm {
    font-size: var(--text-base); /* sm:text-base */
    line-height: var(--text-base--line-height); /* sm:text-base */
  }

  @variant md{
    font-size: var(--text-lg); /* md:text-lg */
    line-height: var(--text-lg--line-height); /* md:text-lg */
  }
}
}

<button routerLink ="/select"  class="foo">A ENTRENAR</button>

[quijano930a]

So how would a professional do it if this button is repeated in many layouts using tailwind of course?

simply repeating classes?

[wongjn]

The ultimate Tailwind paradigm would be abstract the repetition as a component rather than write any custom CSS (pseudo-code since I don't know Angular):

<!-- my-button -->
<button class="text-white absolute bottom-3 left-3 text-sm sm:text-base md:text-lg px-3 py-1.5 rounded-xl   bg-[linear-gradient(to_bottom,var(--color-linear1),var(--color-linear2))] transition duration-300 hover:scale-105">
  <ng-content />
</button>

<my-button routerLink ="/select">A ENTRENAR</my-button>

[quijano930a]

you are the best , thank you for open my eyes

[rozsazoltan]

Just related:

• From v4 the reset style cannot be overridden by TailwindCSS classes