我正在使用帶有 postcss 和 webpack react 的最新版本的 tailwind (3.0.15)。
我有這段代碼：
{/* <div className="flex flex-row justify-center items-center overflow-hidden h-[100vh] text-white">
<div className="flex flex-row items-stretch overflow-hidden min-w-[600px] max-w-[900px] w-[calc(100%_-_100px)] h-[400px]">
{pictures.map((item) => (
<div
onClick={() => setActive(!active)}
className={
active
? `relative overflow-hidden grow-[1000] min-w-[60px] bg-center max-w-[600px] m-0 bg-auto scale-100 transition ease-[cubic-bezier(0.05, 0.61, 0.41, 0.95)] duration-500 rounded-[40px] bg-[url('${item}')]`
: `relative overflow-hidden grow-[1] m-4 min-w-[60px] bg-center bg-auto-120 transition ease-[cubic-bezier(0.05, 0.61, 0.41, 0.95)] duration-500 rounded-[30px] bg-[url('${item}')]`
}
>
<div
className={
active
? "absolute bottom-0 left-0 right-0 h-[120px] transition ease-[cubic-bezier(0.05, 0.61, 0.41, 0.95)] duration-500 carousel-image"
: "carousel-image-not left-0 right-0 bottom-[-40px] h-[120px] transition ease-[cubic-bezier(0.05, 0.61, 0.41, 0.95)] duration-500"
}
></div>
</div>
))}
</div>
</div> */}
問題在這里：
bg-[url('${item}')]
以這種方式運行代碼后，出現以下錯誤：
ERROR in ./src/style.css (./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js!./src/style.css) 5:36-71
Module not found: Error: Can't resolve '${item}' in '/Users/octaviandavid/Desktop/project/client/src'
resolve '${item}' in '/Users/octaviandavid/Desktop/project/client/src'
Parsed request is a module
using description file: /Users/octaviandavid/Desktop/project/client/package.json (relative path: ./src)
using description file: /Users/octaviandavid/Desktop/project/client/package.json (relative path: ./src/${item})
no extension
/Users/octaviandavid/Desktop/project/client/src/${item} doesn't exist
.tsx
/Users/octaviandavid/Desktop/project/client/src/${item}.tsx doesn't exist
.ts
/Users/octaviandavid/Desktop/project/client/src/${item}.ts doesn't exist
.js
/Users/octaviandavid/Desktop/project/client/src/${item}.js doesn't exist
as directory
/Users/octaviandavid/Desktop/project/client/src/${item} doesn't exist
resolve as module
/Users/octaviandavid/Desktop/project/client/src/node_modules doesn't exist or is not a directory
looking for modules in /Users/octaviandavid/Desktop/project/client/node_modules
single file module
using description file: /Users/octaviandavid/Desktop/project/client/package.json (relative path: ./node_modules/${item})
no extension
/Users/octaviandavid/Desktop/project/client/node_modules/${item} doesn't exist
.tsx
/Users/octaviandavid/Desktop/project/client/node_modules/${item}.tsx doesn't exist
.ts
/Users/octaviandavid/Desktop/project/client/node_modules/${item}.ts doesn't exist
.js
/Users/octaviandavid/Desktop/project/client/node_modules/${item}.js doesn't exist
/Users/octaviandavid/Desktop/project/client/node_modules/${item} doesn't exist
/Users/octaviandavid/Desktop/project/node_modules doesn't exist or is not a directory
/Users/octaviandavid/Desktop/node_modules doesn't exist or is not a directory
/Users/octaviandavid/node_modules doesn't exist or is not a directory
/Users/node_modules doesn't exist or is not a directory
/node_modules doesn't exist or is not a directory
@ ./src/style.css 8:6-142 22:17-24 26:7-21 58:25-39 59:36-47 59:50-64 63:6-73:7 64:54-65 64:68-82 70:42-53 70:56-70 72:21-28 83:0-112 83:0-112 84:22-29 84:33-47 84:50-64 61:4-74:5
@ ./src/index.tsx 2:0-21
webpack 5.66.0 compiled with 1 error in 6758 ms
顯然，它認為有一個檔案 ${item} 需要編譯（postcss/webpack）。嘗試洗掉 node_modules 并重新安裝它們但沒有任何變化，同樣我嘗試洗掉代碼但沒有任何變化。
uj5u.com熱心網友回復：
我不認為 tailwindcss 有url功能。如果您弄清楚那部分，則插值不適用于 tailwindcss。使用
bg-${item}將不起作用。它不會拋出錯誤，但順風不會知道是什么${item}，所以你永遠不會有那個類名。
我有類似的問題：
const TYPES = {
success: "green",
warning: "yellow",
danger: "red",
};
我正在將type道具傳遞給組件
const messageType=TYPES[type]
然后像這樣使用它：
`bg-${messageType}-100`
為了解決這個問題，我創建了：
const BG_CLASSES = {
success: "bg-green-100",
warning: "bg-yellow-100",
danger: "bg-red-100",
};
并通過：
<div className={`${BG_CLASSES[type]}`}>
uj5u.com熱心網友回復：
通過報告的問題在 github 上解決。https://github.com/tailwindlabs/tailwindcss/issues/7138
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/418674.html
標籤：