mcheah
mcheah

Reputation: 1326

Tailwind does not build classes in Angular 13 production

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:

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

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

Upvotes: 3

Views: 2381

Answers (1)

mcheah
mcheah

Reputation: 1326

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

Upvotes: 3

Related Questions