Angular – TailwindCSS not working with isolated components in

To keep it simple lets say i have this scenario:

<main>
  <!-- Left Column -->
  <section>
    X
  </section>

  <!-- Right Column -->
  <section>
    Y
  </section>
</main>

Now lets imagine i want to add some TailwindCSS to main and section tags:

<main
    class="
        p-2
        gap-2
        flex
        flex-col
        items-center
        flex-auto
        min-w-0
        justify-center
        md:flex-row
    ">

  <!-- Left Column -->
  <section
        class="
            w-full
            h-full
            p-5
            bg-card
            shadow
            items-center
            justify-center
            rounded-t-xl
            rounded-b-none
            flex
            md:w-1/2
            md:h-full
            md:rounded-l-xl
            md:rounded-r-none
            sm:bg-card
        ">
    X
  </section>

  <!-- Right Column -->
  <section
        class="
            w-full
            h-full
            p-5
            shadow
            items-center
            justify-center
            rounded-b-xl
            rounded-t-none
            relative
            overflow-hidden
            bg-gray-800
            dark:border-l
            flex
            md:w-1/2
            md:h-full
            md:rounded-r-xl
            md:rounded-l-none
            sm:bg-card
            sm:p-10
        ">
    Y
  </section>
</main>

The problem is, i want multiple Auth pages to use this exact layout (login, register, forgot password, reset password, confirm email, etc), and only change content within those left and right column sections.

This structure and styles defined as they are, work completely fine. My tailwindcss has been configured correctly in the angular project.

Instead of defining these styles and structure every time in every Auth page, it is reasonable to isolate them in separate components and reuse them, right?

That’s what I did:

auth-layout-wrapper.component.html:

<main
    class="
        p-2
        gap-2
        flex
        flex-col
        items-center
        flex-auto
        min-w-0
        justify-center
        md:flex-row
    "
>
    <ng-content></ng-content>
</main>

auth-left-column-wrapper.component.html:

<section
    class="
        w-full
        h-full
        p-5
        bg-card
        shadow
        items-center
        justify-center
        rounded-t-xl
        rounded-b-none
        flex
        md:w-1/2
        md:h-full
        md:rounded-l-xl
        md:rounded-r-none
        sm:bg-card
    "
>
    <ng-content></ng-content>
</section>

auth-right-column-wrapper.component.html:

<section
    class="
        w-full
        h-full
        p-5
        shadow
        items-center
        justify-center
        rounded-b-xl
        rounded-t-none
        relative
        overflow-hidden
        bg-gray-800
        dark:border-l
        flex
        md:w-1/2
        md:h-full
        md:rounded-r-xl
        md:rounded-l-none
        sm:bg-card
        sm:p-10
    "
>
    <ng-content></ng-content>
</section>

And then in the Auth pages when i want to reuse these components i just do:

<app-auth-layout-wrapper>
  <!-- Left Column -->
  <app-auth-left-column-wrapper>
    X
  </app-auth-left-column-wrapper>
  
  <!-- Right Column -->
  <app-auth-right-column-wrapper>
    Y
  </app-auth-right-column-wrapper>
</app-auth-layout-wrapper>

However, Now the styling is completely broken. Some styles work, some don’t. Even though the structure is exactly the same, the styles are exactly the same, it’s not getting styles as it was prior to isolating to components like this.

Why?

How can i isolate common layout components and still reuse the exact same styling as if it was hardcoded in every single page that needs to use that particular styling and layout structure?

If your entire point of creating an Angular component is to avoid repeating Tailwind CSS classes that seems like you are misusing both Angular and Tailwind.

If you need to apply the same 19 classes to multiple elements to make it look correct… something is wrong. Use the Tailwind @apply feature so you don’t have to be so verbose with CSS classes.

.left-column {
  @apply p-2 gap-2 flex flex-col items-center flex-auto min-w-0 justify-center md:flex-row;
}

.right-column {
  @apply w-full h-full p-5 shadow items-center justify-center rounded-b-xl rounded-t-none relative overflow-hidden bg-gray-800 dark:border-l flex md:w-1/2 md:h-full md:rounded-r-xl md:rounded-l-none sm:bg-card sm:p-10;
}

If that can simplify your styling down to one class, now you hopefully don’t need to create angular components at all, and all your repeated styles are managed in a single place. Now you can just do this:

<main>
  <!-- Left Column -->
  <section class="left-column">
    X
  </section>

  <!-- Right Column -->
  <section class="right-column">
    Y
  </section>
</main>

Generally my rule of thumb is to only create an angular component when it actually performs a function and has logic in it. If you are creating an Angular component as a way to write less HTML/CSS, that is misusing the framework IMO. If you go to write a unit test for the component and there is nothing to test… then it should not be a component.

Leave a Comment