Angular 中的 TailwindCSS：@tailwind 与 @import

Question

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

在我的

styles.scss

中，我使用官方文档中所述的

@tailwind

指令导入了Tailwind样式，但是当我在延迟加载的模块上显示组件时，样式没有被应用，我通过导入来修复每个组件自己的样式表再次顺风。

如果我将

@tailwind

更改为

@import 'tailwindcss/...'

上的

styles.scss

，那么一切都会按预期进行。

有人可以向我解释

@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) }

Answer 2

@import 'tailwind/base';

实际上是一个小文件，然后可以为您执行

@tailwind base;

。它存在的原因是您可以将导入与

@tailwind

混合使用：导入必须全部位于顶部/第一个，因此您不能稍后再使用

@tailwind

和

@import

。

所以这是错误的：

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

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

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

但这有效：

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

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

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

这在此处的文档中进行了解释。