Tailwind CSS在Angular组件中无法使用。

Question

我已在我的Angular项目中实现了Tailwind CSS。Tailwind CSS在项目的根级别上运行，但在任何组件内部放置的scss文件中不起作用。我需要为每个组件内的scss文件构建吗？还是有任何永久解决方案吗？

- Hardi Shah

---

你如何只在 app.component.scss 或者 styles.scss 中导入 Tailwind？我认为可能是包的导入方式有问题！如果你还没有看过，请查看这个指南： https://dev.to/seankerwin/angular-8-tailwind-css-guide-3m45 - Merack

我浏览了上面的链接，但只能在根级别起作用。 为了构建样式CSS，我创建了output.css并将其构建为style.css。现在，由于编写了生成代码，Tailwind适用于样式CSS。我不知道如何在任何组件内构建CSS。 - Hardi Shah

@HardiShah，你能否给我们提供一个更清晰的解释呢？我也遇到了同样的问题。我的组件中的代码没有任何样式。当我将div移出组件时（在Google Chrome中），我可以看到HTML已经被样式化了。 - Leroy Meijer

Answer 1

更新

终于在 Angular CLI v11.2 中，支持 Tailwind 开箱即用。

# install tailwind
npm install --save tailwindcss
# create `tailwind.config.js`
npx tailwindcss init

Then disable view encapsulation of the component

- Chellappan வ