我正在开发一个安装了Tailwind CSS的Angular 12项目。我已经遵循了official docs,似乎一切都正常;但我不明白为什么有些类可以工作,而另一些则不行。
例如,我可以有这段代码,试图在我的div上添加两个Tailwind类:
<div class="text-center mt-2">
<h2>Please go back to <a class="custom-links" href="./login">login</a></h2>
</div>
字符串
text-center类可以工作,但mt-2不行。这种事情在整个项目中都在发生。我必须解决它的方法是使用传统的CSS或将其与Tailwind混合,就像这样:
<div id="back-to-login" class="text-center">
<h2>Please go back to <a class="custom-links" href="./login">login</a></h2>
</div>
型
在CSS上:
#back-to-login{
margin-top: 40px;
}
型
然后它工作正常,并应用了margin-top。
你知道会发生什么吗?
像建议的here那样重新安装node_modules并不能解决这个问题。
非常感谢.
我添加了styles.css和tailwind.config的代码
styles.css
/* You can add global styles to this file, and also import other style files */
@tailwind base;
@tailwind components;
@tailwind utilities;
@font-face {
font-family: "firechat";
src: url(./assets/fonts/blazed/Blazed.ttf);
}
/*
to change the default h1 styles on tailwind
https://tailwindcss.com/docs/preflight#extending-preflight
*/
@layer base {
h1 {
@apply text-6xl;
}
}
/*tailwind and own styles*/
#firechat-font{
font-family: "firechat";
color:red;
}
.custom-links{
color:red;
font-weight: bold;
}
型
Tailwind配置文件:
module.exports = {
content: [
"./src/**/*.{html,ts}"
],
theme: {
extend: {},
},
plugins: [],
}
型
编辑:我现在看到的是,例如mt-2应用并出现在devTools上(可能问题是它是注意到小的变化,我的错),但像mt-4或mt-6这样的更大的保证金没有。它也发生在其他属性上。
9条答案
按热度按时间aor9mmx11#
出于某种原因,在我的styles.scss中,我必须按如下方式导入变量
字符串
而不是
型
reload and it worked. Angular版本14.1.0,Tailwindcss版本3.1.7
5hcedyr02#
Angular 14尝试tailwind.config.js像这样
字符串
mpbci0fu3#
感谢@MaksatRahmanov,我找到了解决方案。问题似乎是我安装了最新的Tailwind版本(v3)与Angular 12。我切换回v2,一切正常。
它唯一的问题是,两个版本(check here)之间有很多东西发生了变化,所以它可能会破坏v3的许多正常工作。
gev0vcfq4#
看看这个教程:https://medium.com/tunaiku-tech/angular-11-tailwindcss-2-0-blazing-fast-cfa20ae3a5e9。在该教程中,使用TailwindCSS版本2。如果您想要TailwindCSS版本3,请更改配置文件以匹配TailwindCSS版本3配置文件。通过设置上述教程中提到的angular项目,TailwindCSS版本3工作正常。
ar7v8xwq5#
我也遇到过这种情况,我多次检查我的tailwind.js.js,
字符串
.应该足够了。但是由于我不知道的原因,它只是在添加新类时不重建。所以,和你一样,我在构建的CSS文件中没有看到新类。我几乎放弃了,但最后我的解决方案是:
src/tailwind.scss:
型
package.json中的新脚本,称为“tailwind”-它会监视HTML中的更改并重建css。
postcss.config.js:
型
还安装了npm-run-all,所以我可以在“npm run start”上服务并观察tailwind的变化:
型
angular.json:
型
这样就可以了。每当有新的类添加到HTML文件中时,你就可以提供和重建CSS。我知道这是一种变通方法,但至少它100%有效。
tct7dpnv6#
似乎你已经安装了最新版本的顺风与角12也许有什么问题?尝试安装顺风v2,看看它是否工作。一些破坏性的变化可能会发生,因为顺风v3
wbgh16ku7#
我也遇到过这个问题,当生成新的Angular项目时,全局样式.scss将包含
/* You can add global styles to this file, and also import other style files */
,请确保在此注解上方添加@tailwind base; @tailwind components; @tailwind utilities;
,否则它将无法工作。jmo0nnb38#
我花了很长时间来解决这个问题,最后发现停止运行应用程序并再次运行:ng serve然后tailwind将正确应用,作为tailwindcss的文档
bis0qfac9#
解决方法很简单,只要在tailwind.confing.js中设置
important: true
,它将把所有的实用程序都视为更高的优先级。在tailwindcss退房
字符串