CODEWITHSUNDEEP
javascriptangularwebpacktailwind-css
Rye
Rye

Reputation: 485

Tailwindcss 2 style is not working in Angular 11

I am trying out Tailwindcss to a new Angular 11 project. I have the following dev packages installed.

NOTE: Removed other packages for simplicity
"@angular-builders/custom-webpack": "^10.0.1",
"@angular-devkit/build-angular": "~0.1100.2",
"@angular/cli": "~11.0.2",
"@angular/compiler-cli": "~11.0.1",
"autoprefixer": "^10.0.2",
"postcss-import": "^13.0.0",
"postcss-loader": "^4.1.0",
"postcss-scss": "^3.0.4",
"tailwindcss": "^2.0.1",

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.scss$/,
        loader: 'postcss-loader',
        options: {
          postcssOptions: {
            ident: 'postcss',
            syntax: 'postcss-scss',
            plugins: () => [
              require('postcss-import'),
              require('tailwindcss'),
              require('autoprefixer')
            ]
          }
        }
      }
    ]
  }
}

style.scss

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

angular.json

"builder": "@angular-builders/custom-webpack:browser", //dev-server
"customWebpackConfig": { "path": "webpack.config.js" }

I added this code to app.component.html but it seems like it does not recognize the styles.

...... some codes not included
<div class="px-6 pb-4 space-x-2">
    <a href="https://angular.io" target="_blank" rel="noreferrer"
      class="inline-block bg-red-500 rounded-full px-3 py-1 text-sm font-semibold text-white hover:bg-red-700">
      #angular
    </a>
    <a href="https://tailwindcss.com" target="_blank" rel="noreferrer"
      class="inline-block bg-indigo-500 rounded-full px-3 py-1 text-sm font-semibold text-white hover:bg-indigo-700">
      #tailwind
    </a>
    <a href="https://notiz.dev" target="_blank" rel="noreferrer"
      class="inline-block bg-blue-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 hover:bg-blue-400">
      #notiz
    </a>
  </div>

Upvotes: 6

Views: 7809

Answers (3)

Ravinder Payal
Ravinder Payal

Reputation: 3031

The ngneat/tailwind thing doesn't work for Angular v11.2.0 and above. Webpack won't load the tailwind and hence styles won't be applied. It kind of cumulatively wasted our team's 12+ hours, becasue in npm angular version was set to "~11.2.0" and one of team member had local cache for "11.1.x", and hence the lower version was picked by npm and ngneat based setup was working, giving a false impression that ng neat works for 11.2.0 and problem is with our own setup.

After this ordeal, the idea of confirming "the actual package version installed" got re-enforced.

Install with npm install -D tailwindcss

Install TailwindCSS plugins(Optional):

npm i @tailwindcss/typography

npm i @tailwindcss/forms

Some people are running older versions of the CLI or the @angular-devkit/build-angular. Make sure your package.json looks AT LEAST with version 11.2.0this or have a more recent versions (if available)

Create a TailwindCSS configuration file in the workspace or project root. Name that configuration file tailwind.config.js It should look like this:

module.exports = {
    prefix: '',
    purge: {
      content: [
        './src/**/*.{html,ts}',
      ]
    },
    darkMode: 'class', // or 'media' or 'class'
    theme: {
      extend: {},
    },
    variants: {
      extend: {},
    },
    plugins: [require('@tailwindcss/forms'),require('@tailwindcss/typography')],
};

In your styles.scss file add the following TailwindCSS imports

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

If you are using CSS[.css] instead of SCSS[.scss], your file should look like this:

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

I took this from an amazing piece by this person here:

https://dev.to/angular/setup-tailwindcss-in-angular-the-easy-way-1i5l

Upvotes: 2

Jorge Valvert
Jorge Valvert

Reputation: 986

For Angular 11+ , the problem is postcss is not able to find the tailwind.config.js file.

To solve the issue (Not documented in Tailwind's official docs):

  1. Add a new file called postcss.config.js (src)

  2. Include the following lines:

    module.exports = {
 plugins: {
   tailwindcss: { config: './src/tailwind.config.js' },
   autoprefixer: {},
 },

    }

Upvotes: 0

ramon22
ramon22

Reputation: 3618

You could update to beta version @angular-builders/custom-webpack. It has new changes in your angular.json the section customWebpackConfig should now be like so

 "customWebpackConfig": {
      "path": "./webpack.config.js",
      "mergeRules": {
           "module": {
              "rules": "append"
            }
      }
  }

The webpack.config.js your loaders should be like

let sass;
try {
  sass= require('node-sass');
} catch {
  sass= require('sass');
}

module.exports = {
  node: {
    fs: 'empty'
  },
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                ident: 'postcss',
                syntax: 'postcss-scss',
                plugins: [
                  "postcss-import",
                  "tailwindcss",
                  "autoprefixer"
                ]
              }
            }
          },
          {
            loader: 'sass-loader',
            options: {
              implementation: sass,
              sourceMap: false,
              sassOptions: {
                precision: 8
              }
            }
          }
        ]
      }
    ]
  }
};

You could read more about this on angular-builders

also the packages you will need

  • "postcss": "^8.2.1"
  • "postcss-import": "^14.0.0"
  • "postcss-loader": "^4.1.0"
  • "postcss-scss": "^3.0.4"
  • "tailwindcss": "^2.0.2"
  • "autoprefixer": "^10.1.0"
  • "@angular-builders/custom-webpack": "^11.0.0-beta.4"

Upvotes: 5

Related Questions