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

Question

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!

facing the same issue, I have a content property in the config file. — Shweta, Mar 30 '22 at 08:40
In my case, it was just a silly mistake in my content path in the tailwind.config.js. as the tailwind.config.js it was further out of the src folder. So I just wrote the full path and that fixed it. — syahiruddin, Mar 31 '22 at 10:29

score 1 · Accepted Answer · edited Jan 23 '22 at 02:56

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;

score 1 · Answer 2 · answered Mar 22 '22 at 03:28

1

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.

answered Mar 22 '22 at 03:28

Andre Ellis Jr.

11
1

score 0 · Answer 3 · answered Mar 22 '22 at 04:14

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

score 0 · Answer 4 · edited May 01 '22 at 02:26

0

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

edited May 01 '22 at 02:26

Karl Hill

12,937
5
58
95

answered Apr 30 '22 at 16:25

sudhagar murugesan

41
2

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community May 02 '22 at 04:13

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

4 Answers4