文章/答案/技术大牛

发布

社区首页 >问答首页 >角中的TailwindCSS：“顺风”与“导入”

问角中的TailwindCSS：“顺风”与“导入”
EN

Stack Overflow用户

提问于 2021-12-23 00:59:20

回答 1查看 524关注 0票数 1

我在一个项目中使用了角13.1 (带有SASS) + TailwindCss 3.0.7，并发现了一个奇怪的行为。

在我的styles.scss中，我使用官方文档中所述的@tailwind指令导入了Tailwind样式，但是当我在一个延迟加载的模块上显示一个组件时，这些样式并没有被应用，我通过在每个组件上自己的样式表上再次导入顺风来修复这个问题。

如果我在@tailwind上为@import 'tailwindcss/...'更改了@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",
    ],
  },
};

angular

sass

tailwind-css

回答 1

Stack Overflow用户

回答已采纳

发布于 2022-02-01 11:14:23

我只是在做一个新项目，偶然发现了这件事。它对我有用，我注意到你的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) }

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/70456655

复制

相似问题

问角中的TailwindCSS：“顺风”与“导入”
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问角中的TailwindCSS：“顺风”与“导入”EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问角中的TailwindCSS：“顺风”与“导入”
EN