title: TailwindCSS in Angular: @tailwind vs @import
body: <p>i´m using Angular 13.1 (With SASS) + TailwindCss 3.0.7 for a project and found a strange behaviour.</p>
  <p>In my <code>styles.scss</code> I imported the Tailwind styles with the <code>@tailwind</code> 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.</p>
  <p>If I change the <code>@tailwind</code> for <code>@import 'tailwindcss/...'</code> on the <code>styles.scss</code> then everything works as expected.</p>
  <p>Can someone explain me the difference between <code>@tailwind</code> and the <code>@import</code> to understand what´s happening? I´m a newbie on CSS preprocessors...</p>
  <p><strong>Working as expected</strong></p>
  <pre><code>@import 'tailwind/base';
  @import 'tailwind/components';
  @import 'tailwind/utilities';
  
  html, body {
      height: 100%;
      width: 100%;
  }
  
  h6 {
      @apply text-xl;
  }
  
  fa-icon {
      @apply p-1;
  }
  </code></pre>
  <p><strong>Not working</strong></p>
  <pre><code>@tailwind base;
  @tailwind components;
  @tailwind utilities;
  
  html, body {
      height: 100%;
      width: 100%;
  }
  
  h6 {
      @apply text-xl;
  }
  
  fa-icon {
      @apply p-1;
  }
  </code></pre>
  <p><strong>tailwind.config.js</strong></p>
  <pre><code>module.exports = {
    content: [&quot;./src/**/*.{html,js}&quot;],
    theme: {
      extend: {},
    },
    plugins: [
      require(&quot;@tailwindcss/forms&quot;),
      require(&quot;@tailwindcss/typography&quot;),
      require(&quot;daisyui&quot;)
    ],
    daisyui: {
      themes: [
        &quot;bumblebee&quot;,
      ],
    },
  };
  </code></pre>