nx: Angular 11.2.0 project with TailwindCSS not working with Nx Workspace

Had the same problem. As a workaround, you can create a postcss.config.js in you app folder with the following content:

module.exports = {
  plugins: {
    tailwindcss: { config: 'apps/<app-name>/tailwind.config.js' },
    autoprefixer: {},
  },
}

Following changes in tailwind.config.js worked for me for every app in the mono repo:

module.exports = {
    purge: {
        content: [
            './apps/**/src/**/*.{html,ts}',
            './libs/**/*.html'
        ]
    },
}

This seems to be caused by different versions of postcss being installed. I was able to fix the issue using yarn by adding "postcss": "8.2.4" to the resolutions in the package.json file.

@bjornharvold I was looking at this issue and tried to follow the reproduction steps you mentioned and those steps didn’t work for me.

In a brand new Angular CLI 11.2.8 project, if I run (as in those steps):

• yarn add -D tailwindcss;
• npx tailwindcss init;

I get the following error:

❯ npx tailwindcss init
Cannot find module 'autoprefixer'
Require stack:
- /Users/leosvel/code/issues/bar/node_modules/tailwindcss/lib/cli/commands/build.js
- /Users/leosvel/code/issues/bar/node_modules/tailwindcss/lib/cli/commands/index.js
- /Users/leosvel/code/issues/bar/node_modules/tailwindcss/lib/cli/main.js
- /Users/leosvel/code/issues/bar/node_modules/tailwindcss/lib/cli.js

tailwindcss has postcss and autoprefixer as peer dependencies and as such we need to install them as well in the project. The official TailwindCSS docs don’t have an installation section for Angular, but looking at the Vue one you can see you should install those 2 packages as well. By doing so, I was able to properly initialize TailwindCSS, migrate to Nx and everything was working fine as you can see in this repo https://github.com/leosvelperez/tailwind-nx (it’s using Nx 11.2.12 as the original post in this issue). The master branch has everything with npm and I have another branch there with yarn just to make sure everything was working fine in both, there are some difference in regards to resolution, so with npm I didn’t need to add postcss and autoprefixer and everything still works. Both branches have atomic commits so you can see step by step what I did there, maybe we’re doing some things differently.

I also “reverted” the Nx migration changes in the repo you shared just to make sure I was not doing anything different and I still had the issue regarding TailwindCSS initialization, which was solved by adding the needed deps and from that point on everything works (including the migration to Nx workspace). You can see the modified reproduction here: tailwind.zip with only the tailwindcss package added and before running the initialization.

Closing this one as per above comment. If you think this is still an issue, please feel free to reopen it.

and for people who are using @angular-builders/custom-webpack I also had to add:

...
"resolutions": {
    "postcss": "8.2.8",
    "@angular-devkit/architect": "0.1102.4",
    "@angular-devkit/build-angular": "0.1102.4",
    "@angular/core": "11.2.5"
  }
...

because @angular-builders/custom-webpack is using an internal dependencies (and not peerDependencies) and it is not yet up to date with the last version