Many Tailwind CSS classes doesn´t work on my Angular 12 project

I am developing an Angular 12 project with Tailwind CSS installed. I have followed the official docs and it seems everything works; but I can´t understand why some classes work and others not.

For example, I can have this piece of code, trying to add two Tailwind classes on my div:

<div class="text-center mt-2">

<h2>Please go back to <a class="custom-links" href="./login">login</a></h2>
</div>


And the text-center class works, but the mt-2 doesn´t. This kind of things is happening on the whole project. The way I had to solve it is using traditional CSS or mixing it with Tailwind, like this:

<div id="back-to-login" class="text-center">

<h2>Please go back to <a class="custom-links" href="./login">login</a></h2>
</div>


And on the css:

#back-to-login{

margin-top: 40px;

}


Then it works fine and the margin-top is applied.

Do you know what could be happening?

Reinstalling node_modules like suggested here doesn´t solve it.

Thanks a lot.

I add the code of the styles.css and tailwind.config

styles.css

/* You can add global styles to this file, and also import other style files */
@tailwind base;
@tailwind components;
@tailwind utilities;

@font-face {
font-family: "firechat";
src: url(./assets/fonts/blazed/Blazed.ttf);
}

/*
to change the default h1 styles on tailwind

https://tailwindcss.com/docs/preflight#extending-preflight

*/
@layer base {
h1 {
@apply text-6xl;
}
}

/*tailwind and own styles*/

#firechat-font{
font-family: "firechat";
color:red;
}

.custom-links{
color:red;
font-weight: bold;
}


Tailwind config file:

module.exports = {
content: [
"./src/**/*.{html,ts}"
],
theme: {
extend: {},
},
plugins: [],
}


EDIT: What I am seeing now is that for example mt-2 applies and appear on devTools (maybe problem was it was to small change to notice, my fault), but a bigger margin like mt-4 or mt-6 doesn´t. It happened also with other properties.

Continue reading...