我正在開發一個安裝了 Tailwind CSS 的 Angular 12 專案。我遵循了官方檔案，似乎一切正常；但我不明白為什么有些課程有效而其他課程無效。
例如，我可以有這段代碼，嘗試在我的 div 上添加兩個 Tailwind 類：
<div class="text-center mt-2">
<h2>Please go back to <a class="custom-links" href="./login">login</a></h2>
</div>
文本中心類有效，但 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。
你知道會發生什么嗎？
像這里建議的那樣重新安裝 node_modules 并不能解決它。
非常感謝。
我添加了 styles.css 和 tailwind.config 的代碼
樣式.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;
}
順風組態檔：
module.exports = {
content: [
"./src/**/*.{html,ts}"
],
theme: {
extend: {},
},
plugins: [],
}
EDIT: What I am seeing now is that for example mt-2 applies and appear on devTools (maybe problem was it was to small change to notice, my fault), but a bigger margin like mt-4 or mt-6 doesn′t. It happened also with other properties.
uj5u.com熱心網友回復：
看來您已經安裝了最新版本的 angular 12 的 tailwind 可能有問題？嘗試安裝tailwind v2，看看它是否有效。自tailwind v3以來可能會發生一些重大變化
uj5u.com熱心網友回復：
感謝@MaksatRahmanov，我找到了解決方案。看來問題是我用 Angular 12 安裝了最新的 Tailwind 版本（v3）。我切換回 v2，一切正常。
唯一的問題是兩個版本之間發生了很多變化（檢查這里），所以它可能會破壞許多在 v3 中正常作業的東西。
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/439286.html