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

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 >

    <h2>Please go back to <a  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" >

    <h2>Please go back to <a  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.

CodePudding user response：

It seems that you've installed the latest version of tailwind with angular 12 maybe something is wrong with it? Try install tailwind v2 and see if it works. Some breaking changes could happen since tailwind v3

CodePudding user response：

Thanks to @MaksatRahmanov I found the solution. It seems the problem was I installed the latest Tailwind version (v3) with Angular 12. I switched back to v2 and everything works fine.

The only problem with it is that many things have changed between both versions (check here), so it could break many things working properly with v3.