Many Tailwind CSS classes doesn´t 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

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

Answer 2

Check out this tutorial: https://medium.com/tunaiku-tech/angular-11-tailwindcss-2-0-blazing-fast-cfa20ae3a5e9 . In that tutorial, TailwindCSS version 2 is used. If you want TailwindCSS version 3, then kindly change the configuration file to match the TailwindCSS version 3 config file. By setting up the angular project as mentioned in the above tutorial TailwindCSS version 3 is working fine.

Answer 3

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

Answer 4

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.

Answer 5

This also happened to me. I checked my tailwind.config.js many times, and

content: [    
"../src/**/*.html"
]

...should be enough.But for some reason unknown to me, it just doesn't rebuild on adding new classes. So, same as you, I didn't see new classes in built CSS files. I almost gave up, but in the end here is my workaround:

src/tailwind.scss:

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

New script in package.json, called "tailwind" - it watches for changes in your HTML and rebuilds your css.

postcss.config.js:

module.exports = {
plugins: {
    tailwindcss: {},
    autoprefixer: {},
    }
}

Also installed npm-run-all, so I can on "npm run start" serve and watch tailwind for changes:

"scripts": {
"ng": "nx",
"serve": "ng serve --configuration=dev",
"start": "npm-run-all --parallel serve tailwind",    
"tailwind": "npx tailwindcss --postcss -i ./src/tailwind.scss -o ./src/app/scss/tailwind.css --watch"
 }

angular.json:

"styles": [
            "src/app/scss/tailwind.css"
          ]

And there you go. You will serve and rebuild CSS whenever new classes are added to your HTML files. I know it's a workaround, but at least it works 100%.

Answer 6

Angular 14 Try tailwind.config.js like this

/** @type {import('tailwindcss').Config} */
  module.exports = {
  content: ['./src/**/*.{html,ts}', './projects/**/*.{html,ts}'],
  theme: {
    extend: {},
  },
  plugins: [],
 }