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.