Reputation: 1326
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: {},
},
};
content
in the config file to purge
(using content and setting enabled to true. Didn't work)content
to include everything ('./**/*.{html,ts}'
- didn't work)content
to include specific files ('./src/app/app.component.{html,ts}'
- didn't work)npx tailwindcss -o /output.css
(Works fine.)Any Ideas about what I might be doing wrong? Thanks all!
Upvotes: 3
Views: 2381
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