Tailwindcss 2 style is not working in Angular 11

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"

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

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: {}, }, 

   }