我為我的下一個 JS 應用程式構建了一個靜態網站，該應用程式使用 Tailwind CSS 進行樣式設定。我靜態地用作 CDN。開發服務器（本地主機）中的網站運行正常。但是，在生產中，樣式的某些部分似乎被破壞了（準確地說是頁眉、頁腳和暗/亮模式之間的切換）。附上截圖以供參考。
本地服務器：
生產：
當我檢查本地和生產環境中的相應元素時，HTML 結構和類名似乎沒有區別，但是當我將滑鼠懸停在生產中損壞的元素（在這種情況下為導航項）上時，相應的元素沒有被突出顯示。到目前為止，這是我能夠找到的。下面是幾個組態檔
next.config.js：
const isProd = process.env.NODE_ENV === 'production'
module.exports = {
reactStrictMode: true,
images: {
// domains: ['raw.githubusercontent.com','ibb.co'],
domains: ['raw.githubusercontent.com'],
loader:'imgix',
path:''
},
assetPrefix: isProd ? 'CDN_LINK_HERE' : '',
}
tailwind.config.css ：
module.exports = {
purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
darkMode: 'class', // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}
我該如何解決這個問題？謝謝。
uj5u.com熱心網友回復：
確保在 .pure 的清除陣列中添加需要應用 CSS 的完整路徑串列tailwind.config.css。
module.exports = {
// ▼ here you need to add all paths according to your needs
purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}', './your-other-component-folder/**/*.{js,ts,jsx,tsx}'],
darkMode: 'class', // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/333905.html
標籤：反应 新产品经理 下一个.js 图像优化 静态网络应用程序
上一篇：如何手動修復npm漏洞？