TailwindCSS in Angular: @tailwind vs @import

Question

i´m using Angular 13.1 (With SASS) + TailwindCss 3.0.7 for a project and found a strange behaviour.

In my styles.scss I imported the Tailwind styles with the @tailwind directive as stated on the official docs, but then when I display a component on a lazy-loaded module the styles weren´t being applied, which i fixed by importing tailwind again on each component own stylesheet.

If I change the @tailwind for @import 'tailwindcss/...' on the styles.scss then everything works as expected.

Can someone explain me the difference between @tailwind and the @import to understand what´s happening? I´m a newbie on CSS preprocessors...

Working as expected

@import 'tailwind/base';
@import 'tailwind/components';
@import 'tailwind/utilities';

html, body {
    height: 100%;
    width: 100%;
}

h6 {
    @apply text-xl;
}

fa-icon {
    @apply p-1;
}

Not working

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

html, body {
    height: 100%;
    width: 100%;
}

h6 {
    @apply text-xl;
}

fa-icon {
    @apply p-1;
}

tailwind.config.js

module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [
    require("@tailwindcss/forms"),
    require("@tailwindcss/typography"),
    require("daisyui")
  ],
  daisyui: {
    themes: [
      "bumblebee",
    ],
  },
};

Answer 1

@import 'tailwind/base'; is in fact a small file which then does @tailwind base; for you. The reason it exists is that you can mix imports with @tailwind: imports have to all be at the top/first so you cannot have @tailwind and an @import later on.

So this is wrong:

@tailwind base;
@import "./custom-base-styles.css";

@tailwind components;
@import "./custom-components.css";

@tailwind utilities;
@import "./custom-utilities.css";

But this works:

@import "tailwindcss/base";
@import "./custom-base-styles.css";

@import "tailwindcss/components";
@import "./custom-components.css";

@import "tailwindcss/utilities";
@import "./custom-utilities.css";

This is explained in documentation here.