CSS import order angular
I am looking at the example project for angular: https://github.com/keenthemes/metronic-tailwind-html-integration/blob/main/metronic-tailwind-angular/angular.json
Here the "src/assets/css/styles.css" is imported last. It should therefore overwrite classes with the same name of imports before this. (tailwind color class e.g.)
Here my issue: If I define common classes in "src/tailwind.css", these should be overwritten by "src/assets/css/styles.css" ? (I dont want this)
To use tailwind I need @import "tailwindcss" though. Otherwise I cant use something like "@apply text-gray-400".
So this makes it kind of impossible to load the css in this order:
- tailwind.css
- styles.css
- custom css file (with tailwind syntax)
How is this supposed to work?
Replies (3)
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 */
}If you prefer managing imports in one place, import your custom CSS in styles.scss
