Tailwind does not build classes in Angular 13 production

Question

I'm having trouble getting Tailwind to work when building in production. I followed the Angular guide and tailwind works fine when serving but when building the app it doesn't recognize any of the classes from HTML files and therefore doesn't include them in the build

When building I get this message: warn - No utility classes were detected in your source files. If this is unexpected, double-check the content option in your Tailwind CSS configuration.

versions:

• Angular CLI: 13.3.2
• Angular: 13.3.2
• Node: 16.15.0
• Package Manager: npm 7.10.0
• OS: win32 x64
• Tailwind: 3.0.24

tailwind.config.js looks like this:

module.exports = {
  content: ['./src/**/*.html'],
  theme: {
    extend: {},
  },
  plugins: [],
};

tailwind imports are at the top of styles.scss like so:

/* You can add global styles to this file, and also import other style files */
@tailwind base;
@tailwind components;
@tailwind utilities;

I also created a Postcss config file because I wasn't sure how Angular compiled under the hood and if it was necessary or not.

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

Things I have tried

• Going back to Tailwind 2 and changing content in the config file to purge (using content and setting enabled to true. Didn't work)
• Removing angular material css imports. (Didn't work)
• Changing the config content to include everything ('./**/*.{html,ts}' - didn't work)
• Changing the config content to include specific files ('./src/app/app.component.{html,ts}' - didn't work)
• Adding safelist classes (Works, but I don't want to do that.)
• Use CLI npx tailwindcss -o /output.css (Works fine.)

Any Ideas about what I might be doing wrong? Thanks all!

Answer 1

I was able to figure this out. I calling ng build from a build script that I had in the dist folder. The content path in tailwind.config.js doesn't look from the root of the project, it looks for files from the root of wherever the command is called from.

So in order to target /src/app/* I had to go up one level like so: ../src/**/*.html