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
contentin the config file topurge(using content and setting enabled to true. Didn't work) - Removing angular material css imports. (Didn't work)
- Changing the config
contentto include everything ('./**/*.{html,ts}'- didn't work) - Changing the config
contentto 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!