Tailwindcss version 3 classes not working on class attributes, but works on @apply for Angular 13

I'm unable to get Tailwindcss classes to appear on the inline "class" attribute. But if I @apply I through the ".scss" file and use that class on the inline "class" attribute it works fine.

Does not work:

.HTML

<!-- Tailwindcss NOT working -->
<div class="bg-red-500">
    <h1 class="text-9xl">HELLO</h1>
</div>

Work: .scss

.bg {
     @apply bg-green-500;
   }

.text {
      @apply text-9xl text-red-500;
    }

.HTML

<!-- Tailwindcss working -->
    <div class="bg-red-500">
        <h1 class="text-9xl">HELLO</h1>
    </div>

Am I missing something? Appreciate the help in advance!

Thanks!

There are a few things you need to try here:

Firstly, make sure that your content settings are correct in your config file:

// tailwind.config.js

module.exports = {
  content: ["./src/**/*.{html}"], //configure this line as you see fit
  theme: {
    extend: {},
  },
  plugins: [],
}

Double-check that the aforementioned line is content, not purge

If that's set up correctly, let's make sure you are properly importing tailwind. In your CSS file, add these rules to the top, and make sure that the CSS file is being properly:

/* .src/styles.css */

@tailwind base;
@tailwind components;
@tailwind utilities;