Angular 中的 TailwindCSS：@tailwind 与 @import

Question

我正在为项目使用 Angular 13.1（使用 SASS）+ TailwindCss 3.0.7，发现一个奇怪的行为。

在我的 styles.scss 中，我按照官方文档中的 @tailwind 指令导入了 Tailwind 样式，但是当我在延迟加载的模块上显示组件时，样式不是正在应用，我通过在每个组件自己的样式表上再次导入 tailwind 来修复它。

如果我在 styles.scss 上将 @tailwind 更改为 @import 'tailwindcss/...'，那么一切都会按预期进行。

有人可以向我解释 @tailwind 和 @import 之间的区别以了解发生了什么吗？我是 CSS 预处理器的新手...

按预期工作

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

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

h6 {
    @apply text-xl;
}

fa-icon {
    @apply p-1;
}

不工作

@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

我只是在做一个新项目，偶然发现了这个。它对我有用，我注意到你的 config.content[] 有所不同：你的 html,js，我的 html,ts:

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

可能是因为文件被导入 app-routing.module.ts:


loadChildren: () => import('./cv-generator/cv-generator.module').then(m => m.CvGeneratorModule) }

Angular 中的 TailwindCSS：@tailwind 与 @import

TailwindCSS in Angular: @tailwind vs @import

sass

angular

tailwind-css