Tailwindcss 版本 3 类不适用于 class 属性，但适用于 @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!

Answer 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.

Answer 2

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;

Answer 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

Answer 4

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