CSS doesn't work when classes are applied directly in HTML

Issue

I'm running NX workspace with multiple apps in it as a monorepo. Recently I installed I've installed "tailwindcss": "^3.0.2". Here are my configs:

1. Package.json with dev dependencies

2. tailwind.config.js configured

Issues facing:

1. In SCSS file where I'm using button mixins by applying tailwind classes & re-using my own custom button classes (Works)

2. Tailwind lib classes applied directly in HTML file for ex: "container mx-auto", "uppercase" (Doesn't work as styles are not applied)

Am Not sure why when tailwind lib classes when applied directly on html classes are not working where as when applied through scss files are working. Any idea?

Solution

The problem is with the path to the source files (content) which tailwind is unable to find. You need to modify content in your tailwind.config.js to following:

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

Answered By - Faisal