'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!

cssangularsasstailwind-cssscss-mixins


Solution 1:[1]

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;

Solution 2:[2]

That's it right there. Make sure the content is correct in your tailwind config file. When I updated this, turns out a new folder I created wasn't included in the config so tailwind couldn't read it.

Solution 3:[3]

You must be configure your template paths, add the paths to all of your template files in your tailwind.config.js file.

  module.exports = {
  content: [
    "./src/**/*.{html,ts}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

You can learn how to connect angular and tailwind css with the link below:

https://tailwindcss.com/docs/guides/angular

Solution 4:[4]

Using Angular materials typography will override your Tailwind CSS style, so remove using the material typography and check your it will run fine.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Dharman
Solution 2 Andre Ellis Jr.
Solution 3 Muhammad Gata
Solution 4 Karl Hill

Related Questions