Tailwind style not applied with Angular 13

user_12764533 0
Viewed 764

Hi everyone I was trying to implement Tailwind in angular, I installed tailwindcss post css and autoprefixer


{
  "name": "ip-tracker",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~13.0.0",
    "@angular/common": "~13.0.0",
    "@angular/compiler": "~13.0.0",
    "@angular/core": "~13.0.0",
    "@angular/forms": "~13.0.0",
    "@angular/platform-browser": "~13.0.0",
    "@angular/platform-browser-dynamic": "~13.0.0",
    "@angular/router": "~13.0.0",
    "leaflet": "^1.7.1",
    "rxjs": "~7.4.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~13.0.1",
    "@angular/cli": "~13.0.1",
    "@angular/compiler-cli": "~13.0.0",
    "@types/jasmine": "~3.10.0",
    "@types/node": "^12.11.1",
    "autoprefixer": "^10.4.2",
    "jasmine-core": "~3.10.0",
    "karma": "~6.3.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.0.3",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "~1.7.0",
    "postcss": "^8.4.6",
    "tailwindcss": "^2.1.2",
    "typescript": "~4.4.3"
  }
}

and I imported the styles in the style.scss file:

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

and here is my tailwind.config.js file:

module.exports = {
  mode: "jit",
  purge: {
    enabled: true,
    content: ["./src/**/*.{html,ts}"],
  },
  darkMode: false,
  theme: {
    extend: {},
    screens: {
      sm: "375px",
      lg: "1440px",
    },
    colors: {
      "very-dark-grey": "hsl(0, 0%, 17%)",
      "dark-grey": "hsl(0, 0%, 59%)",
    },
    fontFamily: {
      sans: ["Rubik", "sans-serif"],
    },
  },
  plugins: [
    require("postcss-import"),
    require("tailwindcss"),
    require("autoprefixer"),
  ],
};

but when I use one of the tailwind classes I don't see the style applied to the elements:


<h1 class="text-white">Test</h1>

Can anyone tell me where am I wrong and why?

Thanks so much...

tailwind-css angular typescript css styles
2 Answers

I can't able to figure out the issue. But I tried with the same configuration that you posted above in my tailwind.config.js file. It works fine for me.

My tailwind.config.js file

module.exports =[ {
  mode: "jit",
  purge: {
    enabled: true,
    content: ["./src/**/*.{html,ts}"],
  },
  darkMode: false,
  theme: {
    extend: {},
    screens: {
      sm: "375px",
      lg: "1440px",
    },
    colors: {
      "very-dark-grey": "hsl(0, 0%, 17%)",
      "dark-grey": "hsl(0, 0%, 59%)",
    },
    fontFamily: {
      sans: ["Rubik", "sans-serif"],
    },
  },
  plugins: [
    require("postcss-import"),
    require("tailwindcss"),
    require("autoprefixer"),
  ]
}]

My Package.json file

{
  "name": "tailwind-app",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~13.0.0",
    "@angular/common": "~13.0.0",
    "@angular/compiler": "~13.0.0",
    "@angular/core": "~13.0.0",
    "@angular/forms": "~13.0.0",
    "@angular/platform-browser": "~13.0.0",
    "@angular/platform-browser-dynamic": "~13.0.0",
    "@angular/router": "~13.0.0",
    "rxjs": "~7.4.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~13.0.0",
    "@angular/cli": "~13.0.0",
    "@angular/compiler-cli": "~13.0.0",
    "@types/jasmine": "~3.10.0",
    "@types/node": "^12.11.1",
    "autoprefixer": "^10.4.2",
    "jasmine-core": "~3.10.0",
    "karma": "~6.3.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.0.3",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "~1.7.0",
    "postcss": "^8.4.6",
    "tailwindcss": "^2.1.2",
    "typescript": "~4.4.3"
  }
}

styles.css

enter image description here

My app.component.html

enter image description here

Output

enter image description here

user_150694740

To create custom styles, in tailwind.config.js extend object must be added to theme. Inside extend a colors object is added, where its key-value is the name of the custom color and its corresponding value

...
theme: {
    extend: {
        colors: {
            "very-dark-grey": "hsl(0, 0%, 17%)",
            "dark-grey": "hsl(0, 0%, 59%)",
        },
    },
...
user_192436540
Related