View Encapsulation in Angular has potential to overthrow Tailwind CSS.

Have you ever wanted to isolate your styles but not fully crowd the Javascript DOM with unwanted styles.

Well let’s do a deep drive into what makes View Encapsulation a threat to Tailwind CSS in 2023.

I am no CSS or SCSS genius but I love me some good old Stylesheets.

When tailwind CSS first became popular I was all in. I enjoyed every bit but I would say Angular still has the upper hand in the battle for my attention.

What is View Encapsulation?

Every component made in Angular has the ability to modify and control how encapsulation is applied. Meaning styles can either affect the global application if selected or not.

What are some types of View Encapsulation?

There are many types of View Encapsulation, we will define a few.

The first is ViewEncapsulation.ShadowDom which handles rendering styles based on a built-in Shadow DOM API only native to a browser with Shadow DOM available. The shadow DOM host will make sure styles are not available outside shadow DOM.

The second is ViewEncapsulation.Emulated which does not affect other elements in the application and are only applied to…