CSS import order angular

The key is to control Tailwind’s CSS layers and avoid relying solely on Angular’s stylesheet import order. Using @layer for custom rules can give you more predictable precedence while still allowing @apply to work as intended.

For anyone interested in related financial planning, these tax resources may also be useful.

The issue is mainly about CSS cascade order and how Tailwind’s generated utilities interact with imported styles. One approach is to keep Tailwind source definitions separate from the final compiled CSS and use explicit layers or specificity rather than relying only on import order. That can make the intended precedence much easier to maintain as the Angular project grows. This guide may also provide useful context for organizing a separate topic: professional tax and accounting services.

Hi

Yes, that order is correct. Configure it in angular.json:
"styles": [
"src/tailwind.css",
"src/assets/css/styles.css",
"src/custom.css"
]

Thank you for your sharing

Thanks!

Just to clarify:

The proper import order is this:

tailwind.css (tailwind classes etc)
src/assets/css/styles.css (metronic styling)
custom.css (my own styling, overwriting both if conflicting)

Hi

With Tailwind CSS v4, use the @reference directive in your custom CSS file. When @apply without importing Tailwind, so you can control the load order.

/* src/custom.css */

@reference "../tailwind.css";



/* Now you can use @apply without importing Tailwind again */

@layer utilities {

  .custom-text {

    @apply text-gray-400;

  }

}



/* Regular CSS that will override styles.css */

.my-override-class {

  color: blue;

  /* This will override any conflicting classes from styles.css */

}