Many Tailwind CSS classes do not work on my Angular 12 project

Question

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.

Answer 1

For some reason, in my styles.scss, I had to import the variables as follows

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

instead of

@tailwind base;
@tailwind components;
@tailwind utilities;

reload and it worked. Angular version 14.1.0, Tailwindcss version 3.1.7