Tailwind css mobile first overwrites other media queries and classes

Question

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.

Answer 1

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

Answer 2

Just wanted to add in that the actual fix for me was adding what you had Israel. By adding in the important: true into the module.exports of the tailwind.config.js file, my styling issues were fixed.

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