CODEWITHSUNDEEP
cssangulartailwind-css
user6791921
user6791921

Reputation:

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.

Upvotes: 10

Views: 21647

Answers (10)

Fahad
Fahad

Reputation: 378

For me this solution worked: First, add this in your style.css:

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

then add is in angular.json wherever src/styles.css is written, like this:

"styles": [
   "src/styles.css",
    "node_modules/tailwindcss/base.css",
    "node_modules/tailwindcss/components.css",
    "node_modules/tailwindcss/utilities.css"
  ],

I found this solution in this article.

Upvotes: 0

Sajith Madushanka
Sajith Madushanka

Reputation: 39

I spent long time with this issue, finally founded stop your running app and run again: ng serve then tailwind will applied properly, as documentation of tailwindcss

Upvotes: 2

Wissam Al Shohof
Wissam Al Shohof

Reputation: 41

I faced this problem too, when generating new Angular project the global style.scss will contain /* You can add global styles to this file, and also import other style files */ make sure to add @tailwind base; @tailwind components; @tailwind utilities; above this comment otherwise it will not work.

Upvotes: 0

Abhisek Mohanty
Abhisek Mohanty

Reputation: 37

The solution is quite simple. Just set important: true in tailwind.confing.js which will treat all the utilities as higher precedence.

check out at tailwindcss

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

Upvotes: -2

Do Cao Huynh
Do Cao Huynh

Reputation: 111

Angular 14 Try tailwind.config.js like this

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

Upvotes: 11

Dragan Podvezanec
Dragan Podvezanec

Reputation: 11

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%.

Upvotes: 1

augustino
augustino

Reputation: 559

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

Upvotes: 31

SparkB
SparkB

Reputation: 11

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.

Upvotes: 1

Maksat Rahmanov
Maksat Rahmanov

Reputation: 702

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

Upvotes: 0

user6791921
user6791921

Reputation:

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.

Upvotes: 1

Related Questions