我的順風任意值功能的行為確實不一致，特別是與轉換延遲屬性有關。當我直接在任意值內使用任何隨機值時，它對我迄今為止測驗過的每個值（隨機正整數）都有效。前任...
<li className="delay-[2455]">{some text}</li>
但是如果我要使用一個變數，這個類只會偶爾根據值產生任何影響，看起來是隨機的。前任...
const delay = "250ms";
return <li className={`delay-[${delay}]}`></li>
上面的這個段將產生一個有效的類，但下面的段將沒有效果并且不會產生一個有效的類
const delay = "500ms";
return <li className={`delay-[${delay}]}`></li>
我不確定這是我做錯了什么還是順風的一些奇怪的怪癖。我對任何和所有建議持開放態度。如果它有所作為，我將 typescript 與 react 結合使用。我正在使用 tailwindcss 版本 3.0.11 和 postcss 版本 8.4.5 這些是我的 tailwind.config.js 和我的 postcss.config.js 檔案
module.exports = {
content: ["./src/**/*.{js,jsx,ts,tsx}",],
theme: {
extend: {
screens: {
'3xl': '1920px',
'xsm': '428px',
'2xsm': '360'
},
fontFamily: {
title: ['Patrick Hand'],
body: ['Balsamiq Sans']
},
transitionProperty: {
'opacity': 'opacity',
},
},
},
plugins: [],
}
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}
uj5u.com熱心網友回復：
就在檔案中：
Tailwind 如何提取類名的最重要含義是它只會在源檔案中找到作為完整的完整字串存在的類。
如果您使用字串插值或將部分類名連接在一起，Tailwind 將找不到它們，因此不會生成相應的 CSS
這意味著您需要使用完整的類名，而不是其部分的動態連接。
例如，您可以制作這樣的功能：
function getClassByDelay(delay) {
return {
250: 'delay-250',
500: 'delay-500',
750: 'delay-750',
}[delay]
}
并像這樣使用它： <li className={getClassByDelay(delay)}></li>
如果你真的需要使用動態類，那么你也可以使用另一種方法：只需將它們添加到safelist配置中的陣列中：
// tailwind.config.js
module.exports = {
content: [
// ...
],
safelist: [
'delay-250',
'delay-500',
'delay-750',
// etc.
]
// ...
}
這樣，Tailwind 就會知道它safelist無論如何都需要生成這些類，無論它是否在您的源代碼中找到它們。
顯然，如果您停止在代碼中使用它們，您需要管理此串列并且不要忘記從配置中洗掉未使用的類，否則它們將成為您捆綁軟體中的死重。
更多資訊：https ://tailwindcss.com/docs/content-configuration#class-detection-in-depth
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/412519.html
標籤：