0

In an angular app (^13.*), I've installed and initialized tailwindcss via

> npm install -D tailwindcss postcss autoprefixer
> npx tailwindcss init

as per their own documentation.

At first, I had issues with the default mobile-first classes (like: p-2 mb-3 etc.), that they have always overwritten other media queries, for example, if I had a p-2 md:p-3, in the browser devtools, I would always see the md:p-3 crossed out, regardless of screen width.

So I thought that it might have to with specificity so in tailwind.config.js I set the important property to true

module.exports = {
   important: true,
   ...
}

Although that solved the media query issue, now I have an issue with border for example, if I have border border-blue-500, the original border would overwrite the border color since border has a default color of #dee2e6 so border-blue-500 would have no effect at all.

I assume it has to do with the order in which tailwindcss applies the css classes.

I tried to reinstall tailwindcss but was no help.

Any help is appreciated.

Israel Neuman
  • 1
  • 1
  • Does this answer your question? [How to resolve Tailwind and Bootstrap conflicts in an Angular project](https://stackoverflow.com/questions/71718228/how-to-resolve-tailwind-and-bootstrap-conflicts-in-an-angular-project) – dhanushkac Nov 16 '22 at 19:33

1 Answers1

0

Apparently the cause of this issue was due to some default styling imported in styles.scss that overwrote tailwindcss classes, by removing that specific import, the issue was resolved.

I might have broken a lot more things now, but to answer this question, this was the solution

Israel Neuman
  • 1
  • 1
  • To resolve issue with conflicts it's good practice to use a prefix for all your angular classes [check out this answer for reference](https://stackoverflow.com/a/72580574/20501520) – Israel Neuman Nov 14 '22 at 15:35